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

Question

我有一个React应用程序和一个单独的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至少将单独的组件文件捆绑在一起(更不用说使用插件和加载程序，例如用于JSX的Babel(。

如果是这样的话，使用webpack-dev-server将是最好的选择，因为它是这类任务的解决方案。请记住，这不是服务器配置，而是客户端配置(尽管仅限于dev(。对于其它类似的选择，参见">选择开发工具"；部分。

---

如果任务是以某种方式从服务器进行重新加载(这是不应该的，因为这是开发过程，但我可能会错过一些东西(，当然，看看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提供服务，这只是为了生产。

编辑：如果你使用开发服务器运行react(因此使用两个不同的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();
});