Recompile .razor files on save for Blazor WASM

8
votes

Is there a way to make Blazor Webassembly recompile .razor files when they're changed/updated and then saved? I'm used to this happening both in traditional ASP.NET Core MVC razor views as well as client-side frameworks like Angular. In ASP.NET Core MVC >3.0, something like services.AddRazorPages().AddRazorRuntimeCompilation(); would do the trick, but nothing exists for Blazor that I could find.

It's annoying when I need to stop the entire application and restart it to see the latest changes. By default the Main method for a new Blazor application looks like

        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            await builder.Build().RunAsync();
        }

What am I missing here? Is Blazor WASM just not there yet? I'm open to something a little hacky like dotnet watch dotnet build if that's a solution.

3
c#asp.net-coreblazorblazor-client-side
Hot reload is not there yet. I think there were a couple of community projects for this though – rdmptn
Any idea what those community projects are? I can’t find much of anything. – Ben Sampica
Can't remember now either, but googling something like hit reload should bring up something – rdmptn
Check this one... github.com/dotnet/aspnetcore/issues/5456 – Rahul
Seems like it's available in preview now: github.com/dotnet/aspnetcore/issues/5456#issuecomment-661655817 – JvR

3 Answers

6
votes

As of .NET 5.0 and VS 16.8.1 it doesn't look like there is a built in HMR like you would find with an Angular or React project, where you can change code and have it refresh the browser.

According to the info I have found, this functionality is slated for .NET 6 but there is workaround to get this working, it is a little cumbersome but it does work.

If you run the .NET project using dotnet watch --project "{PathToServer}/{YourServerProject}.csproj" run instead of starting the debug or pressing F5 it will watch for any changes in the project's files including the .razor files and recompile them.

As of right now the browser will display a message saying that it lost connection to the server and doesn't seem to reestablish a connection. You are required to refresh the browser manually and any changes will be displayed but you will lose any application state.

Best that they have right now, see this thread for more info

0
votes

A teacher helped me with a solution for this as follows. There are two options:

1- ) In Visual Studio 2019 without using Debug mode:

  • Click on Tools> Options -> Projects and Solutions -> ASP .NET Core -> Under "Auto build and refresh option" SELECT "Auto build and refresh browser after saving changes"
  • Now the browser will update itself when you make a change, but for this to work, every time you run the application, you must run it without Debug by pressing Ctrl + F5 (start without debugging) or Clicking on Debug -> Start without Debugging IMPORTANT: only works if run without debugging

To use in Debug mode you can try the following:

2-) In the launchSettings.json file of the project include a profile with the following data:

1.   "Watch": {
2.        "commandName": "Project",
3.        "launchBrowser": true,
4.        "launchUrl": "http://localhost:5000/",
5.        "commandLineArgs": "watch run",
6.        "workingDirectory": "$(ProjectDir)",
7.        "executablePath": "dotnet.exe",
8.        "environmentVariables": {
9.          "ASPNETCORE_ENVIRONMENT": "Development"
10.       }
11.     }

Next, when running your application in Debug mode, select profile Watch from the Visual Studio menu. Note: With this you will be running the dotnet watch debug tool.

Solution sent by Professor Marcoratti in the following course: https://www.udemy.com/course/curso-blazor-essencial/learn/lecture/17573912#questions/15161620/