I’m used to deploying a Single-Page App (SPA) like React in its own container but for simple front ends whose back ends are 100% ASP.NET Core, there is a package Microsoft.AspNetCore.SpaServices.Extensions.

This package allows you to place the build artifacts of your SPA in your ASP.NET Core project. You can then run the ASP.NET Core app with controllers and routes, along with the SPA with its own routes. This is accomplished by reserving routes for both apps.

Configuration requires the following in your startup:

• Root Path (spaRoot) - Relative to the project root, where your SPA files will live in your ASP.NET Core project
• Paths to reserve (pathsToReserve) - URI paths to reserve so controller routes and SPA routes don’t collide
• Source Path (sourcePath) - The spaRoot, but relative to .NET binary files (Path.Combine(builder.Environment.ContentRootPath, spaRoot))

Setting the SPA root path

You need to tell ASP.NET Core where the SPA static files are. In my case, they were in var spaRoot = "wwwroot":

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSpaStaticFiles(configuration => { configuration.RootPath = spaRoot; });

var app = builder.Build();
app.UseStaticFiles();
app.UseSpaStaticFiles();

How to reserve routes for the SPA

The important part here is to use app.MapWhen to tell ASP.NET Core to fall back to the SPA if any of the reserved paths are being requested. The SPA is then served when visiting any URI of a reserved path.

// The important part: prevent ASP.NET Core controller and SPA route collisions
var reservedPaths = pathsToReserve.Select(x => $"/{x}") // Reserve endpoints for SPA
    .Append("/"); // Reserve the root
app.MapWhen(context => reservedPaths.Any(x => context.Request.Path == x),
    applicationBuilder =>
    {
        applicationBuilder.UseSpa(spaBuilder => { spaBuilder.Options.SourcePath = sourcePath; });
    });

How to reserve routes for ASP.NET Core

After reserving the routes for the SPA, you can then reserve them for ASP.NET Core. In my case React provided the front end and ASP.NET Core was the backing API. So to make things less complicated, I decided all ASP.NET Core routes would be prefixed with /api and eliminated all possibilities of collisions.

    app.Map("/api", builder =>
    {
        builder.UseEndpoints(x => x.MapControllers());
    });

I then simply decorated each controller with:

[Route("api/[controller]")]