Convert WebAssembly Blazor to a Hosted one

Question

I'm testing out Blazor.net but immediately fell short on the lack of debugging in WebAssembly (.net Core 3.1).

Is there a fast & easy way to reconfigure my WebAssembly app to a hosted app, so that I can debug the .net code as I develop my samples?

Answer 1

I just watched this video and it shows a nice trick:

• Add 2 projects to your solution, ServerApp and WasmApp.
• in your ServerApp, add a reference to WasmApp

• in ServerApp._Host.cshtml , change this line to use WasmApp.App :

  <component type="typeof(WasmApp.App)" render-mode="ServerPrerendered" />

• now remove all .razor files and the resulting dead code from the ServerApp project.

You can now develop all blazor pages in the WasmApp and also run them with the ServerApp. The only duplication is in maintaining _Host.cshtml and index.html in parallel when you add css or js files.

And the vid als showed an additional feature to show what is running:

@using System.Runtime.InteropServices

<p>Env: @Environment</p>

@code{
  string Environment = RuntimeInformation.IsOSPlatform(OSPlatform.Create("BROWSER")) // was "WEBASSEMBLY"
  ? "WebAssembly" 
  : "Server";

}

put this on you main page or NavMenu or something.