React Static Web App not utilizing env values from Github Secrets or Azure Config

Question

React Static Web App not utilizing env values from Github Secrets or Azure Config

Jaiden 0

Hello,

I've been working all day to figure out why our app does not load in crucial environment variables. I have them assigned via our GitHub secrets for values such as REACT_APP_ ... etc etc.

We have four:

REACT_APP_API_URL

REACT_APP_SIGNALR_URL

REACT_APP_STRIPE_PUBLISHABLE_KEY

REACT_APP_GOOGLE_MAPS_API_KEY

I have triple checked both GitHub secrets and Azures Config as I know that React requires them during the npm build so we have them passed with our workflow. Still, the site is live and it's like they don't exist.

index.tsx:31 ``Google Maps JavaScript API error: ApiProjectMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-project-map-error

util.js:39 ``Google Maps JavaScript API warning: NoApiKeys

^^^ this being an example of what shows when I visit. Any ideas if there is something wrong on the Azure deployment side?
Lastly, I do want to include that I have in fact also went through our codebase and standardized each call for the variables, there are no issues there and it does in fact build and deploy as intended locally.

Bhargavi Naragani 5,270 Reputation points Microsoft External Staff Moderator

2025-06-26T10:16:30.79+00:00
Hi @Jaiden,
React is a static front-end app, meaning that all environment variables must be available at build time. If environment variables are not injected before or during the build step in your GitHub Actions workflow, the resulting built JavaScript will not contain them.

GitHub Secrets need to be explicitly passed into the build process.

Azure Static Web Apps’ App Settings (Configuration blade) are not used for React front-end apps, they are only used for serverless APIs (like Azure Functions).

You’ll want to ensure that GitHub secrets are:

Properly defined in your repo’s Settings > Secrets and variables > Actions.

Correctly injected into the GitHub Actions workflow file during the npm run build step.

Here’s how to do it:

Sample GitHub Actions Fix:

Make sure your azure-static-web-apps.yml includes something like:

env: REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }} REACT_APP_SIGNALR_URL: ${{ secrets.REACT_APP_SIGNALR_URL }} REACT_APP_STRIPE_PUBLISHABLE_KEY: ${{ secrets.REACT_APP_STRIPE_PUBLISHABLE_KEY }} REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_APP_GOOGLE_MAPS_API_KEY }} # Example build section - name: Build React App run: | npm install npm run build

This ensures the environment variables are available at build time, which is when React embeds them into the final HTML/JS.

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#application-settings
https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow#build-and-deploy
https://create-react-app.dev/docs/adding-custom-environment-variables/

Hope this helps, if you have any further concerns or queries, please feel free to reach out to us.

Jaiden 0

Hey @Bhargavi Naragani ,
I already have my workflow assigning these variables during our build. I'll include our workflow file below:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

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
    permissions:
       id-token: write
       contents: read
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Install OIDC Client from Core Package
        run: npm install @actions/core@1.6.0 @actions/http-client
      - name: Get Id Token
        uses: actions/github-script@v6
        id: idtoken
        with:
           script: |
               const coredemo = require('@actions/core')
               return await coredemo.getIDToken()
           result-encoding: string
      - name: Install and Build
        shell: bash
        run: |
          cd frontend
          npm install
          npm install react-scripts --save
          npm install @sentry/cli --save-dev
          npm run build:sentry
        env:
          CI: false
          REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
          REACT_APP_SIGNALR_URL: ${{ secrets.REACT_APP_SIGNALR_URL }}
          REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_APP_GOOGLE_MAPS_API_KEY }}
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_SECRET }}
          REACT_APP_STRIPE_PUBLISHABLE_KEY: ${{ secrets.REACT_APP_STRIPE_PUBLISHABLE_KEY }}
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_ISLAND_0CE46580F }}
          action: "upload"
          app_location: "./frontend"
          api_location: "" 
          output_location: "build"
          github_id_token: ${{ steps.idtoken.outputs.result }}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          action: "close"

