Azure / Azure/static-web-apps

Azure Static Web Apps Environment Variable Not Working

Open
#1,579 4 comments 3 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
346
Forks
67
PR merge metrics
No merged PRs in 30d

Description

**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:

- [x] Verified that the environment variables are correctly set in the Azure Static Web Apps settings.

- [x] Ensured that variables have the required prefixes, as per Create React App requirements.

- [x] Triggered redeployments to rule out potential caching issues.

- [x] 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]

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.