Blazor Server Hot Reload

February 18, 2020February 19, 2020by Thijs Tijsma

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

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.

Make a few changes
Reload browser to see the changes
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”

Michele says:

May 20, 2020 at 15:44

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?

Reply
1. Thijs Tijsma says:
  
  May 20, 2020 at 18:02
  
  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
  
  Reply
  1. Michele says:
    
    May 20, 2020 at 18:27
    
    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
    
    Reply
    1. Thijs Tijsma says:
      
      May 20, 2020 at 19:25
      
      I’m glad it’s working for you now!
      
      Reply
armando restrepo says:

May 6, 2020 at 04:52

Thank you, thank you, thank you!

Reply
Ben Niederee says:

April 29, 2020 at 16:28

If you change to window.location.reload(); it will refresh the broswer

Reply
1. Thijs Tijsma says:
  
  April 29, 2020 at 17:01
  
  I clarified the Gist and prefixed “location.reload()” with “window.”. It should still work without.
  
  Reply
Tim says:

April 19, 2020 at 11:27

Very helpful – simplest solution I’ve come across.

I would add that the script include must go after the http://_framework/blazor.server.js in _Host.cshtml, otherwise window.Blazor is undefined.

Reply
1. Thijs Tijsma says:
  
  April 19, 2020 at 12:26
  
  Hi Tim,
  
  Great to hear it was helpful to you!
  
  Thank you for the addition, I’ve edited the Gist to make this clear.
  
  Kind regards,
  
  Thijs Tijsma
  
  Reply