reactjs - How to make ASP.NET/React app serve SPA from subpath?

Question

I have a stock aspnetcore and reactjs app, generated from the starter template (dotnet new react). I would like the SPA app to be served from a subpath off the root url; e.g. instead of the sample app being https://localhost:5001/counter I'm looking for it to instead be served from https://localhost:5001/myapp/counter.

I changed the Startup.cs from:

app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });

to this:

app.Map(new Microsoft.AspNetCore.Http.PathString("/myapp"), appMember =>
            {
                appMember.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";

                    if (env.IsDevelopment())
                    {
                        spa.UseReactDevelopmentServer(npmScript: "start");
                    }
                });
            });

This sort of works. If I browse to https://localhost:5001/myapp/ it appears to load the index.html, but the static files are attempting to load from the root path and not the subpath.

What needs to be changed so that the react app uses the subpath as the root? I'd like this to work both in the interactive VS dev environment and when deployed, likely on IIS. It seems like it's close but I'm missing something.

Sample demo of the solution is available here: https://github.com/petertirrell/mvc-spa-demo/tree/master/mvc-spa-demo

Thanks!

Answer 1

You can do so by having:

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build";
});

in your ConfigureServices and:

string spaPath = "/myapp";
if (env.IsDevelopment())
{
    app.MapWhen(y => y.Request.Path.StartsWithSegments(spaPath), client =>
    {
        client.UseSpa(spa => 
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        });
    });
}
else
{
    app.Map(new PathString(spaPath), client =>
    {
        client.UseSpaStaticFiles();
        client.UseSpa(spa => {});
    });
}

It should be noted that in development we use .MapWhen because .Map would cause your static files to be available at /myapp/myapp/[file] as opposed to /myapp/[file].