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

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

Answer 4

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

Answer 5

A history of pain

Currently there is no real good solution yet that re-compiles changed parts automatically and save as much time as possible, like edit and continue. Another sad fact is that there is an open issue about it since 2018 (!). They promise to finally fix this with .NET 6. We'll see if this is worth more, cause after pressure of the community, they already promised a solution in the beginning of 2020 for .NET 5. About 6 months later, they had to tell that they couldn't make it to release after all for v5.

Workaround with debugging

What doesn't worked

Running dotnet watch run is a good thing, but reaches its limitations when you want o use a debugger. Even with dotnet watch run debug, I couldn't make it work to attach Visual Studio to the process, so that it reachs breakpoints. I also tried to let VS run dotnet watch run debug with the following profile entry in launchSettings.json:

"WatchDebug": {
  "commandName": "Executable",
  "executablePath": "dotnet.exe",
  "commandLineArgs": "watch run debug",
  "workingDirectory": "$(ProjectDir)",
  "launchBrowser": false,
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

The process is started and got restarted when files were changed, but no breakpoint is hit. Also not with dotnet run -c debug.

Then I found a setting in VS which looks good, but no effect, even not when using IIS Express:

The only workaround I found with debugging

Inject your config in _Host.cshtml

@inject IWebHostEnvironment env

and add the following call after blazor.server.js

@if (env.EnvironmentName != "Production") {
    <script>
        window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {
            console.log('reloading')
            window.location.reload();
        };
    </script>
}

Now create a debug configuration in launchSettings.json without launching the browser, cause this would let you click the page you want to test on every change, which we'd like to avoid:

"MyProjectWithoutBrowser": {
  "commandName": "Project",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  },
  "dotnetRunMessages": "true",
  "applicationUrl": "http://localhost:5000"
}

Make sure the env variable got only set to Debug during development and Production otherwise. Open the browser on the given Url. If you choose that config and changes were applied, press [Ctrl] + [Shift] + [F5]. This would restart the debugger, then the browser re-connects and you see the changes. On a hello world Blazor Server app, this takes about ~3-4 seconds.

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

Answer 7

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.