CODEWITHSUNDEEP
blazorblazor-server-sideblazor-webassembly
gwruck
gwruck

Reputation: 793

Blazor Wasm Hosted Mixed with Blazor Server Pages

I want to be able to mix and match pages in my app between Web Assembly (WASM) and Server to best suit the application. eg. for pages that need to be highly secure or protect IP, I want to use Server pages, for other pages that I would like to offload workload to the client for performance or other reasons, I'll use WASM.

My plan was to use a Blazor Web Assembly hosted project, with the WASM pages hosted from the Client project and Server pages hosted from the Server project.

However, it has proven to be more complex than I anticipated to implement this and I wasn't able to find a write-up of this scenario.

The closest I could get was a series of posts and articles like this one https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/multiple-hosted-webassembly around hosting multiple web-assembly projects. However, this only works for multiple WASM projects within a single solution. It does not explain how to host Blazor Server pages from the Server project.

The above Microsoft link states that:

Optionally, the server project (MultipleBlazorApps.Server) can serve pages or views as a formal Razor Pages or MVC app.

I wanted to change this advice so that I could also serve Blazor Components from the Server project as well. The following answer describes how I got it to work. Please share any other comments / alternative methods if you have also tried to get this to work.

Upvotes: 4

Views: 1927

Answers (1)

gwruck
gwruck

Reputation: 793

UPDATED ANSWER SHOWING FULL MIX AND MATCH BETWEEN WASM AND SERVER PROJECTS - INCLUDING AzureAD AUTHENTICATION Following discussion with @MrC aka Shaun Curtis in comments, I undertook to add Authentication using AzureAD to the solution and it proved to be quite a bit more involved that I expected.

I have prepared a Github repository for the solution at: https://github.com/gwruck/Blazor_WASM_Server

There was a fair bit to getting everything to work - especially for the authentication, but it ended up being not too much of a change from the base template from visual studio for the Blazor WASM hosted solution.

Following is a screenshot of the solution and I'd encourage you to have a look. enter image description here

ORIGINAL ANSWER SHOWING DETAILED INSTRUCTIONS FOR HOSTING Blazor Pages on the Server project

  1. Create a new Blazor Web Assembly Solution (WASM). Choose the hosted option. You should have three projects in the solution (Client, Server and Shared)

enter image description here

  1. Create a new Blazor Server Project. We will use this as a dummy template to make it easier to implement the Server Pages in the WASM project. Copy the highlighted folders / files into the WASM.Server project.

enter image description here

In the Server Project

  1. Update namespaces / references etc. in all of the imported files. I also perform the following renames to avoid clashes with the WASM project:
    • wwwroot/css folder --> wwwroot/svr-css
    • wwwroot/favicon.ico --> wwwroot/svr-favicon.ico
    • App.razor --> ServerApp.razor (then update the reference to this file in _Layout.cshtml)
  2. Change the @page paths (including _Host) to have a prefix eg. @page "/counter" --> @page "svr/counter"

enter image description here

  1. Update the ServerApp.razor file

enter image description here

  1. Update the _Layout File for references to the new svr-css folder location

enter image description here

  1. Update Program.cs as follows (Note: I couldn't get the code formatting to work, so if you want the text of this code, go to the Github link at the end of this answer) enter image description here

enter image description here

Following is the final structure of the Server project.

enter image description here

Then navigate to the app url [https://localhost:7073/] you should start on the WASM home page:

enter image description here

If you then navigate to the /srv url [https://localhost:7073/srv] you should see the Blazor Server home page from the dummy Blazor Server app that we used to create this sample.

enter image description here

Here is a link to a Github repo. https://github.com/gwruck/BlazorWasmMixedwithServerPages

There are quite a few other things that you will need to implement for a production app, including authentication and how to get a seamless experience for users navigating between the WASM and Server pages. It will also be necessary to consider other paths within the Server project (eg. /api etc.) for the MapWhen section of the Program file to ensure that you implement the correct behavior for these paths.

For navigation, my plan is to use an iframe in the WASM app to call and display the Server app pages so that from the users perspective, it is all one app, with consistent layouts etc.

For authentication, I use Azure AD and expect that this may be a bit of a challenge as I also use the Server project to host a Web Api. If it proves to be difficult, I will add another post.

Upvotes: 3

Related Questions