Come up with a possible solution. The expectation is that the build SPA will have the contents of its build directory copied into a folder in the wwwroot folder of the .NET Core project that uses the same name as the route the SPA will use. In this case we have two apps, guestuser
and payinguser
. The mapping in the Configure function will redirect the user request to pull the static files out of the appropriate wwwroot folder.
Startup.cs
public void ConfigureServices(IServiceCollection services){ ... services.AddSpaStaticFiles();}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env){... app.UseStaticFiles(new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")) }); app.Map("/guestuser", mappedSpa=> { mappedSpa.UseSpa(spa => { spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/guestuser")) }; spa.Options.SourcePath = "wwwroot/guestuser"; }); }); app.Map("/payinguser", mappedSpa=> { mappedSpa.UseSpa(spa => { spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/payinguser")) }; spa.Options.SourcePath = "wwwroot/payinguser"; }); });}
Within the ReactJS project you will want to update/add the homepage
property to the package.json
file for each project to also use the same name as the folder the site will be hosted in under the wwwroot folder. This will update the paths of the generated code to use the pathname in their file references.
{"name": "guest-user","homepage": "guestuser", ...}