2

I'm running a basic create-react-app production build on App Engine, but I'm not able to access my pre-defined environment variables. Is there any extra step I'm missing? I'm guessing it has something to do with the build process and serving a production build, but I'm not sure where to set the variable in this case.

app.yaml: 

service: client-dev
runtime: nodejs10
env_variables:
  TEST: "development"

package.json:

"scripts": {
    "start": "serve -s build",
    "start-dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },


console.log(process.env.TEST) //undefined
ford04
  • 66,267
  • 20
  • 199
  • 171
guitard00d123
  • 347
  • 5
  • 14
  • I can not confirm if this is an issue happening on GAE or it just an issue on React side. I found this [post](https://stackoverflow.com/questions/44915758/node-process-env-variable-name-returning-undefined) with a similar issue and I also find this [post](https://stackoverflow.com/questions/57729098/how-to-access-process-env-on-google-app-engine-with-nodejs) on how to access process.env variables with GAE and Node.js. Nonetheless I will try to replicate the issue and see if there is any workaround or possible explanation. I hope it helps. – Christopher Rodriguez Conde Apr 14 '20 at 11:26

1 Answers1

1

According to CRA documentation, environmental variables are embedded during build time in a React app. They will not be available to static files during runtime.

In App Engine, contents of app.yaml are used during deployment which happens after React has finished building.

To make environmental variables available during build time, you can:

  1. include them in a .env file in the root of your project if you are manually triggering the build process via yarn build or npm run build.
  2. include them in a cloudbuild.yaml file for automatic builds using a continuous development platform like Cloud Build.

Note that the CRA documentation referenced above advises to begin every custom environment variable with REACT_APP_. For example your variable should be added like REACT_APP_TEST=development.

John Otu
  • 208
  • 2
  • 9