Angular PWA in Azure Static Web Apps

Question

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.

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.

Answer 1

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

Answer 2

this worked for me: I tried to add a variable name in pipeline variable $deployment_token which is the deployment token in Azure static web app in Azure portal. Then I created a pipeline to use the angular code like this:

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

- task: AzureStaticWebApp@0
  inputs:
      app_location: "/" 
      Routes Location:"add the address of routes.json"
      app_build_command: "npm install -g @angular/cli&& npm install && ng build --prod"
       output_location: "dist"
   env:
       azure_static_web_apps_api_token: $(deployment_token)