Blazor Server Hot Reload

I was working on the UI of a Blazor Server project the other day and had this cycle going on:

  1. Run my application without a debugger attached (CTRL + F5 in Visual Studio)

    Quick note on this, if you don’t do this you have to rebuild the project yourself before changes are visible.

  1. Make a few changes
  2. Reload browser to see the changes
  3. Repeat from step 2

I would love to see the browser refresh automatically after making a change, unfortunately that is not yet available in VS and third party (JavaScript) solutions I have tried didn’t actually work.

After a little search I found that Blazor has a public API, containing everything I needed to have the browser reload when it loses the SignalR connection.

This is a really simple implementation and it might not work for your use case. Let me know if this is helpful to you or if you have a better alternative!

9 thoughts on “Blazor Server Hot Reload

  1. I tried your solution but when I save changes in VS on the browser I see:
    Attempting to reconnect to the server…
    and then:
    Could not reconnect to the server. Reload the page to restore functionality.

    Tried it both with Edge Chromium and with Mozilla firefox but the result is the same.

    Is there something I’m doing wrong?

    1. Hi Michele,

      It seems like the script is not properly loaded.

      Can you verify in your browser’s console that window.Blazor.defaultReconnectionHandler.onConnectionDown is set to a function inside HotReload.js?

      Another thing that’s very important is that you have to run your project without the debugger attached (CTRL + F5).

      Kind regards,

      Thijs Tijsma

      1. My fault…I used a wrong name for the script file.
        I noticed it reading your answer. Now it works properly and in a few seconds reload the modified page.
        Thank you
        Michele

Join the adventure

This site uses Akismet to reduce spam. Learn how your comment data is processed.