How to start React App on Development machine as in specific environment?

Question

We are using Microsoft Windows for both development and hosting.

npm version - 6.8.0

node version - 10.15.3

I would like to know how I can start my ReactApp locally on my development machine as in Production environment.

We have multiple environments at work such as Test, Staging, PreProd, Prod.... etc and we want to test the behaviour of the app without actual deployment to the target env.

We've got some logic statements in the source codes by using process.env.NODE_ENV to check the different environments.

I tried to update package.json scripts section as the following. But, it doesn't work.

"scripts": {
    "start": "react-scripts start",
    "start-prod": "cross-env NODE_ENV=production react-scripts start",
    "start-prod2": "set NODE_ENV=production&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

I tried both start-prod and start-prod2 . Even though it hosts the app successfully, it's always in development mode. Please see the following screenshots:

npm run start-prod

npm run start-prod2

If I use npm run build, it generates the build with production env. But it takes too much time to test.

Could you please guide me how I could simulate the various environment in my development machine?

P.S. I'm just using the default create-react-app script set up and I don't have any custom webpack config file.

Complete package.json file

{
  "name": "react-workout-diary",
  "version": "0.10.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-brands-svg-icons": "^5.8.2",
    "@fortawesome/free-regular-svg-icons": "^5.8.2",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "es6-object-assign": "^1.1.0",
    "es6-promise": "^4.2.6",
    "formik": "^1.5.7",
    "has-value": "^2.0.2",
    "is-empty": "^1.2.0",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-datepicker": "^2.6.0",
    "react-delay": "^0.1.0",
    "react-dom": "^16.8.6",
    "react-moment": "^0.9.2",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^3.0.1",
    "react-toastify": "^5.2.1",
    "reactstrap": "^8.0.0",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.2",
    "redux-saga-routines": "^3.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "uuid": "^3.3.2",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "start-prod": "cross-env NODE_ENV=production react-scripts start",
    "start-prod2": "set NODE_ENV=production&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "cross-env": "^5.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.13.2",
    "enzyme-to-json": "^3.3.5",
    "react-test-renderer": "^16.8.6",
    "redux-saga-test-plan": "^4.0.0-beta.3"
  }
}

What are you expecting to see differently? Have you got a webpack config file too? — Will Jenkins
– Will Jenkins, Commented Jun 10, 2019 at 21:47
I'm not using manual webpack config file. I'm using create-react-app default configuration. I expected to see the value of process.env.NODE_ENV as "production". But now, it's always "development" — TTCG
– TTCG, Commented Jun 10, 2019 at 22:05

NikNik · Accepted Answer · 2019-11-27 13:01:10Z

1

You can't change the NODE_ENV variable:

You cannot override NODE_ENV manually. This prevents developers from accidentally deploying a slow development build to production.

What you can do is to use different .env files: From: React documentation

Files on the left have more priority than files on the right:

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)

answered Nov 27, 2019 at 13:01

NikNik

2,3012 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

program_bumble_bee Over a year ago

Can you help me explain how exactly does the precedence work? I mean, If I create different PORT and URL for each environment in their respective env files, how does the precedence from left to right will play a role in it? I am unable to get through this properly even from the documentation.

NikNik Over a year ago

@bubble-cord If you for example create a PORT=8080 in .env and then PORT=8181 in .env.local, when you run npm start, the PORT will be equal to 8181. Basically, the files on the left will have priority and will override the variable declared in files on the right side

Collectives™ on Stack Overflow

How to start React App on Development machine as in specific environment?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related