33

I am trying to target multiple environments from local while executing React app.

1. Development
2. Staging
3. Production

I am also trying to test for offline mode in any of the environments. So, the scripts what I have configured is as follows:

    "staging-server": "nodemon server.js --environment=staging",
    "staging": "concurrently -k  \"npm:staging-server\" \"NODE_ENV='staging' PORT=3003 react-scripts start\"",
    "prod": "npm run build && forever server.js --environment=production"

I am able to fetch environment arg using args inside my Express, but my local ui app is still showing development only when I console for process.env.NODE_ENV. I am also trying to set NODE_ENV with same line for staging, but still no luck. PORT setting is working but, the app is running in 3000 and 3003 both ports.

How to get rid of this? I would like to understand the staging configuration as well.

5
  • You need to eject to config it
    – Tien Duong
    Jul 31, 2019 at 8:07
  • @TienDuong - I dont want to do that Jul 31, 2019 at 8:17
  • As it says in the docs, you cannot override NODE_ENV manually, you would have to create another one
    – Agney
    Jul 31, 2019 at 8:29
  • facebook.github.io/create-react-app/docs/…. You cannot override NODE_ENV manually
    – Tien Duong
    Jul 31, 2019 at 8:42
  • 2
    You can try another environment variable such as REACT_APP_ENVIRONMENT instead of NODE_ENV
    – Tien Duong
    Jul 31, 2019 at 8:43

4 Answers 4

27

As per the docs, we cannot override NODE_ENV, but there is a room to create our own custom variables starting with REACT_APP_. So i configured to look as below:

Reference: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

"staging": "concurrently -k  \"npm:staging-server\" \"cross-env REACT_APP_ENVIRONMENT='staging' PORT=3003 react-scripts start\"",

And inside my UI application, I can fetch its value by consoling it like this: console.log('REACT_APP_ENVIRONMENT => ', process.env.REACT_APP_ENVIRONMENT);

1
  • Hi I tried this.. but its not working! @Mithun. Does this still work?
    – Akhila
    Sep 29, 2021 at 9:54
7

I build the build with REACT_APP_STAGE and use it in my application as process.env.REACT_APP_STAGE.

"scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "REACT_APP_STAGE=local npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "build-dev": "REACT_APP_STAGE=dev react-scripts build",
    "build-prod": "REACT_APP_STAGE=prod react-scripts build",
    "build-qa": "REACT_APP_STAGE=qa react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
2
  • This is after ejection, which i dont want to use this Jul 31, 2019 at 9:43
  • 1
    no, this REACT_APP_ method works without ejection. which is your accepted answer as well.
    – Aman Gupta
    Nov 30, 2020 at 6:07
1

Easiest approach is to add it directly in your command:

"scripts": {
    "start": "./node_modules/.bin/nodemon server.js",
    "start:prod": "NODE_ENV=prod node server.js",
  },
3
  • 1
    no, this one wont work as we cannot override NODE_ENV. please refer to accepted answer here
    – Hadi KAR
    Sep 15, 2021 at 6:07
  • As @HadiKAR mentioned, NODE_ENV can't be overridden with your own value.
    – Gru
    Oct 14, 2021 at 8:03
  • You can override ENV vars on mac like that, but on windows you need a package like cross-env (npmjs.com/package/cross-env). There are even a lot of guides covering this as an option.
    – cnps
    Apr 2, 2022 at 12:00
0

Use cross-env in front of NODE_ENV.

npm i -g cross-env
"staging": "concurrently -k  \"npm:staging-server\" \"cross-env NODE_ENV='staging' PORT=3003 react-scripts start\"",
1
  • 2
    you can't override NODE_ENV
    – Alan Deep
    Oct 20, 2021 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.