Search code examples
reactjsasp.netazure

Environment Variable not Working in Azure Static Web apps with React

I have deployed my frontend react application to Azure Static web apps.

I have configured the environment variable in the Azure Environment variables section. However when I visit the website, The console returns 404 not found with /undefined/api/my api end point

Here is how i handle my api url in my code:

const apiUrl = process.env.REACT_APP_API_URL;

And in azure i did this:

Name: REACT_APP_API_URL
Value: My api url
Solution

  • According to the documentation here, these settings only apply to the backend API.

    enter image description here

    If you want to use environment variables in your frontend app, you will need to add those in your build configuration and then they will be bundled with your app.

    You would need to do something like:

    ...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
env: # Add environment variables here
  REACT_APP_API_URL: https://yourapi.com