Hosting models (Blazor Mode)
Bit TodoTemplate uses 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 AdminPanel has 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 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 AdminPanel has 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:
To switch to Blazor server mode:
1. Change value of <BlazorMode> on 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 TodoTemplate.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:
To switch to Blazor WebAssembly mode:
1. Change value of <BlazorMode> on Directory.build.props file in Solution Items root folder.
<BlazorMode>BlazorWebAssembly</BlazorMode>
2. Set Api project as startup project.
3. Make sure the first line in the TodoTemplate.Client.Web.csproj file contains the following value.
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">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:
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 Directory.build.props file in Solution Items root folder.
<BlazorMode>BlazorHybrid</BlazorMode>
2. Set 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/Shared/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:
To switch to Blazor Electron mode:
1. Change value of <BlazorMode> on Directory.build.props file in Solution Items root folder.
<BlazorMode>BlazorElectron</BlazorMode>
2. Set Web as the startup project, choose electron as run target.
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: The project requires the installation of Electron.NET CLI, utilizing the .NET 5 runtime.
dotnet tool install ElectronNET.CLI -g
Note: This only runs the project. To debug the project, switch to other modes or consult the Electron.NET documentation.