Azure Static Web Apps. For bugs and feature requests, please create an issue in this repo. For community discussions, latest updates, kindly refer to the Discussions Tab. To know what's new in Static Web Apps, visit https://aka.ms/swa/ThisMonth
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:
Set up a React application deployed through Azure Static Web Apps.
Add the environment variable REACT_APP_API_URL in the Azure Static Web App settings under Configuration > Environment variables.
Deploy the application through GitHub Actions as per the default workflow setup by Azure.
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.
Temesgenzewude
commented
2 hours ago
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:
To Reproduce Steps to reproduce the behavior:
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):