Quantcast
Channel: How to host multiple React SPA apps on a single ASP.NET Core site? - Stack Overflow
Viewing all articles
Browse latest Browse all 4

Answer by cminus for How to host multiple React SPA apps on a single ASP.NET Core site?

$
0
0

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",  ...}

Viewing all articles
Browse latest Browse all 4

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>