Rulando Aurelia con ASP.NET 4 MVC en VS2015

Bueno, una vez probado, por encima, el funcionamiento de Aurelia, me tocaba empezar a entender como ponerlo en marcha, no me hacía gracia el tema de los esqueletos, tantos archivos que no entendía y el uso de JSPM que nunca lo había usado, así pues documentandome un poco sobre jspm y buscando un poco sobre como empezar con Aurelia desde cero he dado con la forma de montarme un proyecto en Visual Studio 2015 con ASP.NET 4 usando Aurelia y JSPM.

Lo voy a contar cuál guía burros, si alguien tiene alguna duda que diga en los comentarios e intentaré explicarlo. En mi caso lo configuraré para poder trabajar con Typescript, si no usas Typescript también te vale el post, ignora las partes de TypeScript y haz lo necesario para funcionar con lo que uses 😀
En este caso voy a usar TypeScript v1.8.7

Lo primero es crear un proyecto web ASP.NET 4 MVC sin autenticación (para simplificar), lo siguiente es limpiar el proyecto de morralla:

  • Quitar los paquetes NuGet de cliente: Microsoft.JQuery.Unobtrusive.Validation, JQuery.Validation, Bootstrap, JQuery, Respond y Modernizr
  • Eliminar los bundles eliminando el fichero App_Start/BundleConfig.cs y quitar la linea BundleConfig.RegisterBundles(BundleTable.Bundles); de Global.asax.cs.

Por supuesto tenemos que tener instalado NodeJS e instalar JSPM de forma global con:

npm install jspm -g

Abrimos una linea de comandos en el raíz del proyecto web e inicializamos JSPM con jspm init. En principio acepto todas las opciones por defecto excepto no para use a transpiler? y el path al fichero config.js que pongo .\Scripts\systemjs-config.js para integrarlo mejor con Visual Studio y dejar claro que config.jscontiene la configuración para systemjs (antes no lo sabía y el nombre no ayudaba).

Incluimos systemjs-config.js en el proyecto y le añadimos esta sección:

paths: {
    "*": "app/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
}

Con ello provocamos que systemjs vaya a buscar los módulos en la carpeta app y que vaya a buscar a la carpeta jspm_packages los módulos que instalemos con JSPM.

A continuación instalamos los paquetes mínimos para que Aurelia funcione:

jspm install aurelia-framework
jspm install aurelia-bootstrapper

Esto nos instala unos cuantos paquetes (npm style) y si echamos un vistazo a systemjs-config.js podemos ver lo que JSPM ha creado. Crea unos mapeos de nombres de módulos a nombres de los módulos descargados.

Lo siguiente es montar un hola mundo con Aurelia, para ello vamos a _layout.cshtml y limpiamos toda la carga de los bundles y quitamos todo el contenido de <body> excepto @RenderBody().

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Mi aplicación ASP.NET</title>
</head>
<body>
    @RenderBody()
</body>
</html>

Ahora vamos a index.cshtml quitamos todo y escribimos el código para arrancar Aurelia, lo dejamos así:

@{
    ViewBag.Title = "Home Page";
}
<div aurelia-app>
    <h1>Loading...</h1>
</div>

<script src="~/jspm_packages/system.js"></script>
<script src="~/Scripts/systemjs-config.js"></script>
<script>
      System.import('aurelia-bootstrapper');
</script>

Por último creamos la carpeta app y dentro creamos los ficheros app.html y app.ts:

<template>
    ${message}
</template>


export class App {
   message = "Hola mundo";
}

Ejecutamos y listo, ya temos rulando Aurelia en un proyecto ASP.NET 4 MVC con Visual Studio.

Ahora solo nos queda una cosa más, poder importar los módulos de aurelia desde TypeScript, para ello tenemos que importar los typings de aurelia, aurelia incluye para cada paquete su fichero .d.ts con los typings que tenemos que referenciar, para ello podemos hacer dos cosas.

  1. Escribir un fichero con todas las referencias a cada uno de los typings que usemos con /// <reference path="/jspm_packages/npm/aurelia-xxxx.d.ts/>
  2. Escribir un fichero tsconfig.json para que incluya los typings de aurelia al compilar.

A partir de la versión 1.8 de TypeScript ya podemos usar archivos tsconfig.json en Visual Studio, incluso podemos usar más de uno y tener así dos proyectos separados.

Yo opto por la segunda opción, ya que tener un tsconfig.json nos ayudará en un futuro para añadir opciones de typescript.

Creamos tsconfig.json en el raíz del proyecto con este contenido:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "inlineSourceMap": true
  },
  "exclude": [
    "bin",
    "obj",
    "node_modules"
  ]
}

Por defecto TypeScript incluye en la compilación todos los ficheros .ts y .d.ts con esta configuración le decimos a typescript que excluya las carpetas donde no deseamos buscar y TypeScript cogerá el resto y por lo tanto cogerá los .d.ts de la carpeta jspm_packages.

Hecho esto viene otro problema, TypeScript nos dice que no reconoce los simbolos Map y Promise. Esto es debido a que los typings de Aurelia hacen uso de estos simbolos por que usan la libreía core-js, la cual es un polyfill de ECMAScript 6. Por lo tanto debemos incluir los typings de core-js, pero estos no se encuentran en los packages de JSPM, estos los obtendremos con la utilidad Typings.

Typings es la versión moderna de TSD, se usa para descargar typings de numerosos proyectos javascript.

Instalamos Typings e instalamos los typings de core-js:

npm install -g typings
typings install core-js --ambient --save

No tengo experiencia en el uso de Typings, es la primera vez que lo uso, pero por lo que sé, prepara los typings para su uso en NodeJs y en el Browser. Al estar configurado typescript para escanear todos los ficheros .d.ts los encuentra dos veces y empiezan a salir simbolos duplicados, así que lo que hacemos es excluir main.d.ts en el fichero tsconfig.json:

"exclude": [
    "bin",
    "obj",
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ]

Ahora si, ya tenemos todo configurado y rulando.

El siguiente paso es crear un fichero gulp y usar aurelia-bundler para poder crear bundles y empaquetar todo el código para usarlo en producción. Es bastante fácil y se integra de puta madre con systemjs.

Bueno, espero que ayude a alguien.

Que aproveche!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Demuestra que no eres un bot *