Azure Static Web App - Build Production

For a side-project I am using Azure Static Web Apps (SWA). They are intended to simplify the deployment and management of serverless applications, ensuring that the frontend and backend is managed by Azure.
While the quickstarts and tutorials are all well-made, there was one area that caught us by surprise.

How to build a production Angular App

After creating an SWA in the Azure Portal you get access to the GitHub Actions build configuration. Here’s the part of ours that is of interest to SWA:

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: $
    repo_token: $
    action: "upload"
    # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
    app_location: "frontend"
    api_location: "" # we're not using this as we're hosting the backend ourselves on Azure Functions.
    output_location: "dist/application" # Built app content directory

This all works, until we integrated Auth0 into our app and needed our frontend to have very different configuration depending on the environment (local or prod, for simplicity’s sake).
In an Angular app, by default, environments are managed via files in the src/environments directory. When you create your Angular app you’ll find an environment.ts and an environment.prod.ts in there. Once you added all your environment variables there the ng build will pick these up automatically.
We assumed that, and maybe this was a stupid assumption to begin with, the pipeline will automatically build environment.prod.ts. It did not.

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: $
    repo_token: $
    action: "upload"
    # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
    app_location: "frontend"
    app_build_command: "npm run build-prod"
    api_location: "" # # we're not using this as we're hosting the backend ourselves on Azure Functions.
    output_location: "dist/application" # Built app content directory

The app_build_command was important here. It tells us to go and add an “npm script” and reference it in this command.

You cannot add ng build --configuration=production directly in here.

Instead, in your src/package.json file, find the scripts block and add the command in there like so:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build-prod": "ng build --configuration production",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

This will add the npm script and allows us to reference it in the build pipeline. Et voila, our production app can now use production values.