Is there any hot reload for blazor server-side?

Question

I have just one, quick question. Is there way to hot reload a blazor app? At least, .razor files? Now I'm hosting my app on local IIS (not IIS express).

I was looking through internet, but i didn't found anything helpful.

Thank you all for anwsering :)

Answer 1

Maybe you can try running your application from command prompt:

dotnet watch run debug 

Answer 2

Update 2021-11-10:

With Visual Studio 2022 being released 2021-11-08 hot reload now works out of the box. Upgrade your project to .NET 6 to get the best experience.

https://docs.microsoft.com/en-us/visualstudio/releases/2022/release-notes#NET-HotReload-170

Update 2021-04-09:

Initial .NET Hot Reload support for .NET 6 Preview 3

Add the "hotReloadProfile": "aspnetcore" property to your launch profile in launchSettings.json. For Blazor WebAssembly projects, use the "blazorwasm" hot reload profile.

Run the project using dotnet watch.

You can find a list of supported code edits in the docs.

https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#initial-net-hot-reload-support

Thanks @Quango for pointing it out.

Update 2020-04-09:

Instead of using browser-sync I have added the following code in _Host.cshtml under <script src="_framework/blazor.server.js"></script>

<environment include="Development">     <script>         window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {             setTimeout(function () {                 location.reload();             }, 7000);         }     </script> </environment> 

Not optimal but it works better since you need one less http server. Could also use _reconnectCallback if you still like to see the messages Attempting to reconnect to the server... and Could not reconnect to the server. Reload the page to restore functionality..

window.Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {     document.location.reload(); } 

https://thijstijsma.nl/2020/02/18/blazor-server-hot-reload/ https://stackoverflow.com/a/59807998/3850405

Original:

Hot reloading is planned for .NET 5, which is scheduled for Nov 2020 according to @danroth27 who is working on the Blazor project.

https://github.com/dotnet/aspnetcore/issues/5456#issuecomment-584219488

As @MauricioAtanache says you can use dotnet watch but don't forget to add which files to watch. Example:

dotnet watch --project BlazorTest.Server run 

BlazorTest.Server.csproj file:

<ItemGroup>     <Watch Include="..\**\*.razor" />     <Watch Include="..\**\*.scss" />     <Watch Include="..\**\*.cs" /> </ItemGroup> 

It is however not true hot reloading since it will restart the server but you have to do a manual refresh in the browser. You will also need to edit an existing file before a reload takes place if you add a new file.

To solve this I like to use browser-sync set up as a proxy to your web app.

Example:

browser-sync start --proxy https://localhost:5001/ --files '**/*.razor,**/*.cshtml, **/*.css, **/*.js, **/*.htm*' 

https://weblog.west-wind.com/posts/2019/May/18/Live-Reloading-Server-Side-ASPNET-Core-Apps

There is also a project on Github by @martasp called BlazorLiveReload that is supposed to handle Blazor Live Reload without refreshing page.

From author:

It uses razor engine version 3 to compile components to c# classes. Then using Roslyn compiler I compiled down those classes to assembly. Finally, I loaded the app.razor component from an assembly with reflection and with Steve Sanderson Test host modified library I turned component to plain HTML. To serve HTML files in realtime I used WebSockets to have a full-duplex communication.

I have not tested this project myself so I can't say how well it works.

https://github.com/martasp/BlazorLiveReload

General thread about the issue:

https://github.com/dotnet/aspnetcore/issues/5456