How can I host multiple Client WASM application in single Blazor project?

Question

I'm building ASP.NET Core Application hosting multiple Blazor WebAssembly apps.

My server's Startup.cs:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Notes.Web.Server
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebAssemblyDebugging();
            }

            app.UseHttpsRedirection();
            app.MapWhen(ctx => ctx.Request.Path.Equals("/client"), client =>
            {
                client.Use((ctx, nxt) =>
                {
                    ctx.Request.Path = "/client" + ctx.Request.Path;
                    return nxt();
                });
                
                client.UseBlazorFrameworkFiles("/client");
                client.UseStaticFiles();
                client.UseRouting();
                client.UseEndpoints(endpoints =>
                {
                    endpoints.MapControllers();
                    endpoints.MapFallbackToFile("/client/{*path:nonfile}", "client/index.html");
                });
            });
        }
    }
}

When I trying to reach /client address, page loading succesfully, but then the application does not load because script _framework/blazor.webassembly.js could not be found.

In client's index.html I have <base href="/client/" /> As you can see all stuff configured same as in the Microsoft documentation

But it's dont works. Please help me. Thank you!

Answer 1

You need to change also your csproj adding this settings:

<PropertyGroup>
  ...
  <StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
</PropertyGroup>

<ItemGroup>
  <ProjectReference Include="..\Client\{SOLUTION NAME}.Client.csproj" />
  <ProjectReference Include="..\SecondClient\SecondBlazorApp.Client.csproj" />
  <ProjectReference Include="..\Shared\{SOLUTION NAME}.Shared.csproj" />
</ItemGroup>

read here for more information: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#hosted-deployment-with-multiple-blazor-webassembly-apps-1

Example

This is an example of a working multiple Wasm application.
The following code is from my Server project in Startup:

app.MapWhen(ctx => ctx.Request.Host.Port == 5001 ||
            ctx.Request.Host.Equals("clientapp.com"), first =>
            {
                first.Use((ctx, nxt) =>
                {
                    ctx.Request.Path = "/Client" + ctx.Request.Path;
                    return nxt();
                });

                first.UseBlazorFrameworkFiles("/Client");
                first.UseStaticFiles();
                first.UseStaticFiles("/Client");
                first.UseRouting();

                first.UseAuthentication();
                first.UseAuthorization();

                first.UseEndpoints(endpoints =>
                {
                    endpoints.MapControllers();
                    endpoints.MapFallbackToFile("/Client/{*path:nonfile}",
                        "Client/index.html");
                });
            });

My Client.csproj contains:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <StaticWebAssetBasePath>Client</StaticWebAssetBasePath>
    <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
  </PropertyGroup>
...

Source code

Example of working project on GitHub https://github.com/nbiada/multiclient-wasm-example

Answer 2

Did you add the _framework/blazor.webassembly.js to your host.cshtml?

Please check out this article https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-5.0