5-javascript-services

Introducción a JavaScript Services

JavaScriptServices es un conjunto de herramientas para ASP.NET Core, que entre otras cosas aportan algunos middlewares muy interesantes a la hora de crear Single Page Applications (SPAs) utilizando frameworks modernos como Angular 2 o React.js.

En este módulo se verán algunas de las herramientas, especialmente las que forman parte de SpaServices.

Tarea 1: Mejorando el manejo de rutas

1. Copiar la solución de la carpeta begin que se encuentra dentro de la carpeta src de este módulo a un lugar para trabajar.

   Nota: El contenido de esta carpeta es el mismo que el que se genera cuando se termina el módulo de integración, por lo que se puede utilizar el creado en vez del de la carpeta begin.

2. Agregar SpaServices, para esto, abrir el archivo project.json y agregar la siguiente dependencia.

   "Microsoft.AspNetCore.SpaServices": "1.0.0-*"

3. Ejecutar en la terminal dotnet restore para actualizar las dependencias y el project.lock.json.

   

   Ejecutando dotnet restore

4. Ahora, actualizar la ruta de fallback, para esto abrir el archivo Startup.cs y reemplazar la ruta con el nombre spa-fallback por la siguiente.

   routes.MapSpaFallbackRoute(
     name: "spa-fallback",
     defaults: new { controller = "Home", action = "Index" });

   Nota: Por más que el código parezca muy similar, la ventaja que tiene esta ruta es que maneja casos de archivos que parezcan ser estáticos. Esto implica que si se pide, por ejemplo, /images/ejemplo.png, usando la ruta anterior va a devolver la página de Angular 2, mientras que con esta nueva ruta devolverá 404 en caso de no encontrarse el archivo (que es justamente lo esperable para este ejemplo).

   El código a reemplazar es el siguiente.

   routes.MapRoute(
       name: "spa-fallback",
       template: "{*url}",
       defaults: new { controller = "Home", action = "Index" });

5. Correr la aplicación con dotnet run y comprobar que funciona como antes.

6. Terminar la aplicación con Ctrl + C.

Tarea 2: Mejorando la experiencia de desarrollo

1. Antes que nada, se necesitan algunas herramientas más del lado de Webpack, por lo cual hay que ejecutar el siguiente comando.

   npm install --save-dev --save-exact [email protected] [email protected]
   

   

   Instalando las nuevas herramientas

2. Luego, abrir el archivo Startup.cs y agregar la siguiente sentencia using.

   using Microsoft.AspNetCore.SpaServices.Webpack;

3. Ahora, agregar el siguiente código dentro del método Configure antes de la llamada a app.UseStaticFiles();, para agregar el middleware de Webpack solo para el caso de estar en un entorno de desarrollo.

   // remember to "set/export ASPNETCORE_ENVIRONMENT=Development"
   if (env.IsDevelopment()) 
   {
     app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
       HotModuleReplacement = true
     });
   }

4. Luego, actualizar la configuración por defecto de Webpack para que utilize la que se encuentra en webpack.dev-aspnet.js. Para esto, modificar el archivo webpack.config.js con el siguiente contenido.

   module.exports = require('./config/webpack.dev-aspnet.js');

5. Agregar el soporte para Hot Module Replacement (HMR) en el cliente, agregando el siguiente código al final del archivo main.ts.

   // Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
   // you modify source files. This will not preserve any application state other than the URL.
   declare var module: any;
   if (module.hot) {
     module.hot.accept();
   }

6. Antes de correr la aplicación, actualizar el project.json para eliminar la tarea que se corre antes de cada build. Para esto, eliminar la siguiente línea.

   "precompile": [ "npm run dev-build"],

7. Para probar estos cambios hay que cambiar el entorno a desarrollo, para esto ejecutar el siguiente comando.

   • En windows:

     set ASPNETCORE_ENVIRONMENT=Development
     

   • En Mac/Linux:

     export ASPNETCORE_ENVIRONMENT=Development
     

8. Correr la aplicación con dotnet run.

   

   Ejecutando la aplicación

9. Una vez que está corriendo la aplicación, comprobar que funciona como antes.

10. Ahora, abrir el archivo app.component.ts dentro de la carpeta app en ClientApp y modificar el template del título.

    <h1>{{title}} updated</h1>
    

11. Notar que el navegador se actualiza automáticamente ante estos cambios sin necesidad de reiniciar el servidor, ni similares.

    

    Actualización automática del servidor

12. Terminar la aplicación con Ctrl + C.

Conclusiones

ASP.NET Core tiene muchas herramientas para desarrollo moderno de aplicaciones. JavaScriptServices nos permite crear aplicaciones modernas de forma mucho más fácil y rápido. Es importante notar que estas herramientas se encuentran en constante desarrollo con lo cual a futuro pueden existir aún mas y mejores herramientas.