Is there any hot reload for blazor server-side?

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 :)

Solution 1:

Maybe you can try running your application from command prompt:

dotnet watch run debug

Solution 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

Solution 3:

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();
};

Solution 4:

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