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

我有一个React应用程序和一个单独的Express server应用程序

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

app.get（“*”，（req，res）=>{
res.sendFile（path.join（uu dirname+“/frontend/build/index.html”）；
});

这非常有效，但这样做会使我失去在做出更改时自动更新应用程序的能力。这是因为我正在从React build文件夹加载

index.html

。因此，要查看我所做的任何更改，我必须停止Express应用程序，重建React应用程序并重新启动Express应用程序

是否有任何方法可以修改上述代码或执行其他操作，以确保React应用程序在开发环境的浏览器中保持自动更新

我的npm脚本如下所示：

npm运行构建--前缀frontend&&node server.js

/

是一个节点应用程序，它是我的Express服务器

/frontend

是一个单独的节点应用程序，其中包含我的React应用程序

---

谢谢

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

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

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

编辑： 如果使用dev服务器运行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();
});

---

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

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

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

编辑： 如果使用dev服务器运行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();
});

我有一个React应用程序

如果您可以访问它的源文件，那么您可能正在使用Webpack至少将单独的组件文件捆绑在一起（更不用说使用插件和加载程序，例如用于JSX的Babel）

如果是这样的话，使用将是最好的选择，因为它是这类任务的解决方案。请记住，这不是服务器配置，而是客户端配置（尽管仅限于开发人员）。有关其他类似选项，请参见

---

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

我有一个React应用程序

如果您可以访问它的源文件，那么您可能正在使用Webpack至少将单独的组件文件捆绑在一起（更不用说使用插件和加载程序，例如用于JSX的Babel）

如果是这样的话，使用将是最好的选择，因为它是这类任务的解决方案。请记住，这不是服务器配置，而是客户端配置（尽管仅限于开发人员）。有关其他类似选项，请参见

---

---

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

我有一个React应用程序，你的意思是你可以访问它的源文件吗？强调了“分离”一词，但是设置似乎并不是分开的。看起来，这里的React应用程序被认为是Node.js应用程序的一部分。如果是这样，我建议重构逻辑和文件结构，使它们成为兄弟应用程序。通过“我有一个React应用程序”，你的意思是你可以访问它的源文件吗？强调了“分离”一词，但设置似乎并不分离。看起来，这里的React应用程序被认为是Node.js应用程序的一部分。如果是这样，我建议重构逻辑和文件结构，使它们成为兄弟应用程序。挑战是Express修改对客户端的响应，因此我需要在dev中通过Express运行React，这样我可以看到与在生产中加载时相同的行为。所以我知道我可以只运行

npm start

，但是我没有从Express获得修改后的响应（因为Express没有发送响应）。通常我在开发模式下为我的客户端使用开发服务器，如果应用程序是组合的（客户端由API服务器在同一URL上提供服务）。我认为您的Express在开发中没有发送响应，因为您应该尝试设置一些标题。我更新了我的答案。这可能是你的问题吗？如果没有，您能否提供一个http请求的示例？挑战在于Express修改对客户端的响应，因此我需要在开发中通过Express运行React，这样我可以看到与在生产中加载它时相同的行为。所以我知道我可以只运行

npm start

，但是我没有从Express获得修改后的响应（因为Express没有发送响应）。通常我在开发模式下为我的客户端使用开发服务器，如果应用程序是组合的（客户端由API服务器在同一URL上提供服务）。我认为您的Express在开发中没有发送响应，因为您应该尝试设置一些标题。我更新了我的答案。这可能是你的问题吗？如果没有，您能否提供一个http请求的示例？Express正在修改对客户端的响应，因此我希望在我的开发环境中使用Express，而不是webpack。我