Search code examples
azurekestrel-http-serverangular-pwa

Serving Angular PWA from Azure Web App (Linux) fails on missing .webmanifest


There are number of questions about the same issue, but the solutions to those are specific to IIS: we are hosting in Azure Web App Linux instance and are using Kestrel (ASP.Net Core 3.1) as the web server.

After setting up Angular PWA and deploying a new release, the Angular client throws the following message;

manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.

Commonly this error is shown when the manifest.webmanifest cannot be loaded (the current version I am testing is the default file that was installed by Angular PWA so its content is unlikely to be the issue). Also, when in Chrome Developer tools I review the file, it will show the content of my index.html.

Following instructions for IIS, I tried to find out how to serve the file using Kestrel. Ben's answer suggests the following (I also tried application/json):

FileExtensionContentTypeProvider provider = new FileExtensionContentTypeProvider();
provider.Mappings[".webmanifest"] = "application/manifest+json";

app.UseStaticFiles(new StaticFileOptions()
{
    ContentTypeProvider = provider
});

How can we serve the Angular PWA from Azure Web Service (Linux)?


Solution

  • In the same thread as Ben's answer, there is an answer by Cezar Crintea which is ever so slightly different but I hadn't picked up on the difference.

    The correct configuration is to use UseSpaStaticFiles since the manifest is served from the Angular static folder and not the ASP.Net static folder.

    The configuration that is working for me:

    FileExtensionContentTypeProvider provider = new FileExtensionContentTypeProvider();
    provider.Mappings[".webmanifest"] = "application/json";
    
    app.UseSpaStaticFiles(new StaticFileOptions()
    {
        ContentTypeProvider = provider
    });
    

    I also noted a comment by Henric Rosvall:

    In .NET Core 5.0 it has been included in the default provider mappings, and trying to add it manually will cause exceptions since it's already there.