ASP.NET Core MVC routing with Blazor and React apps in sub folders

Question

I have a new ASP.NET Core 8 site. The solution has two projects, a blazor wasm app and the MVC site.

In the MVC site the folder structure is:

 - wwwroot
    - ...
 - Pages
    - Blazor
       - index.cshtml
    - React
       - build
       - ... rest of react app files
    - Shared
        - ...

The Blazor folder simple references the Blazor App component, which loads the Blazor app fine. F5 the page and it will load the Blazor app as well.

The react folder has the current React app (which will be slowly ported across to Blazor). It is built with npm run build. When you click a link to load that page it will start the react app, but if you F5 that URL, it will load the Blazor app.

I am trying to figure out what I need to do to enable routing to be able to load Blazor in mysite.com/blazor and react in mysite.com/app

My program.cs is:

using Microsoft.Extensions.FileProviders;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}
else
{
    app.UseWebAssemblyDebugging();
}

//this seems to be required to get blazor pdb's downloading.
app.UseBlazorFrameworkFiles();

app.MapFallbackToFile("index.html");

app.UseHttpsRedirection();
app.UseStaticFiles();

//this seems to break react loading at all
// app.MapWhen(x => x.Request.Path.StartsWithSegments("/app", StringComparison.OrdinalIgnoreCase), a =>
// {
//     a.UseRouting();
//     a.UseEndpoints(endpoint =>
//     {
//         endpoint.MapFallbackToFile(Path.Combine(Directory.GetCurrentDirectory(), @"Pages\React\Build\index.html"));
//     });
// });

//this doesn't seem to work
// app.MapWhen(x => x.Request.Path.StartsWithSegments("/blazor", StringComparison.OrdinalIgnoreCase), a =>
// {
//     a.UseBlazorFrameworkFiles();
// });

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"Pages\React\Build\")),
    RequestPath = new PathString("/app")
});

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"Pages\React\Build\static")),
    RequestPath = new PathString("/static")
});

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Answer 1

You could try follow this document :

app.MapWhen(ctx =>......, first =>
{
    

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

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