reactjswebpackcreate-react-appreact-scripts

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

Solution

  • 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.