Reference the env var in code

Prefix the environmental variable name with process.env.

e.g. process.env.REACT_APP_API_URL

The react script will resolve the variable name according whichever environment is being used.

All custom var names must start with REACT_APP

e.g. REACT_APP_API_URL

They are also env vars provided by the create-react-app script which do not have to follow this rule as listed here: https://create-react-app.dev/docs/advanced-configuration/

Environments:

Local:

npm run start npm run build

File: .env.local

(.env.local will be chosen automatically. Please go to this site to see how .env files are chosen https://create-react-app.dev/docs/adding-custom-environment-variables/)

Test

npm test

There is only one set of test env vars.

File: .env.test

It's equivalant to .env.local but "npm test" does not use .env.local.

Fog

npm run build:fog

File: .env.fog

Omaha Non-prod

npm run build:omaha-non-prod

File: .env.omaha-non-prod

Omaha Prod

npm run build:omaha-prod

File: .env.omaha-prod

Create a build script for a custom environment

To do that, create a file named .env.myEnvironment Add a script command to package.json (build:myEnvironment)

For more info, please go to these sites:
https://create-react-app.dev/docs/adding-custom-environment-variables/ https://dev.to/jam3/managing-env-variables-for-provisional-builds-h37

Misc

Setting --env=jsdom in the command to run the test script

It allows access to window, localStorage, document in the test env. https://stackoverflow.com/questions/51953713/what-is-env-jsdom

CI -- env var of the create-react-app script

Used in CI/CD environments.
Described here: https://create-react-app.dev/docs/advanced-configuration/

Staticfile

In order to make routing of this client side app working correctly in cloud foundry, there's a file called "Staticfile" with the following content: "pushstate=enabled"

"Staticfile" has to be copied to build folder.

Otherwise, in PCF, the urls for the client side app will be sent to the nginx server and return a 404.