How to deploy Angular SPA with ASP.NET Core 3.1 API on IIS?

Question

Should be simple scenario I imagine; have

1. Angluar 8 SPA
2. ASP .NET Core 3.1 Web API

Want to deploy on Windows Server with IIS have read through: Host ASP.NET Core on Windows with IIS

Want to with reccomended default In-process hosting model

But how to combine the Angular SPA and .net core web api? I can get the web api running fine under a new site in IIS serving files from publish output but where to put my SPA?

• Mix Angular build in with the publish output?
• Create sub application for Web API but IIS then adds an alias so my routes like api/blah become alias/api/blah
• Use the other hostinmodel and proxy to Kestrel server running on different port?
• Some wwwroot dir to redirect to so navigating to website serves SPA from there?

I see if using the Angular template to create solution it creates a ClientApps/dist dir, maybe could recreate the project with that template then dump the Angular build in that dir on deploy (since Angular project developed in separate repo).

            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });

Answer 1

Seeing this question is already a month old. Hopefully you have found a solution. @JokiesDing comment is pretty much on point.

My approach with development and deployment is to have the SPA application inside the Web API project and utilize Microsoft.AspNetCore.SpaServices.Extensions. Here are the steps:

1. Create an Angular Application and put it inside your application directory. For example, I usually create an ClientApp Folder inside the project and place my angular app inside.
2. Install Microsoft.AspNetCore.SpaServices.Extensions from Nuget
3. Go to your Startup.cs and add the extension methods

public void ConfigureServices(IServiceCollection services)
{
   //... whatever you have in your ConfigureServices method...

   //add this
   services.AddSpaStaticFiles(configuration =>
   {
      configuration.RootPath = "ClientApp/dist";
   });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    //... whatever you have in your configure method...

    //add this
    app.UseStaticFiles();
    if (!env.IsDevelopment())
    {
       app.UseSpaStaticFiles();
    }


   app.UseSpa(spa =>
   {
     // To learn more about options for serving an Angular SPA
     // see https://go.microsoft.com/fwlink/?linkid=864501
     spa.Options.SourcePath = "ClientApp";
     if (env.IsDevelopment())
     {
         spa.UseAngularCliServer(npmScript: "start");
     }
    });
}

5. Bonus! if you don't want to run npm run start everytime you build, you can point the webapi to the SPA dev server.

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

For Reference see this starter template https://github.com/jasontaylordev/CleanArchitecture