Debugging TypeScript in ASP.NET Core Projekten

ASP.NET Core Projekte haben eine neue Projektstruktur erhalten. Besonders der Ordner wwwroot dürfte dabei sofort auffallen. Wie es der Name bereits vermuten lässt, bildet wwwroot den Root der Web Applikation und ist für statische Dateien wie Stylesheets, Javascripts oder Bilder gedacht. So weit so gut.

Probleme kann es geben, wenn TypeScript für die clientseitige Programmierung zum Einsatz kommt und die ts-Files ausserhalb des wwwroot-Ordners abgelegt werden.

Diese Struktur ist aber durchaus üblich, schliesslich sollen diese Scripts nicht ausgeliefert werden, sondern lediglich das generierte JavaScript. Browser-Debugger, wie zB. der Chrome Debugger, können nun die TypeScript-Files nicht laden, weil ASP.NET Core diese Files nicht ausliefert, da sie ausserhalb des wwwroot-Ordners abgelegt sind.

Damit der Debugger während der Entwicklung trotzdem funktioniert, kann mit der UseFileServer-Extension die Static File Middleware so konfiguriert werden, dass auch Dateien ausserhalb des wwwroot-Ordners an den Client ausgeliefert werden. Es macht Sinn, diese Funktionalität nur auf Development-Environments zu aktivieren.

public class Startup
{
	public Startup(IHostingEnvironment env) {}

	public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApplicationEnvironment appEnv)
	{
		app.UseStaticFiles();

		if (env.IsDevelopment())
		{
			// For TypeScript debugging in browser
			app.UseFileServer(new FileServerOptions()
			{
				FileProvider = new PhysicalFileProvider(System.IO.Path.Combine(appEnv.ApplicationBasePath, "App")),
				RequestPath = new PathString("/App"),
			});
		}
	}

	// Entry point for the application.
	public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}

Ein lauffähiges Beispiel-Projekt ist auf GitHub abgelegt.