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 looki

Answer 1

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

Answer 2

Add

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

to your .csproj and then run:

dotnet watch run debug

This is not a hot reload as you might expect but it automates the re-run process. You'll just have to wait some seconds and reload the page.

Answer 3

Just launch the project using CTRL + F5 (without attaching a debugger), make changes and reloads the page.

Answer 4

Thijs Tijsma had a post that worked for me.

You have to run without the debugger attached in Visual Studio (CTRL + F5 in Visual Studio)

in the Pages\_host.cshtml add

<script src="_framework/blazor.server.js"></script>

<!-- Make sure you place it after the include for blazor.server.js -->

<environment include="Development">
    <script src="~/Scripts/HotReload.js"></script>
</environment>

Then just make the reload js file wwwroot\scripts\HotReload.js

window.Blazor.defaultReconnectionHandler.onConnectionDown = function ()
{
    window.location.reload();
};

Answer 5

Maybe you can try running your application from command prompt:

dotnet watch run debug

Answer 6

There is now support for stateful Blazor hot-reload in LiveSharp (https://www.livesharp.net)

You can see it working here: https://www.youtube.com/watch?v=MCh5-44UBpM

LiveSharp is a commercial tool that allows you to update C# code in runtime.

Disclaimer: I'm the author