Hosting models (Blazor Mode)

bit project templates use Blazor for building UI. Blazor is a web framework for building web UI components that uses modern technologies to host different models.
Blazor can be hosted on server-side in ASP.NET Core (Blazor Server), on client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly, Blazor WASM), and in native mobile and desktop apps that render to an embedded Web View control (Blazor Hybrid).
Additionally, bit project templates have added support for a new mode, Blazor Electron, which allows for building desktop apps with Blazor.
Regardless of the hosting model, the approach and tools used to build Blazor apps are the same and the same Blazor source code can be used for any of the hosting models.

Blazor Server

With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection using the WebSockets protocol.
To switch to Blazor server mode:

1. Change value of <BlazorMode> on src/Directory.build.props file in Solution Items root folder.

<BlazorMode>BlazorServer</BlazorMode>

2. Set solution on Multi-startup project, by right click on solution name and selecting properties from right-click menu (change the action of the Api, Web projects to start)

3. Make sure the first line in the Client.Web.csproj file contains the following value.

<Project Sdk="Microsoft.NET.Sdk.Web">

Blazor WebAssembly

Blazor WebAssembly (WASM) apps run client-side in the browser on a WebAssembly-based .NET runtime. The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. The app is executed directly on the browser UI thread. UI updates and event handling occur within the same process. The app's assets are deployed as static files to a web server or service capable of serving static content to clients.
To switch to Blazor WebAssembly mode:

1. Change value of <BlazorMode> on src/Directory.build.props file in Solution Items root folder.

<BlazorMode>BlazorWebAssembly</BlazorMode>

2. Set Api project as the only startup project.

3. Make sure the first line in the Client.Web.csproj file contains the following value.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

Note: When you run the project, by default the swagger page will open in the launched browser. But you can simply remove the swagger url from the address bar to access the app itself.

Note: The client side (WebAssembly) debugging doesn't work by default, but you can simply enable it by changing the launch profile to BlazorWebAssembly as shown in the following image:

Note: We encourage you to debug on Blazor Server as much as possible and use Blazor WebAssembly for production.

Blazor Hybrid

Blazor can also be used to build native client apps using a hybrid approach. Hybrid apps are native apps that leverage web technologies for their functionality. In a Blazor Hybrid app, Razor components run directly in the native app (not on WebAssembly) along with any other .NET code and render web UI based on HTML and CSS to an embedded Web View control through a local interop channel.
Blazor Hybrid is on top of .NET MAUI and has access to all native features of supported platforms (Android, iOS, macOS and Windows)
To switch to Blazor Hybrid mode:

1. Change value of <BlazorMode> on src/Directory.build.props file in Solution Items root folder.

<BlazorMode>BlazorHybrid</BlazorMode>

2. Set Client.App as the startup project, choose either Android, IOS, or Windows, then select your Physical device or Emulator as Debug-Target.

3. Change ApiServerAddress in Client/Core/appsettings.json to make sure your Android / iOS device can reach the server.

4. Set solution on Multi-startup project, by right click on solution name and selecting properties from right-click menu (change the action of the Api, App projects to start)

Blazor Electron

Blazor can also be used to build native client apps using another approach similar to Blazor Hybrid with different supported platforms (Windows, macOS and Linux)
To switch to Blazor Electron mode:

1. Change value of <BlazorMode> on src/Directory.build.props file in Solution Items root folder.

<BlazorMode>BlazorElectron</BlazorMode>

2. Set Client.Web as the startup project and choose Electron as the launch profile as shown in the following image:

3. Set solution on Multi-startup project, by right click on solution name and selecting properties from right-click menu (change the action of the Api, Web projects to start)

Note: This only runs the project. To debug the project, switch to other modes or consult the Electron.NET documentation.
Note: In order to debug in Blazor Server mode, set the Web project as startup and switch back to the default launch profile.