Create the same Blazor app with both WASM and Server-Side

Question

I would like create a blazor app (two apps actually) that supports both Hosted WASM and Server-Side. They do not need to be a single app that dynamically switch. Actually, I would prefer two separate apps like wasm.myapp.com and server.myapp.com. Users can pick which flavor they prefer to use based on their network environment. Also based on business needs, I could pick one flavor over the other for different scenarios (like browser limitations).

Anyway, is it possible to create two apps that are sharing the same components? Either one app is a shell that references the other app (or vice versa), or two shell apps that reference a third project? Basically the goal is to create one set of UI components/pages that will be shared by both apps.

How do you set it up?

Thanks for any tips.

Answer 1

You need to split your code out into a set of library projects and end point Web projects. Providing a comprehensive answer to this question is beyond the scope of a StackOverflow answer. I'll show the basics here with some project screen shots to show project structure and content, and provide a link to the detailed code in a GitHub Repo at the bottom.

Libraries

Blazor.App contains all the shared code. I split this out into three projects to apply Clean Design principles so I have:

• Blazor.Core - standard Library project
• Blazor.Data - standard Library project - dependency to Core
• Blazor.UI - Razor Library project - dependency to Core

Blazor Server

The Blazor.Server.Web project is the end point project to run the Blazor Server application. Dependencies to Core, Data and UI.

Blazor WASM

• Blazor.WASM is a Blazor WebAssembly project to build out the WASM code base - dependency on Core, Data and UI.

• Blazor.WASM.Web is a AspNetCore web server to host the API and service point for the WASM application - dependency on Core, Data and Controllers.

• Blazor.Controllers contains the controllers - - dependency on Core and Data.

The principle differences between the two applications is in the data pipeline. Interfaces are used to define the Data Brokers to provide abstraction. The Server project uses the Server data brokers. The WASM Server API Controllers use the Server data brokers while the WASM application uses the API data brokers. The different projects load the relevant data broker as the IDataBroker service.

Here's a set of screen shots of the different projects:

Controllers

Core

Data

UI

Server.Web

WASM

WASM.Web

Link to the Repo - https://github.com/ShaunCurtis/Blazr.Demo