How to start React App on Development machine as in specific environment? - node.js

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

Answer 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)