use InteractiveWebAssembly in Blazor Web App

Question

I created project from this template (.NET 8):

And I want to use InteractiveWebAssembly in Counter.razor page.

I add modification in Program.cs:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents() 
    .AddInteractiveWebAssemblyComponents();

and:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();  

and on Counter.razor replaced @rendermode InteractiveServer to @rendermode InteractiveWebAssembly

But after this counter stopped to work, debugger never go to IncrementCount() method.

What did you miss, do I need other modifications in the project?

Answer 1

The default template does not include WebAssembly functionality.

To enable WASM, any code that runs in the browser must be placed in a separate project.

Here’s the recommended project structure for enabling WASM interactivity:

You can set this up easily using the --interactivity WebAssembly option when generating the project (or the corresponding switches in your IDE):

dotnet new blazor -o WasmTest2 --interactivity WebAssembly

Note: It's bit confusing, because --interactivity WebAssembly means "also with wasm", not "wasm only". For wasm only there is separated dontet new blazorwasm template.