javascript - How to setup the env variable for the react app? - Stack Overflow

admin管理员组

文章数量:1406710

My react app is running on http://localhost:3000 and I wanted to setup the env variable for the different environment development, production, staging and local.

my react app url for different environment are(I am mocking my urls)

local = http://localhost:3000
development = 
production = 
stage = 

looking for a solution how i can setup the env var for different environment.

Adding my approach to the same thing just wanted to know is this approach is good or not.

and how I can achieve same for staging environment

I have created an environment.js file.

let BASE_URL = http://localhost:3000

//check for environment
if (process.env.REACT_APP_ENV = "development") {
  BASE_URL = ";
}
if (process.env.REACT_APP_ENV = "production") {
  BASE_URL = ";
}

export {BASE_URL}

and also updated my run scripts

"scripts": {
     "dev":"REACT_APP_ENV=development npm start",
     "prod":"REACT_APP_ENV=productionnpm start",
     "build:dev":"REACT_APP_ENV=development npm run-script build",
     "build:prod":"REACT_APP_ENV=production npm run-script build",
    }

My react app is running on http://localhost:3000 and I wanted to setup the env variable for the different environment development, production, staging and local.

my react app url for different environment are(I am mocking my urls)

local = http://localhost:3000
development = http://react.developmet.
production = http://react.production.
stage = http://react.stage.

looking for a solution how i can setup the env var for different environment.

Adding my approach to the same thing just wanted to know is this approach is good or not.

and how I can achieve same for staging environment

I have created an environment.js file.

let BASE_URL = http://localhost:3000

//check for environment
if (process.env.REACT_APP_ENV = "development") {
  BASE_URL = "http://react.developmet."
}
if (process.env.REACT_APP_ENV = "production") {
  BASE_URL = "http://react.production."
}

export {BASE_URL}

and also updated my run scripts

"scripts": {
     "dev":"REACT_APP_ENV=development npm start",
     "prod":"REACT_APP_ENV=productionnpm start",
     "build:dev":"REACT_APP_ENV=development npm run-script build",
     "build:prod":"REACT_APP_ENV=production npm run-script build",
    }

• javascript
• reactjs
• environment-variables
• production-environment
• staging

Share Improve this question Follow edited Feb 25, 2021 at 9:06 Rambo check asked Feb 25, 2021 at 8:48 Rambo checkRambo check 3311 silver badge77 bronze badges 1

• stackoverflow./questions/42182577/… – Paul Zaslavskij Commented Feb 25, 2021 at 8:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can use env-cmd to manage your build for multiple env files:

Installation:

yarn add env-cmd -D

Create env files

1. Create a folder envs at root project level
2. Create .env files (as many as you need)

e.g. envs/.env.dev, envs/.env.prod, envs/.env.staging etc

A Sample .env (e.g. envs/.env.prod) file

REACT_APP_API_HOST=http://my-prod-api.example.
REACT_APP_ANY_OTHER_VAR=some_value

Configure scripts in package.json file:

"scripts": {
    "start": "react-scripts start",
    "eject": "react-scripts eject",
    "dev": "env-cmd -f envs/.env.dev react-scripts build",
    "prod": "env-cmd -f envs/.env.prod react-scripts build",
    "staging": "env-cmd -f envs/.env.staging react-scripts build",
  },

Make the build:

$ yarn dev // to make build for dev env
$ yarn prod // to make build for prod env
$ yarn staging // to make build for staging env

PS: You can use npm mands as well. I used yarn only for example purpose.

本文标签： javascriptHow to setup the env variable for the react appStack Overflow