如何从服务器（Express）传递配置变量到React应用程序

Question

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

我需要在开发中（2个服务器-Webpack Dev服务器+Node.js），以及在生产中（只有Node.js Express服务器和构建的前端）实现此目标。

如何实现？

我尝试从Express传递局部变量到模板中，然后使用window.config在React应用程序中，示例代码如下：window.config = '<%- JSON.stringify(config) %>' （EJS模板系统）。但我认为这不是正确的方法。

- Baterka

---

这并不是非常相关，但未经“保护”的全局变量几乎总是不好的。我倾向于在应用程序挂载时通过 API 调用来执行此类操作，并将其保存在 Redux 状态中，并将需要该信息的组件连接到配置片段。如果您需要在组件挂载之前获取值，则可以使用类似以下的方法。 - Dave Newton

API不是一个好主意，因为它很容易失败。 - Baterka

如果API失败，那么您的应用程序也将失败（这就是为什么应用程序中有默认值的原因）。您提出了问题，我回答了，并且我的应用程序总是能够正常工作。 - Dave Newton

我把它当作其中一个答案 :) 我只是希望有更好的答案。 - Baterka

你可以像现在这样渲染它，也可以从API获取它 - 还有什么其他选项？！ - Dave Newton

Answer 1

React是客户端技术，没有人会建议您将服务器配置变量（如API密钥）传递到客户端，但如果您想要将配置变量传递到客户端，可以按以下方式操作：

您可以这样做：

{`

- Pawan Sah

Answer 2

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

例如，你有两个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。

- Eric Tan