Make NPM Install with Legacy Peer Deps in Azure Static Web Apps Builds

Problem

After upgrading a JS library, GitHub Action for build and deploy Azure Static Web Apps blows up sky high. According to the error message. npm install command need to run with --legacy-peer-deps. However, there is no step of npm install in Azure Static Web Apps's yml file. How can we tell npm to use legacy peer deps?

Solution

Although there is no way to change the npm step details for Oryx build engine, there is actually an environment variable to control npm install behaviour.

Set NPM_CONFIG_LEGACY_PEER_DEPS to true has the same effect with npm install --legacy-peer-deps

To set environment variables in yml, we can use env: keyword. In this case, it will be

env:
  NPM_CONFIG_LEGACY_PEER_DEPS: true

The full build and deploy job will now look like this

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_OCEAN_0AFDF4600 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/src/Admin/elf-admin" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist/elf-admin" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          NPM_CONFIG_LEGACY_PEER_DEPS: true

Now, we can have a happy build!

Reference: https://github.com/Azure/static-web-apps/issues/989

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License