Setup Multiple Environment in React

Posted By :Nilesh Kumar |31st August 2022

Setup Multiple Environment in React.

When we create a react app we always develop two environment.

  • Development server : where we only try to do testing and developing the project.
  • Production server : where our final project runs for real users.

Why we need to handle the environment variable in our react app?

When we are doing development in multiple stages or we are having different domain names or servers.

In our local we are using https://server1.api/yourApiEndUrl but when we deploy it to production or staging we may need it to be https://server3.api/yourApiEndUrl.

To manage this situation we always try to push our code with server3 url and to run it we have to change this on local as server1 url. To solve this problem we use multiple environment variable

How we do this?

Imagine our project has three environments:

  • Development or Testing
  • Staging
  • Production

And we have different API URL for each environment which can use to run the project like.

  1. https://server1.api/yourApiEndUrl  for Development or Testing
  2. https://server2.api/yourApiEndUrl  for Staging
  3. https://server3.api/yourApiEndUrl  for Production

We can add the .env file in root directory to manage all environment. Following are the files which we can use for different environments.

.env.development

REACT_APP_BASE_API_URL = https://server1.api/yourApiEndUrl

.env.staging

REACT_APP_BASE_API_URL = https://server1.api/yourApiEndUrl

.env.production

REACT_APP_BASE_API_URL = https://server1.api/yourApiEndUrl

Like

Note: Prefix 'REACT_APP_' is required for creating custom variables in .env file in React.

Now we need a library to change the environment according to server automaticaly called env-cmd 

To install this library run

By using npm

npm i env-cmd or npm install env-cmd

By using yarn

yarn add env-cmd

After installing this library we need to change our build script in Package.json file in root directory like.

scripts: {
    'start': 'react-scripts start',
    'build': 'react-scripts build',
    'build:testing': 'env-cmd -f .env.testing react-scripts build',          // for local development and testing
    'build:staging': 'env-cmd -f .env.staging react-scripts build',          // for staging 
    'build:production': 'env-cmd -f .env.production react-scripts build',    // for production
     ...
},

To test your work, run the following commands as required.

  • npm run build:testing
  • npm run build:staging
  • npm run build:production

 


About Author

Nilesh Kumar

Nilesh is an experienced Frontend Developer with expertise in ReactJS and a deep understanding of the latest technologies. He has practical experience working with tools and frameworks such as JavaScript, Material UI, React-Bootstrap, and Redux-Toolkit. Nilesh has made significant contributions to projects such as Heartbeat Design, Plant Tagging, and ReBuilding by utilizing his expertise to develop innovative solutions that meet project requirements. He ensures that the frontend of the projects he works on is intuitive and user-friendly. Nilesh is committed to enhancing his skills and knowledge by staying up-to-date with industry trends to deliver the best possible results.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us