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 toward building user interfaces.

Building an application in React is fairly simple. While developing a web application most of the 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…read more.