CODEWITHSUNDEEP
reactjswebpackcreate-react-appreact-scripts
sigmus
sigmus

Reputation: 3237

How to set build .env variables when running create-react-app build script?

I'm using the following environment variable in my create-react-app:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

It works when I run npm start by reading a .env file:

REACT_APP_API_URL=http://localhost:5555

How do I set a different value like http://localhost:1234 when executing a npm run build?

This is my package.json file:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Upvotes: 169

Views: 302929

Answers (7)

Binara Medawatta
Binara Medawatta

Reputation: 532

Based on Chrishiestand's answer env-cmd can be used to load environment variables from .env files.

"env-cmd -f .env.stage"

But if you're working on a NextJS project (As CRA is now deprecated) the .env.local file gets the highest priority and will replace all the variables defined by other files.

Example: If you have two files .env.local and .env.stage, you can't use staging variables by using the above script since it gets replaced by your .env.local file.

To avoid this issue, replace the .env.local file with .env.dev for development purposes and update the dev script as follows.

"dev": "env-cmd -f .env.dev next dev"

Upvotes: 0

kuldeep Rawat
kuldeep Rawat

Reputation: 29

If you are using Heroku for deployment, then follow this:

  • Go to your app settings >> click on 'Reveal Config Vars' button
  • Add your variables
  • Use them in the app in the same way as you are using previously ex. process.env.REACT_APP_VARIABLE_NAME
  • Re-Deploy the app and that's it...

Upvotes: 1

Artem Matiushenko
Artem Matiushenko

Reputation: 924

Also, it can be done without additional dependency:

"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},

And have .env.staging, .env.production files accordingly

Upvotes: 58

chrishiestand
chrishiestand

Reputation: 3000

If you'd like to have separate dotenv files for building and/or deploying to separate environments (stage, prod) then you can use env-cmd like so:

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

Then just update your package.json accordingly:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.stage.env npm run-script build"
  },

Then to build you'd just run this shell command:

npm run build:stage

Upvotes: 65

Vigneshwaran Chandrasekaran
Vigneshwaran Chandrasekaran

Reputation: 3223

install 'env-cmd' package

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

in local if we want to run qa environment use npm run start:qa

Upvotes: 20

Andy_D
Andy_D

Reputation: 4228

You can use the process.env.NODE_ENV like so:

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

You would need to have REACT_APP_PROD_API_URL and REACT_APP_DEV_API_URL set.

Or, if the production URL is always the same, you could simplify it:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React App sets the NODE_ENV to 'production' for you on build, so you don't need to worry about when to set it to production.

Note: you must restart your server (e.g. run npm start again) to detect environment variable changes.

Upvotes: 69

Baldeep
Baldeep

Reputation: 4642

I imagine you got this working by now, but for anyone else that finds this, you set your default environment variables in a .env file at the root of your "create-react-app" project.

To separate out the variables used when using npm start and npm run build you can create two more env files - .env.development and .env.production.

npm start will set REACT_APP_NODE_ENV to development, and so it will automatically use the .env.development file, and npm run build sets REACT_APP_NODE_ENV to production, and so it will automatically use .env.production. Values set in these will override the values in your .env.

If you're working with other people, and have values specific to your machine only, you can override values in .env.development and .env.production by adding those values to a new file - .env.development.local and .env.production.local respectively.

EDIT: I should point out that the environment variables you have set must start with "REACT_APP_", eg. "REACT_APP_MY_ENV_VALUE".

EDIT 2: if you need more than just development, and production, use env-cmd, as specified by this comment.

Upvotes: 275

Related Questions