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"
  }
}

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.

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.

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

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

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