{"id":6190,"date":"2020-02-07T21:19:14","date_gmt":"2020-02-07T19:19:14","guid":{"rendered":"https:\/\/u-labs.de\/portal\/?p=6190"},"modified":"2020-02-07T21:19:16","modified_gmt":"2020-02-07T19:19:16","slug":"browser-sync-asp-net-core-automatisch-neu-laden-in-visual-studio-code","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/browser-sync-asp-net-core-automatisch-neu-laden-in-visual-studio-code\/","title":{"rendered":"Browser Sync: ASP.NET Core automatisch neu laden in Visual Studio Code"},"content":{"rendered":"<p>Browser Sync ist eine Funktionalit\u00e4t des klassischen Visual Studio: Wird eine Razor-Ansicht ver\u00e4ndert und gespeichert, aktualisiert das Tool automatisch euer Browser-Fenster. Das h\u00e4ndische Aktualisieren entf\u00e4llt damit. Leider besitzt der quelloffene Visual Studio Code Editor bislang keine vergleichbare Funktionalit\u00e4t. Gl\u00fccklicherweise l\u00e4sst sich ein \u00e4hnliches Verhalten mit Browsersync umsetzen. So kommt ihr auch unter Linux in den Genuss von automatischen Browser-Aktualisierungen. <\/p>\n<h2 class=\"wp-block-heading\">Browsersync einrichten<\/h2>\n<p>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 <strong>npm init &#8211;yes<\/strong> an und installieren folgende zwei Pakete:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm i -D browser-sync concurrently\n<\/pre>\n<\/div>\n<p>Browsersync baut via Websockets eine Bridge zwischen VS Code und dem Browser. Mit concurrently k\u00f6nnen wir DotNet und Browsersync parallel ausf\u00fchren. Hierzu legen wir unter scripts in der package.json drei Skripte an:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n  &quot;scripts&quot;: {\n    &quot;browsersync&quot;: &quot;npx browser-sync start --proxy http:\/\/localhost:5000\/ --files &#039;**\/*.cshtml, **\/*.css, **\/*.js, **\/*.htm*&#039;&quot;,\n    &quot;dotnet&quot;: &quot;dotnet run watch&quot;,\n    &quot;watch&quot;: &quot;concurrently --kill-others &#039;npm run dotnet&#039; &#039;sleep 1; npm run browsersync&#039;&quot;\n  }\n<\/pre>\n<\/div>\n<p>Wir machen uns hierbei die Watch-Funktionalit\u00e4t der dotnet CLI zunutzen. Bei Code\u00e4nderungen werden diese automatisch neu kompiliert. Klassisch m\u00fcsste 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\u00e4t. Dies r\u00fcsten wir mittels NPM-Pakete selbst nach. So kann das h\u00e4ndische Aktualisieren des Browsers ebenfalls automatisiert werden. <\/p>\n<p>Sowohl dotnet run als auch browsersync k\u00f6nnen wir nun \u00fcber das Skript watch starten:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm run watch\n<\/pre>\n<\/div>\n<p><a href=\"https:\/\/u-img.net\/img\/8812Ay.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/u-img.net\/img\/8812Ay.gif\"><\/a><\/p>\n<p>Browsersync kann durch zus\u00e4tzliche Parameter angepasst werden. Beispielsweise um den Standardport 3000 anzupassen. <\/p>\n<h2 class=\"wp-block-heading\">Neu laden bei Code\u00e4nderungen<\/h2>\n<p>Das obige Vorgehen funktioniert bei Razor-Ansichten zuverl\u00e4ssig. Allerdings bislang noch nicht bei Code-\u00c4nderungen an .cs Dateien. Beispielsweise einer Controller-Action. Durch dotnet run watch wird die Anwendung zwar neu kompiliert. Doch browserwatch reagiert nicht auf diese \u00c4nderungen. <\/p>\n<p>Zwar k\u00f6nnte man .cs Dateien in den Filter aufnehmen. Sobald die \u00c4nderung w\u00e4chst, wird man hier allerdings auf Probleme sto\u00dfen: .NET Core ben\u00f6tigt ein paar Sekunden, bis der Code kompiliert ist. Browsersync l\u00e4dt jedoch sofort neu. Um das Problem zu l\u00f6sen, gibt es einen kleinen Trick. Man legt in Startup.Configure() am Ende eine Textdatei mit dem aktuellen Timestamp an <\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic void Configure(IApplicationBuilder app, IHostingEnvironment env)\n{\n\/\/ ... \n\n#if DEBUG\n    File.WriteAllText(&quot;bin\/browsersync-update.txt&quot;, DateTime.Now.ToString());\n#endif\n}\n<\/pre>\n<\/div>\n<p>und nehmen diese in den Filter auf<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n  &quot;scripts&quot;: {\n    &quot;browsersync&quot;: &quot;npx browser-sync start --proxy http:\/\/localhost:5000\/ --files &#039;**\/*.cshtml, **\/*.css, **\/*.js, **\/*.htm*, bin\/browsersync-update.txt&#039;&quot;\n  }\n<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Browser Sync ist eine Funktionalit\u00e4t des klassischen Visual Studio: Wird eine Razor-Ansicht ver\u00e4ndert und gespeichert, aktualisiert das Tool automatisch euer Browser-Fenster. Das h\u00e4ndische Aktualisieren entf\u00e4llt damit. Leider besitzt der quelloffene Visual Studio Code Editor bislang keine vergleichbare Funktionalit\u00e4t. Gl\u00fccklicherweise l\u00e4sst sich ein \u00e4hnliches Verhalten mit Browsersync umsetzen. So kommt ihr auch unter Linux in den &#8230;<\/p>\n","protected":false},"author":5,"featured_media":6197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,1],"tags":[522,640],"class_list":["post-6190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwareentwicklung","category-technik-news","tag-asp-net-core","tag-visual-studio-code"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=6190"}],"version-history":[{"count":10,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6190\/revisions"}],"predecessor-version":[{"id":6202,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6190\/revisions\/6202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/6197"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=6190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=6190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=6190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}