Azure Static Web Apps Environment Variable Not Working

[Temesgenzewude]

Describe the bug

I'm deploying a React app with Azure Static Web Apps and have configured environment variables in the Azure Portal under Configuration > Environment variables. However, these variables are not being injected into the app during deployment.

In the deployed app:

Logging process.env shows that the expected environment variables are undefined.
When referencing these variables directly in index.html for testing, they remain as placeholders (e.g., %VARIABLE_NAME%) instead of being replaced with their actual values, suggesting they aren’t injected during the build.
The environment variables work correctly when I use a .env file locally, so this issue appears specific to the Azure Static Web Apps deployment.

Troubleshooting Steps Taken:

• Verified that the environment variables are correctly set in the Azure Static Web Apps settings.

• Ensured that variables have the required prefixes, as per Create React App requirements.

• Triggered redeployments to rule out potential caching issues.

• Confirmed that the environment variables are accessible locally with .env.

Additional Details:

• App Location: Root directory (/)
• Output Location: build
• Deployment Method: GitHub Actions

To Reproduce
Steps to reproduce the behavior:

1. Set up a React application deployed through Azure Static Web Apps.
2. Add the environment variable REACT_APP_API_URL in the Azure Static Web App settings under Configuration > Environment variables.
3. Deploy the application through GitHub Actions as per the default workflow setup by Azure.
4. Log process.env.REACT_APP_API_URL in the application code (or %REACT_APP_API_URL% in index.html for testing) to check the value of the environment variable.

Expected behavior
The environment variable REACT_APP_API_URL should be accessible in my React application as process.env.REACT_APP_API_URL, displaying the value set in the Azure Portal configuration.

Device info (if applicable):

• OS: [e.g. Mac OS]
• Browser [e.g. chrome]

[Temesgenzewude]

@juliamuiruri4

[juliamuiruri4]

CC @BandaruDheeraj

[ibonetti]

It's not working for me either, but looking at the docs, seems that it's not supposed to work like this.

[wasifsyed-driverup]

I’ve been struggling to access environmental variables in my app for the past two days, with no success. After some investigation, I realized that the secrets I was looking at weren’t Azure environment variables but GitHub secrets.

This raises the question: what’s the point of having environment variables in Azure if we can’t access them as easily as we can Azure App Service settings for different application environments?

my yaml file
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@v3
with:
submodules: true
lfs: false

  - name: Build And Deploy
    id: builddeploy
    uses: Azure/static-web-apps-deploy@v1
    with:
      production_branch: "main"
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RED_MUD_0AD768903 }}
      repo_token: ${{ secrets.GITHUB_TOKEN }}
      action: "upload"
      app_location: "/"
      api_location: ""
      output_location: "dist"
    env:
      VITE_API_URL: ${{ secrets.VITE_API_URL }}
      VITE_AZURE_API_KEY: ${{ secrets.VITE_AZURE_API_KEY }}
      VITE_WS_URL: ${{ secrets.VITE_WS_URL }}

I had to save these secrets in GitHub action secrets