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!
anyway to get this working using kestrel only works with iis express in visual studio 2019
this solution only worked for me after adding
services.AddMvc().AddRazorRuntimeCompilation();
in Startup.cs
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?
Hi Michele,
It seems like the script is not properly loaded.
Can you verify in your browser’s console that
window.Blazor.defaultReconnectionHandler.onConnectionDownis 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
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
I’m glad it’s working for you now!
Thank you, thank you, thank you!
If you change to window.location.reload(); it will refresh the broswer
I clarified the Gist and prefixed “location.reload()” with “window.”. It should still work without.
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.
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