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?

Readymix

Doesen't seem doable. WebAssemblies target .Net Framework 2.1 while the Server App runs on .Net Core 3.1. I tried to separate the code from the UI so that I can perform unit-tests on the UI logic using xUnit, and thus I moved those into a separate class library. I could ofc create linked sources files in multiple projects, but that's developing a smell that I'm not entirely comfortable with. – Readymix

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.

Interfluent