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