What is an environment file ?

environment file or just env is a file holds variables and some sensitive data about your app

Why we need env files in our app?

1- according to create react app documentation

WARNING: Do not store any secrets (such as private API keys) in your React app!

avoid storing any sensitive data in your js files, instead use env files to store them

sensitive data mean any data you shouldn't share with any one such as api keys, secret-ids, firebase config keys,etc....

2- To declare different variables for each environment

variables such as API url’s,
env files allow defining the values depending on the environment

How to setup env files inside react app ?

so, how can we define the values depending on the environment

Note: this feature is available with react-scripts@0.2.3 and higher.

1- install env-cmd package from npm

2- make a file called .env.envName in your project root
sush as .env.staging, .env.production, ... to differentiate between variables in each environment

3- inside the env file add your variables in key/value representation with prefix of REACT_APP
EX:
REACT_APP_BASE_URL = "https://....."

your file should look like this after adding your variables

REACT_APP_API_KEY = "****"
REACT_APP_AUTHDOMAIN =  "****"
REACT_APP_BASEURL = "****"
REACT_APP_PROJECT_ID = "****"
REACT_APP_STORAGEBUCKET = "****"

make a file with the previous 3 steps for each environment and each file with its environment values

4- inside your package.json
change the scripts builds ,..

"scripts": {
    "start": "env-cmd -f .env.staging react-scripts start",
    "build:staging": "env-cmd -f .env.staging react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

• -f flag is for custom env file paths as the default is in the project root otherwise you should specify the actual path

"start": "env-cmd -f ../../.env.staging react-scripts start",

• your build command in each environment is not npm run build any more its npm run build:staging , npm run build:production

How to read variables values in js files ?

to use a value of a particular variable located in env file inside a js file all u need to do is to use the global process.env.variableName
Ex:

console.log(process.env.REACT_APP_API_KEY)

Important Notes
1- Dont forget to add your all env files to git-ignore file to prevent tracking them after any modification
2- After each time u modify in env file stop the project serve and start it over again, otherwise its wont listen to your new changes
3- stick to your company/team for env files naming convention
as not all deployments processes accepts the .env.envName convention
for example vercel doesn't accept '.' in the env file name at all

References

1- https://medium.com/swlh/keeping-env-variables-private-in-react-app-fa44a9b33c31

2- https://create-react-app.dev/docs/adding-custom-environment-variables/