install npm package to manage different environments.

npm install env-cmd

You can add the configuration in the .env file. Below are the files which we can use for different environments.

.env.development

REACT_APP_BASE_API_URL = development

.env.production

REACT_APP_BASE_API_URL = production

Note: Prefix “REACT_APP_” is required for creating custom variables in React.

Now we just need to change the scripts in the package.json file.

"scripts": {
    "start:development": "env-cmd -f .env.development react-scripts start",
    "start:production": "env-cmd -f .env.production react-scripts start",
    "build:development": "env-cmd -f .env.development react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build",
    "test:development": "env-cmd -f .env.development react-scripts test",
    "test:production": "env-cmd -f .env.production react-scripts test",
    "eject": "react-scripts eject"
  }

Run your app using npm run start:development