通过自定义 Express 服务器为 React 应用程序提供服务，同时在开发过程中保持自动更新

Question

我有一个 React 应用和一个独立的 Express 服务器应用。

我可以通过在我的 Express 应用程序中使用此代码，使用自定义 Express 服务器为我的 React 应用程序提供服务：

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/frontend/build/index.html"));
});

这很好用，但是这样做我失去了 React 在我进行更改时自动更新我的应用程序的能力。这是因为我正在从我的 React 构建文件夹中加载 index.html。因此，要查看我所做的任何更改，我必须停止 Express 应用程序，重建我的 React 应用程序并重新启动 Express 应用程序。

我有什么办法可以修改上面的代码或做其他事情来确保 React 应用程序在开发环境的浏览器中保持自动更新？

我的 npm 脚本如下所示：

npm run build --prefix frontend && node server.js

./ 是一个 Node 应用程序，它是我的 Express 服务器

./frontend 是一个单独的 Node 应用程序，其中包含我的 React 应用程序

谢谢！

Answer 1

我有一个 React 应用程序

如果您有权访问其源文件，您可能正在使用 Webpack 至少将单独的组件文件捆绑在一起（更不用说使用插件和加载器，例如 Babel for JSX）。

如果是这样，使用webpack-dev-server 将是最佳选择，因为它是此类任务的解决方案。请记住，这不是服务器配置，而是客户端配置（尽管仅限开发人员）。有关其他类似选项，请参阅"Choosing a Development Tool" section of Webpack。

---

如果任务是以某种方式使这种重新加载从服务器发生（它不应该，因为它是开发，但我可能会错过一些东西），当然，看看webpack-dev-middleware。如果这不起作用，恐怕解决方案可能很复杂，包括为文件组设置观察者、建立客户端到服务器的通信（例如 WebSockets）以及触发整页或部分页重新加载。

Answer 2

首先，如果你想在开发模式下启动 React，你需要设置一些脚本来做到这一点。这是 package.json 脚本的示例：

"scripts": {
    "start": "set PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

通过这种方式，您可以从 npm start 开始为您的客户端开发服务器。您不需要为每次修改都重新构建项目并由 Express 提供它，这只是用于生产。

编辑： 如果您使用开发服务器运行您的反应（使用两个不同的 URL），我认为您应该为您的请求添加一些标头：

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader(
        'Access-Control-Allow-Headers',
        'Origin, X-Requested-With, Content-Type, Accept, Authorization'
    );
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');

    next();
});