ReactJs 环境变量来自 NestJS

Question

我们正在使用用于服务器端的 NestJs 开发 reactjs web 应用程序。

目前我们使用ServeStaticModule.forRoot 。

该应用程序需要一些配置（例如分析服务器的 url、clientId、redirectUrl ...）。

由于 Create React App 不支持服务器渲染，我们在 HTML 中添加了占位符，并且我们希望向客户端注入变量。

例如：

<html lang="en">
  <head>
    <script>
      window.CONFIG = __CONFIG__;
    </script>

https://create-react-app.dev/docs/title-and-meta-tags#generating-dynamic-meta-tags-on-the-server

我们如何更换CONFIG ？

Answer 1

以下方法适用于 Express。

如果要修改index.html ，那么一种方法是在index.html中使用app.useStaticAsset(//build path, {index: false})来提供内容，同时忽略main.ts 。 然后可以在根路径下sendFile(//index.html path)下发页面。

要替换占位符配置，您可以在相应的服务中使用readFileAsync或 controller 来读取index.html内容并在交付给客户端之前对其进行处理。