6

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

in-process hosting model

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";
            });
Improve this question
1
  • 1
    stackoverflow.com/questions/55988045/…. I think you could use app.usespa to combine your .net core application and angularspa application. Then you can deploy the application to IIS via web deployement tool. Another way is create a sub-application inside your IIS side. Then rewrite any request to api/blah to alias/api/blah Commented May 29, 2020 at 3:31

1 Answer 1

Reset to default
9

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. project directory
  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");
     }
    });
}
  1. 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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

how to publish it?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.