How to manage separate environment files for development and production in React?

Forums ReactHow to manage separate environment files for development and production in React?
Staff asked 3 months ago

Answers (1)

Add Answer
Staff answered 2 months ago

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

Subscribe

Select Categories