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

Answer 1

1. UseStaticFiles serves files from wwwroot but it can be changed.
2. UseSpaStaticFiles does a similar thing but it requires ISpaStaticFileProvider to be registered. If app.ApplicationServices.GetService<ISpaStaticFileProvider>() returns null, then you will get an exception.

throw new InvalidOperationException($"To use {nameof(UseSpaStaticFiles)}, you must " +
                    $"first register an {nameof(ISpaStaticFileProvider)} in the service provider, typically " +
                    $"by calling services.{nameof(AddSpaStaticFiles)}.");

So you need to call app.AddSpaStaticFiles() to register default ISpaStaticFileProvider

3. UseSpa does two things. Rewrites all requests to the default page and tries to configure static files serving. On the contrary to UseSpaStaticFiles it does not throw an exception but just falls back to wwwroot folder.

Actually UseSpaStaticFiles and UseSpa both internally call the same method UseSpaStaticFilesInternal but with a different value for the 3rd parameter which is allowFallbackOnServingWebRootFiles. That is the reason why UseSpaStaticFiles throws an exception if no ISpaStaticFileProvider was registered it simply does not allow to fall back to wwwroot.

BTW if UseSpa falls back to wwwroot internally it calls old good app.UseStaticFiles(staticFileOptions);

Links to github sources: 1. SpaDefaultMiddleware 2. SpaStaticFilesExtensions

Answer 2

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");
    }
});