Bhargavi Naragani 5,270 Reputation points Microsoft External Staff Moderator

2025-06-27T07:59:40.26+00:00
Hi @Jaiden,

From what you've posted, it looks like you're already doing most of the right things, especially passing the environment variables during the npm run build:sentry step. Since the build is working locally and the workflow correctly injects secrets, but the live app still fails to pick up critical values (like the Google Maps key), I suspect one of the following is happening:

1.Your script runs:

npm run build:sentry

If build:sentry calls another internal script or wrapper (like using cross-env, webpack custom config, etc.), it’s possible that it doesn't inherit the env vars from the shell, or overrides them. Double-check that build:sentry is internally using process.env.REACT_APP_* and not relying on another env file (like .env.production) that might be missing in GitHub or Azure.

2.React only embeds variables starting with REACT_APP_ at build time, and it does not pull values from the system environment directly at runtime. So even if the secrets are there, if they aren’t being injected during npm run build:sentry specifically, they won't end up in the final JS.

You can test this by logging inside a React component:

console.log("Map API Key:", process.env.REACT_APP_GOOGLE_MAPS_API_KEY);

If it prints undefined on the deployed site, the value never made it into the bundle.

3.From the error: Google Maps JavaScript API error: ApiProjectMapError

This can also happen if:

The key exists but is restricted by referrer or bound to the wrong Google Cloud project.

The key is malformed due to string escaping or an extra newline from the GitHub Secret.

Try validating the key directly using the Google Maps API Key Tester.

You can try:

Inline Logging for Debugging Temporarily log your envs in the React app:

console.log("API URL:", process.env.REACT_APP_API_URL);

Simplify and Isolate Build for Testing Try swapping npm run build:sentry temporarily with plain npm run build and see if that version works. This helps isolate whether your custom build command is affecting the env injection.

Clean Rebuild Sometimes old builds can be cached. Add this before your build step:

rm -rf build node_modules .next dist

Double-Check Google API Key Configuration Make sure the key:

Has the correct referrer allowed (like https://<your-site>.azurestaticapps.net/*)

Is enabled for Maps JavaScript API

https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow#build-and-deploy
https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#application-settings
https://developers.google.com/maps/documentation/javascript/error-messages#api-project-map-error

Your answer

Bhargavi Naragani 5,270 Reputation points Microsoft External Staff Moderator

2025-06-26T10:16:30.79+00:00

Hi @Jaiden,
React is a static front-end app, meaning that all environment variables must be available at build time. If environment variables are not injected before or during the build step in your GitHub Actions workflow, the resulting built JavaScript will not contain them.

GitHub Secrets need to be explicitly passed into the build process.

Azure Static Web Apps’ App Settings (Configuration blade) are not used for React front-end apps, they are only used for serverless APIs (like Azure Functions).

You’ll want to ensure that GitHub secrets are:

Properly defined in your repo’s Settings > Secrets and variables > Actions.

Correctly injected into the GitHub Actions workflow file during the npm run build step.

Here’s how to do it:

Sample GitHub Actions Fix:

Make sure your azure-static-web-apps.yml includes something like:

env: REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }} REACT_APP_SIGNALR_URL: ${{ secrets.REACT_APP_SIGNALR_URL }} REACT_APP_STRIPE_PUBLISHABLE_KEY: ${{ secrets.REACT_APP_STRIPE_PUBLISHABLE_KEY }} REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_APP_GOOGLE_MAPS_API_KEY }} # Example build section - name: Build React App run: | npm install npm run build

This ensures the environment variables are available at build time, which is when React embeds them into the final HTML/JS.

https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#application-settings
https://learn.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow#build-and-deploy
https://create-react-app.dev/docs/adding-custom-environment-variables/

Hope this helps, if you have any further concerns or queries, please feel free to reach out to us.

Share via

React Static Web App not utilizing env values from Github Secrets or Azure Config

Your answer