Question

我正在构建React + Express应用程序，我需要将服务器配置中的一些配置变量传递到React App中（例如API URL）。

我需要在开发中（2个服务器-Webpack Dev服务器+ Node.js）以及在生产中（仅内置前端的Node.js Express服务器）这样做。

如何实现？

我尝试将本地人从Express传递到我做window.config = '<%- JSON.stringify(config) %>'（EJS模板系统）的模板，然后在React App中使用window.config。我认为这不是正确的方法。

Answer 1

React是客户端，没有人会建议您将服务器配置变量（如api键）传递给客户端，但是如果您想将配置变量传递给客户端。

您可以按照

// import config variable to express app.js server side
const config = require('./config.js');

// send the config variable
app.get('/getconfig', (req, res) => {
  res.json(config);
});

在客户端，使axios在动作创建者文件中获取对/ getconfig的请求

export function getConfig() {
   const req = axios.get('/getconfig')
            .then(res=> res.data)
            .catch(err => console.log(err));
   return {
        type: "GETCONFIG",
        payload: req
   }
}

现在您可以将其添加到减速器开关盒中，然后在任何react组件中使用它。

Answer 2

您可以考虑在Webpack中使用DefinePlugin。此功能使您可以创建前端逻辑中使用的全局常量。而且，由于它是在编译时创建的，因此您可以从Node层检索配置。

例如，您有2个GTM容器，一个用于开发，另一个用于生产。在生产的webpack配置中，我们可以使用以下代码：

const config = require('./node/config/prod.js');

module.exports = {
  // skip other setting...

  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV' : JSON.stringify('production'),
      'process.env.GTM_ID' : JSON.stringify(config.gtm.id)
    });
  ]
};

然后在html中，您可以使用process.env.GTM_ID在不同环境中动态获取GTM ID。

如何将配置变量从服务器（Express）传递到React App

2 个答案: