How to pass custom environment variables to SWA Build

[pcanas]

I would like to pass a custom environment variable to be by my React-based PWA. So far, this is how the app looks:

I followed this tutorial and try to add CUSTOM_ENV and PPP in 2 different ways:

• CUSTOM_ENV was added as an environment variable from the Azure Portal:

  

• PPP was added from my Github Action:

      - 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_RED_SMOKE_0B4D0EC03 }}
          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: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
        env: # Add environment variables here
          PPP: ppp

None of the methods work, as you can see from the following screenshot, process.env does not contain neither variable:

Am I missing anything? How can I pass custom environment variables?

[phranger]

+1

[nilokillian]

+1

[mansourmahboubi]

+1

[DavidDeSloovere]

I'm wondering if there is a difference with backend and frontend. Banckend runs in an Azure Function afaik. Maybe only backend knows about the ENV variables? Just guessing here.

Edit: passing env via the Azure/static-web-apps-deploy@v1 task did work for my Nuxt app. took me a long time to get it working though.

[DavidDeSloovere]

Things like React, Vite, Nuxt etc need the env variables at build time. So you need to specify it in the GH account, and not the Azure portal.

Maybe the fix for the OP @pcanas is that react needs to REACT_prefix? This is the case for Vite (VITE_) and Nuxt (NUXT_).

        env: # Add environment variables here
          REACT_PPP: ppp

So it's not a bug. But more documentation or guidance that is lacking.