HANDLE MULTIPLE ENVIRONMENTS IN REACT JS

We need multiple environment for different environments. by following method we can provide specific URL to specific development environment.

Create new React app

npx create-react-app envtest

Open the react project in the IDE

Install the dependency env-cmd

npm i env-cmd

Create env files in the root folder of the project
.env
.env-local
.env-prod

Note: you can make development environments, like QA or DEV, depending on your requirements.

In .env, Add the project name as,

REACT_APP_NAME = APPNAME

In env-local and env-prod, add the respective environment URL as,

REACT_APP_ENV = respective env name
REACT_APP_API_URL = respective URL

Modify the package.json
In Script object,
Remove the start line and add new start script:

For start,
Local

“start:local” : “env-cmd -f .env-local  react-script  start”

Production

“start:prod” : “env-cmd -f .env-prod react-script start

Similarly for build,

Local

“build:local” : “env-cmd -f .env-local react-script build”

Production

“build:Prod” : “env-cmd -f .env-prod react-script build”

Now you can access the URL string, env name from the App.js or any other components where do you want.

To run the project,

Run in Local:

npm run start:local

Run in Production:

npm run start:prod

Additional Note:

To build the project,
Build for Local:

npm run build:local

Build for Production:

npm run build:prod

To Test the build,

We have to Install Serve :
To install Serve,

npm install -g serve

To start the build,

Serve -s build

Thanks For Reading

If you found this blog useful, Please like the blog.

Want to connect? Reach me on Linkedin

Wanna see my work? Look into Github