Hot Reload in Server-Side Blazor

July 23, 2020 By Nick Proud

At the time of writing this post, without third-party plug-ins, server-side Blazor doesn’t have native support for hot-reload. I was kind of spoiled with this luxury when working with Angular, so I decided to find out if there was a workaround. Guess what…

There is!

It’s quite a simple fix and is pretty easy to deploy.

First, add a new javascript file to your solution and place it in the wwwroot/Scripts folder. (If the Scripts folder does not exist you can just create it.) Name it ‘HotReload.js’

Inside the script, place the following JavaScript function.

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

Then, in Pages\_host.cshtml, add the following below the reference to blazor.server.js.

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

<!-- Needs to be below blazor.server.js -->

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

And there you go! Gotta love that hot reload. Big shout out to Thijs Tijsma who explains the workaround in more detail in this post.

Whenever you save a file in your solution, you should see your page reload. It’s not the fastest of hot reloads but it does the trick. Make sure you also run your solution without a debugger attached. You can do this with ctrl-F5 in Visual Studio.

Share