Create Multiple env’s for your React application.

Before we start creating different environment’s let us first look at how the create react app(CRA) handles the different env.

React app by default has only two environments one is development which is activated while running the react application with npm start and other is production environment which is activated after build(npm run build).

Now, if your application want to have different environments like test, dev, demo and prod to run in different environments, this is actually not possible with the current React feature. To create multiple env’s we actually need to create the custom environments.

Follow the below steps to create custom environments

Step 1:

First install the env-cmd npm . Its a simple node plugin for executing commands using an environment from an env file.

npm install env-cmd

Step 2:

Create a env files in root folder. In our case I’m creating env files for development, qa, demo and production environments.

Step 3:

We are at important step in configuring the multiple environments we created. Open the package.json in your application and edit the some of configuration in script as below in the image

To test your different environments in your local edit the start script in package.json. In my case I want to access the production env(prod) in local.

Step 4:

And we are at our final step. After doing all this you guys wondering how to run and build the app with these env’s? To run or build just follow the below commands
npm run start:development
npm run build:prod