How to handle multiple SPA application in ASP.NET Core

Question

I have an ASP.NET Core Web API application, I want to serve two Angular apps, one for admin and one for users.

In production, I don't use angular CLI tools so there is only some static files of two angular web applications.

Admin files are in /angular/admin and user files are in /angular/user. So, how can I serve them?

I tried multiple calls to IServiceCollection.AddSpaStaticFiles but they override each other. [From source repository I found this is Singleton services]

Answer 1

You have to branch the application middleware pipeline into two and register the SPAs after setting up MVC

 ...
 app.UseMvc(...)

 app.Map("/admin",
   adminApp =>
   {
     adminApp.UseSpa(spa =>
     {
       spa.Options.SourcePath = "angular/admin";
       spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
       {
           FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "angular", "admin"))
       };

       if (env.IsDevelopment())
         spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
      });
    });

  app.Map("/user",
    userApp =>
    {
      userApp.UseSpa(spa =>
      {
        spa.Options.SourcePath = "angular/user";
        spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "angular", "user"))
        };

        if (env.IsDevelopment())
          spa.UseProxyToSpaDevelopmentServer("http://localhost:4201");
      });
  });  

                ```

Answer 2

another tip: I'm using react and the react-router cannot handle path in URL correctly. So I use a different port for different spa. Use "app.MapWhen(o => o.Request.Host == 6000, ...)" to handle this case.

In production, should be something like : MapWhen(o => o.Request.Host.Host == "a.com"...