How to deploy ASP Core Web API VueJS site to IIS

Question

I am new to VueJS and SPAs in general. I have created a new ASP Core site with a WebAPI controller for data and a VueJS front end. I am now trying to deploy this site to IIS and I am not sure how to do it correctly. I created a new application in IIS with an application pool set to "no-managed-code" and set the physical location to the VueJS app /dist folder. The site is loading, but I'm getting 404's for all of my service calls. I assume this is because the root of the site is set to the VueJS app folder instead of the root of the ASP Core folder. How do I set this up correctly to serve my app from myServer/mySite and also have my service endpoints as myServer/mySite/api/myController/myAction?

Answer 1

Scenario: Your dotnet core app has the API endpoints and you want to host the client site SPA on the same site. API calls will go through to the dotnet app and any other request will serve the index.html of the SPA.

.NET core supports this scenario with the methods from Microsoft.AspNetCore.SpaServices namespace like UseSpa()

Also note that in .NET 5 these extensions are moving to separate package Microsoft.AspNetCore.SpaServices.Extensions. It is available now but not well documented.

Your build SPA should go in ClientApp/dist in this example

e.g.

using Microsoft.AspNetCore.SpaServices;

public class Startup
{
    // ...

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

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        // ...

        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc();

        // Must be near the end of the method because 
        // it will send any unhandled requests to index.html for SPA
        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                // Development requests are send through to local node server
                spa.UseProxyToSpaDevelopmentServer("http://localhost:8080/");
            }
        });
    }
}