Environment Variable not Working in Azure Static Web apps with React

Question

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

That needs to be set at build time and is baked into the static outputs (a problem for reasons I explain in blog.jonrshar.pe/2020/Sep/19/spa-config.html). — jonrsharpe
– jonrsharpe, Commented Oct 10, 2024 at 16:22
please share your code and github repo or yml file if possible — Sirra Sneha
– Sirra Sneha, Commented Oct 10, 2024 at 16:33

Gaurav Mantri · Accepted Answer · 2024-10-10 16:59:39Z

1

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

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

answered Oct 10, 2024 at 16:59

Gaurav Mantri

137k17 gold badges246 silver badges282 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Environment Variable not Working in Azure Static Web apps with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related