Managing multiple environment configurations in React App

Building a user interface is one of the most important aspects of any product development. It can make or break the customer base irrespective of how strong the application functionality is. React is a Javascript library maintained by Facebook, individual developers, and companies. And even though it is not a complete framework like Angular but a library, it is popular because of the declarative, efficient, and flexible approach to building user interfaces.

Building an application in React is fairly simple. While developing a web application, most of developers use Create React App CLI. The React App is a stable single-page app. This means that once you start creating a build, it gets created for a specific environment and continues to exist in the same environment. For a React web application, you will have two default environments, viz., development and production.

Given below is the script from package.json that you can use for a web application in React App:

"scripts": {

 "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",

 "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",

"start-js": "react-scripts start",

 "start": "npm-run-all -p watch-css start  -js",   // For development environment.

 "build": "npm run build-css && react-scripts build",  // For production environment.

 "test": "react-scripts test --env=jsdom",

 "eject": "react-scripts eject",

}

For a web application, you can easily access the available scripts for the local host and also create the production build. In the above case, when you run script commands like “npm start” it uses .env or .env.development, and “npm build” uses .env.production at the root level. If your application has two environments, viz., development and production, then I would suggest using the default scripts. Just imagine if you have multiple environments like staging and QA (quality assurance) for the configuration, then what would you do? As react-scripts only support development and production, the solution is to create the .env.staging, .env.poc, or .env.qa, but it won’t work in a similar way to .env.development or .env.production. It is important to do a few changes in the configuration, in package.json and in the commands for running the application.

Now, let’s see how to manage the multiple environments in the application with the following prerequisites:

• Web Application should be created using the create react app CLI.
• Install env-cmd npm: Either use the command npm install env-cmd or npm install -g env-cmd.

Different scenarios in React App have been listed below. Let’s execute them one by one:

• To create environment files with the required configuration:
  First, create the required environment files for the application. Suppose your project has four environments like development, production, staging, and QA. Then you need to create 4 environment files as mentioned below:
  • env.development
  • env.production
  • env.staging
  • env.qa
• To add the configuration(contents) to the environment files:
  Suppose you have a different API URL for each environment. You can add the configuration in the particular .env file. Configuration here means any environment variable that can be used globally within the application. Below are some examples of various environments with the variables:
  • .env.development

    REACT_APP_API_URL = “https://dev-api.com/”
    
    REACT_APP_ENV = “dev”
    

  • .env.production

    REACT_APP_API_URL = "https://api.com/"
    
    REACT_APP_ENV = “prod”
    

  • .env.staging

    REACT_APP_API_URL = "https://staging-api.com/"
    
    REACT_APP_ENV = “staging”
    

  • .env.qa

    REACT_APP_API_URL = "https://qa-api.com/"
    
    REACT_APP_ENV = “qa”
    

  The only important thing is to use REACT_APP_ as a prefix for each environment variable.

• Update the scripts in package.json:

  "scripts": {
   "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
   "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
   "start-js": "react-scripts start",
   "start": "npm-run-all -p watch-css start  -js",
   "build": "npm run build-css && react-scripts build",
   "test": "react-scripts test --env=jsdom",
   "eject": "react-scripts eject",
   
  "start:development": "env-cmd -f .env.development npm-run-all -p watch-css start-js",
   "build:staging": "env-cmd -f .env.staging npm run-script build",
   "build:qa": "env-cmd -f .env.qa npm run-script build",
   "build:production": "env-cmd -f .env.production npm run build-css && react-scripts build"
  
  }

  In the above code, the highlighted part in blue color is used to build the environment-specific build. To build an environment-specific build, use the env-cmd along with the environment file and run-script.

• Running the application in different environments:
  To run the application in multiple environments, choose one of the environment-specific commands from the following:

  1] npm run start:development
  
  2] npm run build:staging
  
  3] npm run build:qa
  
  4] npm run build:production
  

• Access the variables in-app
  For accessing the variables in the .env file, you should use the process. env, which is a global variable. This is injected by the Node during runtime for the application’s use. It represents the state of the variables in the application’s environment at the time of its start.

  process.env.REACT_APP_API_URL
  

Thus, it can be inferred that the entire process is not as complicated as it looks and can be expanded to multiple environments. In this blog, I focussed on setting up your React app for the environments that are beyond the default environments of development and production. Comment below on how useful it turned out for your React projects, till then, Happy Coding!