Browser Sync ist eine Funktionalität des klassischen Visual Studio: Wird eine Razor-Ansicht verändert und gespeichert, aktualisiert das Tool automatisch euer Browser-Fenster. Das händische Aktualisieren entfällt damit. Leider besitzt der quelloffene Visual Studio Code Editor bislang keine vergleichbare Funktionalität. Glücklicherweise lässt sich ein ähnliches Verhalten mit Browsersync umsetzen. So kommt ihr auch unter Linux in den Genuss von automatischen Browser-Aktualisierungen.
Browsersync einrichten
Im Folgenden gehen wir von einem existierenden ASP.NET Core 2.x Projekt aus. Ob es sich um MVC oder Razor-Pages handelt, ist unerheblich. Existiert noch keine package.json Datei, legen wir diese mit npm init –yes an und installieren folgende zwei Pakete:
npm i -D browser-sync concurrently
Browsersync baut via Websockets eine Bridge zwischen VS Code und dem Browser. Mit concurrently können wir DotNet und Browsersync parallel ausführen. Hierzu legen wir unter scripts in der package.json drei Skripte an:
"scripts": {
"browsersync": "npx browser-sync start --proxy http://localhost:5000/ --files '**/*.cshtml, **/*.css, **/*.js, **/*.htm*'",
"dotnet": "dotnet run watch",
"watch": "concurrently --kill-others 'npm run dotnet' 'sleep 1; npm run browsersync'"
}
Wir machen uns hierbei die Watch-Funktionalität der dotnet CLI zunutzen. Bei Codeänderungen werden diese automatisch neu kompiliert. Klassisch müsste hier die Instanz beendet und neu gestartet werden. Dies erleichtert die Entwicklung bereits deutlich. Allerdings besitzt Visual Studio Code leider bislang keine Browser Sync Funktionalität. Dies rüsten wir mittels NPM-Pakete selbst nach. So kann das händische Aktualisieren des Browsers ebenfalls automatisiert werden.
Sowohl dotnet run als auch browsersync können wir nun über das Skript watch starten:
npm run watch
Browsersync kann durch zusätzliche Parameter angepasst werden. Beispielsweise um den Standardport 3000 anzupassen.
Neu laden bei Codeänderungen
Das obige Vorgehen funktioniert bei Razor-Ansichten zuverlässig. Allerdings bislang noch nicht bei Code-Änderungen an .cs Dateien. Beispielsweise einer Controller-Action. Durch dotnet run watch wird die Anwendung zwar neu kompiliert. Doch browserwatch reagiert nicht auf diese Änderungen.
Zwar könnte man .cs Dateien in den Filter aufnehmen. Sobald die Änderung wächst, wird man hier allerdings auf Probleme stoßen: .NET Core benötigt ein paar Sekunden, bis der Code kompiliert ist. Browsersync lädt jedoch sofort neu. Um das Problem zu lösen, gibt es einen kleinen Trick. Man legt in Startup.Configure() am Ende eine Textdatei mit dem aktuellen Timestamp an
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
// ...
#if DEBUG
File.WriteAllText("bin/browsersync-update.txt", DateTime.Now.ToString());
#endif
}
und nehmen diese in den Filter auf
"scripts": {
"browsersync": "npx browser-sync start --proxy http://localhost:5000/ --files '**/*.cshtml, **/*.css, **/*.js, **/*.htm*, bin/browsersync-update.txt'"
}