How to activate hot reload on save with Blazor WASM?

Question

I'm building a Blazor WASM web application and I presently need to rebuild the app every time I make a change to the code.

I can't find a way to make all the components auto-reload/hot-reload on save with Visual Studio community.

Since React, Vue and Angular allow me to see a reload on save... Is there a way to get this feature working with Blazor ?

The best workaroung I found is:

• Run the app without debugging. But after I save the modification from the IDE, I must click refresh on the browser to see the modification.

Answer 1

Ok I just found out that it works the same way as if I made the app Server side.

You must start your app from the terminal using :

dotnet watch -p C:\MyApp\BlazorApp1\ run

Then after each time you press CTRL+S

It reloads the web page on the browser

Answer 2

Run the project with Ctrl + F5 (without the debugger) instead of F5 and on IIS express. Once .cs and .razor files are changed and saved across the solution, they are automatically rebuilt and the app restarted so that the changes can be seen by simply refreshing the browser.

Answer 3

I didn't get this working as well first, but now I finally got it, at least partially (only from terminal, not VS2022 directly).

Assuming you have a Blazor WASM hosted on .NET 6 Core.

1. Make sure all your project files are targetting .net6.0 (Client, Server and Shared). Also you might need to check your dependencies, so they don't target .net5 still (not sure how much they affect).

2. In Properties/launchSettings.json on Server: Add "dotnet": { "commandName": "Project", "hotReloadProfile": "aspnetcore" } inside "profiles", just like you probably have one for "IIS Express" and one for your project name.

(Make sure you use applicationUrl-ports that aren't in use, change if neccessary.)

3. In index.html in wwwroot on Client: Add <script src="_framework/aspnetcore-browser-refresh.js"></script> This was actually the game changer for me, it wasn't included as a source, even though the default WASM template didn't have this script-tag and still worked. Note sure why I need to explicitly include it like this.

4. Use Windows PowerShell (Command Prompt might work), and navigate to your Server project folder. Run dotnet watch. Now it should say "watch : Hot reload enabled...." on the first line and a lot of startup-text appears. Eventually you get "Content root path: ..." and your app should be running and listening for changes.

Unless I forgot something (I literally just got it working and feel quite tired), it should be working now. Note: You shouldn't start using VS2022 at all, use the terminal, otherwise their will be conflicts of copying and accessing files. If you e.g. need to rebuild in VS, stop in terminal with Ctrl+C first, then restart.