Run two blazor WASM apps inside a single WASM-hosted project

Question

I am using the latest preview for a WebAssembly (WASM) hosted Blazor app. I have set up a WASM hosted app and configured it to use a base href of /App1/ inside of the wwwroot/index.html file of the client app folder:

<base href="/App1/" />

At this point, my app structure is like so:

1. Client
2. Server
3. Shared

I then mapped the app in the server app folder to the route:

app.Map("/app1", app1 =>
{
    app1.UseHttpsRedirection();
    app1.UseBlazorFrameworkFiles();
    app1.UseStaticFiles();
    app1.UsePathBase("/app1");
    app1.UseRouting();

    app1.UseIdentityServer();
    app1.UseAuthentication();
    app1.UseAuthorization();
    app1.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    });
});

Running this with a couple of launch setting changes to map to /app1 works fantastic. Next, I copied the client app and changed the namespace and csproj to App2.

My app structure would now be:

1. App1 (Client app)
2. App2 (Client app)
3. Server
4. Shared

I set the base href to /App2/, and I added a second mapping to the server startup:

app.Map("/app1", app1 =>
{
    app1.UseHttpsRedirection();
    app1.UseBlazorFrameworkFiles();
    app1.UseStaticFiles();
    app1.UsePathBase("/app1");
    app1.UseRouting();

    app1.UseIdentityServer();
    app1.UseAuthentication();
    app1.UseAuthorization();
    app1.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    });
});

app.Map("/app2", app2 =>
{
    app2.UseHttpsRedirection();
    app2.UseBlazorFrameworkFiles();
    app2.UseStaticFiles();
    app2.UsePathBase("/app2");
    app2.UseRouting();

    app2.UseIdentityServer();
    app2.UseAuthentication();
    app2.UseAuthorization();
    app2.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("index.html");
    });
});

However, the project doesn't run. It complains that the static files are still merged together. I get this compile error when trying to run the server project with dotnet run:

/usr/local/share/dotnet/sdk/3.1.201/Sdks/Microsoft.NET.Sdk.Razor/build/netstandard2.0/Microsoft.NET.Sdk.Razor.StaticWebAssets.targets(191,5): error : Conflicting assets with the same path '/appsettings.Development.json' for content root paths '/Users/user/Developer/WasmHosted/App1/wwwroot/appsettings.Development.json' and '/Users/user/Developer/WasmHosted/App2/wwwroot/appsettings.Development.json'. 

I've also tried adding a commandLineArgs to change the content root location in the launchsettings of the client apps with no effect:

"commandLineArgs": "--contentroot=/app1",

Any suggestions would be incredibly appreciated, as I don't know what else to try.

This is the dotnet new command I used to create the project

dotnet new blazorwasm -au Individual -ho -n WasmHosted

Answer 1

Javier, a team member of the Blazor project, has developed an example project here: https://github.com/javiercn/BlazorMultipleApps/blob/master/BlazorMultipleApps

Answer 2

You can ref to app.UseMulitSpa, I have Created a new Library WasmService for handle this

Use Steps: step 1: Set the blazor wasm app root place folder under wwwroot step 2: use app.UseMulitSpa to add blazor wasm app, you need define a public path,

During the run, Main host app will use standalone port for every blazor wasm app, and WasmService have a internal proxy for main host app call.