DEV Community

loading...
Cover image for Environment files in  React.js  app

Environment files in React.js app

samirasaad profile image samira saad Updated on ・2 min read

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 = "****"
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode
  • -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",
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode

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/

Discussion (6)

pic
Editor guide
Collapse
chilupa profile image
Pavan Chilukuri • Edited

Nice write up! I believe creating an .env file and adding keys like REACT_APP_API_KEY=XXX should do the trick.
May I know why would we need to install env-cmd package that you are referring to?

Collapse
samirasaad profile image
samira saad Author

Hello pavan,

we need cmd-env to tell the script which env file it should read from
For example:

our start should read from stage file as mentioned in the article but if we need to develop with the variables of the production locally you will make your start script read from the production env file

which is can't be done without cmd-env or similar package

Collapse
lyrod profile image
Lyrod

This does not change anything, private key is still in bundled js files. There is no right solution I know

Collapse
samirasaad profile image
samira saad Author • Edited

Hello Lyrod,

plz make sure that
1- you did add the env files in git-ignore file
2- re-start your project serve

Collapse
lyrod profile image
Lyrod

Hey! I fully understand. But this is what the article means.

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

The example use "API_KEY" env variable. But even env variable value will be use instead of process.env when your files are bundled.

console.log(process.env.MY_PRIVATE_ENV) will become console.log("the value of the variable at compile time") in the js file. Nothing change, private are still in your bundled files. You still "share" the api key.

Thread Thread
samirasaad profile image
samira saad Author

Hey Lyrod, I understand u.
env files don't fully isolate the private keys from the code

its job to reduce the percentage of reaching the private keys from your github code
but not fully private as u mentioned
i think we need some package to encrypt them or use them from the server in some how
if u found any way can do it plz share it with me
thank u so much for making it clear for me