github repo github stars

Hosting models (Blazor Mode)

Bit AdminPanel uses Blazor for building UI. Blazor is a web framework for building web UI components (ASP.NET Core Blazor) that uses modern technologies to host different models. Blazor can be hosted on server-side in ASP.NET Core (Blazor Server) and on client-side in the browser on a WebAssembly-based .NET runtime (Blazor WebAssembly, Blazor WASM). You can also host Blazor apps in native mobile and desktop apps that render to an embedded Web View control (Blazor Hybrid). Regardless of the hosting model, the approach and tools you build Blazor apps with are the same. The same Blazor source code can be used for any of the hosting models. (Read more About ASP.NET Core Blazor hosting models).

Note: Bit AdminPanel supports all three modes as following:

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 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)
Multi-startup solution
3. Make sure the first line in the AdminPanel.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 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 AdminPanel.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.
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.
Debug target
3. Change ApiServerAddress in Client/Shared/wwwroot/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)