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.
