Blazor: Multiple hosted ASP.NET Core Blazor WebAssembly apps

Question

Hi,

I'm working on a project where I would like to have one backend and two Blazor Webassembly clients, both "hosted".

I found this documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/multiple-hosted-webassembly?view=aspnetcore-7.0&pivots=route-subpath
but it seems outdated (.NET 7), changing the .NET version in the select menu to 9 or 10 always redirect to 7.

Is it still doable ?

Thanks,

Esteban

Answer 1

Hi @Esteban Loiseau ,

The dropdown keeps snapping back to .NET 7 because the Hosted Blazor WebAssembly project template was dropped in .NET 8. For new Blazor work on .NET 8 and up, Microsoft points you to the Blazor Web App template instead: Tooling for ASP.NET Core Blazor.

You can still build the two-client setup, it's just not a template anymore, so you wire it up by hand. The article you linked still holds up for that part: give each client its own StaticWebAssetBasePath, then route each app by subpath or port with MapWhen, UseBlazorFrameworkFiles, and MapFallbackToFile.

For a new build, I would suggest one of these:

• Go with Blazor Web App and the WebAssembly render mode to stay on the current path.
• Or keep two standalone Blazor WebAssembly clients talking to one shared ASP.NET Core Web API backend, if you really need them as separate apps.

And if this is an existing hosted solution you're upgrading rather than a new one, those keep getting product support across releases: Secure a hosted ASP.NET Core Blazor WebAssembly app with Microsoft Entra ID.

If you found my response helpful, I would greatly appreciate it if you could follow this guidance. Thank you.  

Answer 2

the sample is two static web blazor WASM (standalone) sites and one webapi site. if you want server pre-render (interactive), then create 3 projects.

• webapi - the common backend
• blazor wasm app 1 with server pre-render
• blazor wasm app 2 with server pre-render

in dev all three apps will have different port numbers. in production you can:

• assign a cname to each app and configure host headers
• use a subsite for each. for the blazor apps use the <base=href> for support.
• combination of above

Answer 3

Yes, it is still supported and doable to host multiple Blazor WebAssembly apps from a single ASP.NET Core backend in current .NET versions. The documented pattern for .NET 7 remains valid and is the supported way to do this; the article simply has not yet been versioned for later .NET selections in the dropdown.

Key points from the documented approach that still apply:

1. Use a hosted Blazor WebAssembly solution
   • Create (or reuse) a hosted Blazor WebAssembly solution with projects like:
     • MultipleBlazorApps.Client (first Blazor WebAssembly client)
     • MultipleBlazorApps.SecondClient (second Blazor WebAssembly client)
     • MultipleBlazorApps.Server (ASP.NET Core server backend)
     • MultipleBlazorApps.Shared (shared types)
2. Add the second client as a standalone Blazor WebAssembly app
   • Add a second client project (e.g., MultipleBlazorApps.SecondClient) as a standalone WebAssembly app (not ASP.NET Core hosted) and then wire it into the server.
   • Copy shared components (like FetchData.razor) and remove unused static data as described so both clients can call the same server API.
3. Configure static web asset base paths
   • In each client project file, set a distinct StaticWebAssetBasePath so the server can serve each app separately:
     • First client (MultipleBlazorApps.Client.csproj):

              <StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
       

     • Second client (MultipleBlazorApps.SecondClient.csproj):

              <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
       

4. Reference the shared and client projects from the server
   • In the second client project, reference the shared project:

          <ItemGroup>
            <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
          </ItemGroup>
     

   • In the server project file, reference the second client:

          <ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />
     

5. Configure routing/hosting style
   • Two supported patterns are documented and remain applicable:
     • Port/domain hosting (e.g., :5001 / :5002 or firstapp.com / secondapp.com).
     • Route subpath hosting (e.g., /FirstApp and /SecondApp).
   For route-subpath hosting, the server:
   • Keeps static file middleware (app.UseStaticFiles();).
   • Removes the default app.UseBlazorFrameworkFiles(); and app.MapFallbackToFile("index.html"); and replaces them with middleware that maps requests to /FirstApp and /SecondApp.
   • Each client’s index.html sets a matching <base> href (for example, <base href="/FirstApp/" />).
   For port/domain hosting, the server’s launchSettings.json is configured so each client is reachable on its own port or host, while FirstApp and SecondApp are used internally to route static assets.

The article explicitly notes that the server project can serve both WebAssembly clients and also optionally act as a Razor Pages or MVC app, which aligns with the “one backend, multiple hosted clients” scenario.

In summary, the pattern in the .NET 7 documentation is still the supported way to host multiple Blazor WebAssembly apps from a single ASP.NET Core backend; the lack of a .NET 9/10 dropdown entry does not indicate that the scenario is no longer supported.

---

References:

• Multiple hosted ASP.NET Core Blazor WebAssembly apps (port-domain)
• Multiple hosted ASP.NET Core Blazor WebAssembly apps (route-subpath)