CODEWITHSUNDEEP
node.jsreactjsenvironment-variablesdotenv
Ahmed Derbel
Ahmed Derbel

Reputation: 47

Reactjs : set .env file with 3 variables(prod,dev,staging) in the build folder with react build

I have a react app with build folder ( generated by : npm run build ) , I want to have 3 variables in my .env file ( just one file ):

REACT_APP_API_URL=http://localhost:3000/api ( for production)
REACT_APP_PROD_URL=http://localhost:3001/api ( for staging)
REACT_APP_STAGIN_URL=http://localhost:3002/api ( for development)

and use them in the npm run build folder

Upvotes: 0

Views: 7953

Answers (3)

Idan
Idan

Reputation: 4023

  • Create differences env files
  • install yarn add env-cmd
  • and add script to package.json:

"start-qa": "env-cmd -f .env.qa react-scripts start"

or build:

"build-qa": "env-cmd -f .env.qa react-scripts build"

Upvotes: 8

komal deep singh chahal
komal deep singh chahal

Reputation: 1259

try with cross-env

something like this in your package.json

"start":  cross-env REACT_APP_API_URL=http://localhost:3000/api node scripts/start.js

may be it will help you in achieving your stuff

Upvotes: 3

Fcmam5
Fcmam5

Reputation: 6972

You need to create a separate .env file for each environment.

As said in CRA Documentation: What other .env files can be used?:

.env.development, .env.test, .env.production: Environment-specific settings.

You can't place all your env variables in one file, the values will be overridden. For more information check dotenv documentation

Or if you want to edit env variables after building your project, please refer to this: https://stackoverflow.com/a/56120507/5078746

Upvotes: 1

Related Questions