Question

我有一个简单的create-react-app，带有一个仅包含1个文件（server.js）的快速后端，其工作是只执行构建文件夹并启动Web应用程序。

server.js代码如下：

const path = require('path')
const express = require('express')
const isProduction = process.env.NODE_ENV === 'prod'
const port = process.env.PORT ? process.env.PORT : 3000
const app = express()
var env = ""

// check below environment variable to identify on what environment on cloud service web-application is running
process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'

// Add expressjs 'logger' plugin for printing logs and FE errors
app.use(
    logger({
        noop: isProduction
    })
)

app.use((req, res, next) => {
    // if i try to log env name like below i'm able to see the value
    // but if i try to log this anywhere like below in react code (it's always undefined)
    console.log(process.env.ENVIRONMENT_NAME);
})


// Serves static assets
app.use(express.static('./build'))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './build', 'index.html'))
})

app.listen(port, (error, result) => {
    if (!isProduction && error) {
        console.log(error)
    }
    console.log('Server running on port ' + port)
})

下面是我的应用程序如何启动？

"scripts": {
    "postinstall": "npm run build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "NODE_ENV=prod node server.js",
    "develop": "react-scripts start"
  },

我现在想要实现什么？

1。）我的create-react-app具有一些组件，例如下拉菜单，单选按钮等，并根据一些选择在反应代码app.js中完成了获取rest-api调用，因此数据进入了响应已加载到页面上。

2。）现在，有两个rest-api端点。一个是开发人员，一个是产品。例如：www.example-dev.com/ , www.example-prod.com/。

3。）因此，基于在运行我的create-react-app的process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'在server.js代码中确定的云环境为基础，我想调用诸如{{ 1}}

4。）因此，我想知道在www.example-{env}.com/中设置此值并将其用于react-app中任何需要的组件类的正确方法。

例如：

下面是一些React组件代码，在这里我想使用server.js中设置的env值：

server.js

请帮助。

Answer 1

执行此操作的方法有多种，以下是几种不同的方法

使用create react app docs REACT_APP事物
对index.html使用模板引擎
将端点作为/ config
动态创建一个js文件，将其包含在index.html中

在线查找文档的1至3种方式

第4种方法是您可以做到的

fs.writeFileSync(path.join(__dirname, './build', 'config.js'), `window.SERVER_DATA = { env : ${process.env.ENVIRONMENT_NAME}}`);

确保在express.static之前执行此操作

上面的代码如下：

const path = require('path')
const express = require('express')
const isProduction = process.env.NODE_ENV === 'prod'
const port = process.env.PORT ? process.env.PORT : 3000
const app = express();
const fs = require('fs');
var env = ""

// check below environment variable to identify on what environment on cloud service web-application is running
process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'

// Add expressjs 'logger' plugin for printing logs and FE errors
app.use(
    logger({
        noop: isProduction
    })
)

app.use((req, res, next) => {
    // if i try to log env name like below i'm able to see the value
    // but if i try to log this anywhere like below in react code (it's always undefined)
    console.log(process.env.ENVIRONMENT_NAME);
})



fs.writeFileSync(path.join(__dirname, './build', 'config.js'), `window.SERVER_DATA = { env : "${process.env.ENVIRONMENT_NAME}"}`);

// Serves static assets
app.use(express.static('./build'))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './build', 'index.html'))
})

app.listen(port, (error, result) => {
    if (!isProduction && error) {
        console.log(error)
    }
    console.log('Server running on port ' + port)
})

更新您的index.html以使用我们的新js文件

<script src="./config.js"></script>

在您的react组件中，您可以通过

访问

console.log(window.SERVER_DATA)

工作示例：

https://codesandbox.io/embed/express-5o8ei

Answer 2

您可以提供以cha开头的环境变量，例如REACT_APP_

在您的反应代码中，您可以像这样访问它：

REACT_APP_ENVIRONMENT_NAME

您还可以更新构建脚本以像这样传递变量

let env = process.env.REACT_APP_ENVIRONMENT_NAME;    
let responseObj = await callRestAPI(`www.example-${env}.com`);

如何在快速后端server.js文件中设置一些值并在create-react-app代码中使用它？

2 个答案: