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

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.

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

View more solutions

Comments

[cebilon123]

Thank you so much! It's working as it should be. Have a great day!

[Ogglas]

Should mention that it is a monthly fee between €9.90 and €19 depending on personal / business use.

[D-Go]

I actually had to use this in combination with : <script> Blazor.defaultReconnectionHandler._reconnectCallback = function (d) { document.location.reload(); } </script>

[mvdgun]

Looks like the hot reload functionality will not be shipped with .NET 5: github.com/dotnet/aspnetcore/issues/5456#issuecomment-666728‌​638

[axon]

Hot reload didn't work with these methods for me. A few tweaks has it working though. From Powershell run 2 windows: 1. dotnet watch run, 2. browser-sync start --proxy https://localhost:5001/ --files 'bin/Debug/netstandard2.1/BlazorApp.dll'. Without this, the browser-sync triggers too early and misses the changes

[DigiDamsel]

@axon This is excellent - it works, thanks!

[Cornelius Roemer]

Yay, this works beautifully. It makes the page reload automatically whenever there's a change - not totally seamless but almost there.

[Quango]

Further update: .NET 6.0 Preview 3 now enables hot reload proper

[Alex Kovanev]

How to debug a client side using hot reloads?