2

Like the title says, I have a static create-react-app that I'm deploying to Azure Static Apps with Azure DevOps. The problem is that absolutely none of the .env variables appear to be available on the frontend.

To be specific, I have an API key named REACT_APP_MAP_API_KEY that I'm injecting using Pipelines on Azure Devops. I've confirmed that the key is loaded in from the variable group properly by logging it. This is my deployment pipeline YAML file:

trigger:
- main

pool:
  vmImage: ubuntu-latest

variables:
- group: api-key-group

steps:
  - task: CmdLine@2
    inputs:
      script: 'echo $(REACT_APP_MAP_API_KEY)'
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: 'api'
      output_location: ''
    env:
      azure_static_web_apps_api_token: $(deployment_token)
      REACT_APP_MAP_API_KEY: $(REACT_APP_MAP_API_KEY)

The key is echo'd when the pipeline runs. However, when I try to console.log the variable on the frontend using console.log(process.env.REACT_APP_MAP_API_KEY) I simply get undefined.

To the best of my knowledge, this is exactly how you're supposed to load an .env variable into a static app frontend on Azure, but it just appears to be flat out not working. Is this a bug on Azure's side?

yoursweater
  • 1,883
  • 3
  • 19
  • 41
  • How could it? That code is running in your users' browsers, if they could access server environment variables that would be a major problem. Those env vars need to be set at _build_ time (which isn't ideal for reasons I go into [on my blog](https://blog.jonrshar.pe/2020/Sep/19/spa-config.html)). – jonrsharpe May 21 '21 at 19:37
  • 1
    To answer your question, that's exactly what Pipeline is supposed to do. It takes the secrets and injects them at build time. If I was unclear on this point, Pipeline looks at that YAML, loads in the variables, and then essentially runs `npm run build` before shipping it off to the static app hosting. Your comment doesn't make much sense in light of this. – yoursweater May 21 '21 at 19:39
  • Ah, I see. Do you see any logs from that build process happening? Do the variables get injected correctly when you build _outside_ that environment? – jonrsharpe May 21 '21 at 19:43
  • Yes - if I `npm run build` and serve it that works correctly. As far as logging goes, I wasn't logging anything during the `npm run build` but I suppose I theoretically could by adding that to my `react-scripts build` command in the package.json. I suppose if I could try logging it there... it's an interesting suggestion – yoursweater May 21 '21 at 19:48
  • Does this answer your question? [Azure Static Web App NodeJS env variables](https://stackoverflow.com/questions/67307614/azure-static-web-app-nodejs-env-variables) – jonrsharpe May 21 '21 at 19:53
  • 2
    Seems this is a [known issue](https://github.com/Azure/static-web-apps/issues/392) with a [workaround](https://gist.github.com/bhagavan44/ed11fb5199667fd0d4aeddf346a3a870) – jonrsharpe May 21 '21 at 19:58
  • 2
    Looks like you're right - I did a ton of googling and searching but didn't see that answer with the workaround. Trying it out now and will confirm if it works. Nice detective work. – yoursweater May 21 '21 at 20:03

1 Answers1

1

Credit goes out to @jonrsharpe for finding this thread which links to this workaround which I confirmed does indeed work. For the record, it's pretty sad that Microsoft hasn't fixed this issue considering it affects one of their most popular cloud features (Azure Static Apps) for the most popular frontend framework (React).

The workaround does its thing apparently by splitting the deployment into two steps 1) doing the actual build manually (Bash@3), where the environment variables seem to work, then 2) running the preconfigured deploy task (AzureStaticWebApp@0) whose "build" step doesn't do anything at all and then takes the existing /build folder and deploys it. If this were working correctly, any env variables declared under AzureStaticWebApp@0 would be properly included in build process.

yoursweater
  • 1,883
  • 3
  • 19
  • 41
  • Could you please answer this question as I’m facing a similar issue - https://stackoverflow.com/questions/75829078/azure-static-web-app-nodejs-env-variables-in-env-during-build-release – user989988 Mar 24 '23 at 16:25