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/
Top comments (9)
Nice write up! I believe creating an
.envfile and adding keys likeREACT_APP_API_KEY=XXXshould do the trick.May I know why would we need to install
env-cmdpackage that you are referring to?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
This does not change anything, private key is still in bundled js files. There is no right solution I know
Hello Lyrod,
plz make sure that
1- you did add the env files in git-ignore file
2- re-start your project serve
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.
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
Everything worked just fine. as you said above "2- make a file called .env.envName in your project root". I think it should only .env in development environment. Rest all instructions are working fine you just need to restart your development server after all the setup. Thanks
Thank you for this explain
How did the package json will decide which env to use ?
If I run npm run build then what will happened?
Or I have to run npm run build production and npm run build staging seprately