Setting up different environment files (prod, dev, qa etc.)in react app

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.development .env.production Note the (dot) 👈 before the file name.

Note: For now, only create environment file with name .env.development and .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_KEY then it should be name as REACT_APP_MEDIUM_KEY

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.

Now, use 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.

Additional configurations:

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 dotenv.

Head to config/env.js here search for REACT_APP_ . You will be able to see following code

change REACT_APP_ to whatever you want to be.

How to create .env files other than production and development ? 🤔

Solution 1: When you already ran npm run eject

Step 1: Create .env.qa

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 .

QA env setting

Step 4: run 🏃🏻‍♂️ npm run star-qa . you will get following warning message:

Either you press y or 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 package.json .

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 .env.dev file.

Find the final code here 👉🏻 Git

Thanks for reading. 😃