c# - What is the difference between UseStaticFiles, UseSpaStaticFiles, and UseSpa in ASP.NET Core 2.1?

Question

ASP.NET Core 2.1.1 offers several seemingly related extension methods for appBuilder:

• UseStaticFiles from Microsoft.AspNetCore.StaticFiles
• UseSpaStaticFiles from Microsoft.AspNetCore.SpaServices.Extensions
• UseSpa from Microsoft.AspNetCore.SpaServices.Extensions

Please help me make sense of their purpose and relation to each other?

Also, is there any difference from the server execution standpoint if I run these methods in a different order

e.g.

app.UseStaticFiles() -> app.UseSpaStaticFiles() -> app.UseSpa()

vs

app.UseSpa() -> app.UseSpaStaticFiles() -> app.UseStaticFiles()

Answer 1

Static files, such as HTML, CSS, images, and JavaScript, are assets an ASP.NET Core app serves directly to clients. Some configuration is required to enable serving of these files.

• UseStaticFiles - Serve files inside of web root (wwwroot folder)

• UseSpaStaticFiles - Serve static file like image, css, js in asset folder of angular app

• UseSpa - let asp.net core know which directory you want to run your angular app, what dist folder when running in production mode and which command to run angular app in dev mode

Example

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

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});