[英]How to set NODE_ENV from package.json for react
I am trying to target multiple environments from local while executing React app.我试图在执行 React 应用程序时从本地定位多个环境。
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.我可以在我的 Express 中使用 args 来获取环境 arg,但我的本地 ui 应用程序仅在我控制台处理 process.env.NODE_ENV 时仍显示开发。 I am also trying to set NODE_ENV with same line for staging, but still no luck.我也在尝试使用同一行设置 NODE_ENV 进行暂存,但仍然没有运气。 PORT setting is working but, the app is running in 3000 and 3003 both ports.端口设置正常,但应用程序在 3000 和 3003 两个端口中运行。
How to get rid of this?如何摆脱这个? I would like to understand the staging configuration as well.我也想了解暂存配置。
As per the docs, we cannot override NODE_ENV, but there is a room to create our own custom variables starting with REACT_APP_.根据文档,我们不能覆盖 NODE_ENV,但是有一个空间来创建我们自己的自定义变量,从 REACT_APP_ 开始。 So i configured to look as below:所以我配置如下:
Reference: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables参考: 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);
在我的 UI 应用程序中,我可以通过如下方式获取它的值: console.log('REACT_APP_ENVIRONMENT => ', process.env.REACT_APP_ENVIRONMENT);
I build the build with REACT_APP_STAGE and use it in my application as process.env.REACT_APP_STAGE.我使用 REACT_APP_STAGE 构建构建并在我的应用程序中使用它作为 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"
},
在 NODE_ENV 前面使用 cross-env。
npm i -g cross-env
"staging": "concurrently -k \"npm:staging-server\" \"cross-env NODE_ENV='staging' PORT=3003 react-scripts start\"",
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",
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.