Environment files in  React.js  app 
Tags: react, docker, javascript, node
Published: 2021-02-12 19:34:24

# 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](https://create-react-app.dev/docs/adding-custom-environment-variables/)

> 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](https://www.npmjs.com/package/env-cmd) 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/