ASP.NET Core 1.0, TypeScript y los sourcemaps

En el momento de publicar este post, el uso de TypeScript en un proyecto de ASP.NET Core 1.0 debe seguir una configuración determinada, tal y como se explica aquí: https://github.com/Microsoft/TypeScript/wiki/Using-TypeScript-With-ASP.NET-5

Los proyectos de ASP.NET Core 1.0 sirven los ficheros estáticos desde la carpeta wwwroot, pero la configuración nos propone crear una carpeta scripts en la raíz del proyecto y en ésta, incluir el archivo tsconfig.json y los ficheros .ts. En el tsconfig.json configuramos que la ruta del javascript generado esté en la carpeta wwwroot y listo.

En mi opinión, esta es una estructura muy interesante de organizar el código, y estoy totalmente de acuerdo con ella. Pero tiene un inconveniente. Los archivos originales de TypeScript a partir de los cuales se ha generado el javascript no están disponibles en el navegador pese a que hemos configurado en el tsconfig.json la generación de sourcemaps. ¿Por qué? Pues porque apuntan a un directorio de nuestro proyecto que no se encuentra bajo wwwroot y por lo tanto no es accesible como archivo estático.

NoSourcemaps

Pero no está todo perdido…

Una de las mejores características de ASP.NET Core 1.0 es que podemos configurar completamente el pipeline que gestiona la petición y la respuesta de nuestra aplicación mediante pequeñas piezas de código que llamamos middleware. De hecho, el que nuestra aplicación sirva archivos estáticos es posible porque hemos configurado un middleware para ello. Toda esta configuración se hace en el archivo Startup.cs, dentro del método Configure.

Pues bien, lo único que tendremos que hacer es configurar una nueva instancia del middleware que permite servir archivos estáticos diciéndole que queremos servir el contenido de la carpeta scripts. Algo así:

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        appEnvironment.ApplicationBasePath + @"\scripts"),
    RequestPath = new PathString("/scripts")
});

app.UseStaticFiles();

En este caso, appEnvironment es una instancia de IApplicationEnvironment que hemos añadido como parámetro en el método Configure y que nos permitirá tener acceso a la ruta física de la carpeta raíz de nuestra aplicación.

De esta forma, nuestra aplicación será capaz de servir los archivos .ts aunque no estén dentro de la carpeta wwwroot.

Sourcemaps

Experiencia de depuración completa!