Search code examples
angularprogressive-web-appsazure-static-web-app

Angular PWA in Azure Static Web Apps

Does anyone have experience hosting Angular PWA apps in new Azure resource, Static Web Apps?

I tried to modified routes.json file:

{
    "routes": [
        {
            "route": "/*",
            "serve": "/index.html",
            "statusCode": 200
        }
    ],
    "mimeTypes": {
        "json": "application/json",
        "webmanifest": "application/json"
    }
}

but without success.

enter image description here

When I deploy the same app to Azure Web App with web.config

<staticContent>
  <mimeMap fileExtension="webmanifest" mimeType="application/json" />  
  <mimeMap fileExtension="json" mimeType="application/json" />           
</staticContent>

PWA is installable.

Demo project is there.

Thanks.

Solution

  • When we configure any app to Azure static Web app it uses npm run build as default command for building an application. Now in the case of Angular application, it uses the same command which internally runs ng build. But the issue here is that its not run in prod mode. So we can configure the custom build command by adding app_build_command in workflow file and use npm run build -- --prod as its value.

    app_build_command: "npm run build -- --prod"

    Here are some useful links:

    https://learn.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow#custom-build-commands