Generally for two purpose we prefer to use different environment in our application:
1. For security reasons: As JS being client side we can’t risk 🔴 putting our sensitive information in a constant file when we host our code in git or any other version control websites.
2. For Testing before deploying to production: As we never want to get bugs 🐛 in our production just after we push a new build. We prefer to test it on different environment with different setting and data which reduces the changes of getting new bugs 👌.
When we create our reactjs application using
npx create-react-app it automatically install packages that makes easy to setup different environment in the app.
To begin with,
create-react-app automatically installs
env package. However if you go and check it in
package.json then chances are you may not find it there. The reason of this is that
npx create-create-app hides some packages in order to provide abstraction. We’ll see later how we can tweak this.
Step 1: create different environment files in root of your project. example:
.env.production Note the (dot) 👈 before the file name.
Note: For now, only create environment file with name
.env.production . If you create file having name other than these two it won’t work. If you want to know how to create env files having names different to these scroll to end.
Step 2: Add your variables. There are few things which you need to take care before creating variable in any of the environment file.
Rule ☝️ : Append you variable with
REACT_APP_. Note the underscore after the
APP. Example: Suppose you have to create a variable with name
MEDIUM_KEYthen it should be name as
Why so ? We’ll see how to configure
REACT_APP_suffix once we are done with creating and using env files.
Rule 👬🏻: There should no space b/w
=variable name and the value. Example REACT_APP_MEDIUM_LINK=https://medium.com/@rahuulmiishra
Step 3: After adding variables in
.env files head to
package.json and locate
scripts key. Here we have to add our environment files which we have created in Step 2.
We can specify different
start and build scripts for different environment. Modify you code like a/c to your need.
npm run start-prod to run the app with production variables. Similarly for others you can change the command to run app for different environments.
Note: With every change in package.json or in .env files you have to restart the server so that new configuration can be loaded.
Step 4: Navigate to
scripts/start.js and comment this line
process.env.NODE_ENV = 'development';
Step 5: Navigate to
scripts/build.js and comment this line
process.env.NODE_ENV = 'production';
Now, we are done with our all configurations 😃 , let’s start consuming 🥘 the environment variables.
Step6: Create a JS file which will import environment variables from node environment and attach them to your react app. To do so I am creating a file called
environment.js and from this file I am exporting my environment variables.
Step 7: Head back to you component files where you want to use these environment variables and import them as normal constants.
How to configure REACT_APP_ prefix? 🤔
Navigate to you project root directory and run 🏃🏻♂️ command :
npm run eject . This will bring out all the packages and scripts out which
npx has hidden when it create your app. Note: You can’t ⚠️ revert this process so be sure if you want to do it.
Before getting into further steps you need to verify that in your
package.json you have
dotenv package is present. If not, install it using
npm i dotenv .Here is the
npm link of
config/env.js here search for
REACT_APP_ . You will be able to see following code
REACT_APP_ to whatever you want to be.
How to create
.envfiles other than
Solution 1: When you already ran
npm run eject
Step 1: Create
Step 2: Add your variables in it.
Step 3: Navigate to
package.json, find the
scripts key, under
scripts add info for your another environment, for my case it is
qa , so that we can have a runnable command for qa env just like bellow .
Step 4: run 🏃🏻♂️
npm run star-qa . you will get following warning message:
Either you press
n you will get some error. To over come this head to
package.json and find
browserslist key and just like
development add you browser config for the file name you have created for me its qa.
After adding browser config for your custom env run
npm run start, npm run start-prod based on your config given in
Solution 2: Using env-cmd package
Create you files with desired names like
.env.prod .env.qa etc
Once done, Navigate to package.json and modify the scripts value for example:
start-dev: “env-cmd -f .env.dev react-scripts start”
Start app by
npm run start-dev . You app will start picking info from
Find the final code here 👉🏻 Git
Thanks for reading. 😃