create-react-app + nodejs (express) 服务器

Posted 2023-02-22

【中文标题】create-react-app + nodejs (express) 服务器

【英文标题】：create-react-app + nodejs (express) server

【发布时间】：2018-07-16 00:55:41

【问题描述】：

我在我的应用程序中使用 NodeJs + React。我在 NodeJs 中使用 express。我使用“create-react-app”npm 创建了我的示例应用程序。

我使用 NodeJs 从 react 应用程序调用 oauth 令牌。我在这篇文章Calling a secured REST api from javascript without user login screen 中提到了这种方法。

我在下面添加了这个命令来启动 NodeJs 和我的 react 应用程序。有用。

"scripts": 
  "node": "react-scripts-ts build & node server"

问题是我没有获得“create-react-app”附带的实时跟踪功能，因为我没有启动 webpack-dev-server。如果我做了一些更改，我必须运行 'yarn node' 来重新编译并启动节点 js 服务器。

我的问题是如何在不丢失“create-react-app”实时跟踪功能的情况下启动 nodejs express。

如果我需要弹出'create-react-app'并自定义脚本，只要我有以下功能就可以了。

启动 nodejs express - api 加载我的 react-app 如果我的 react 或 nodejs express 文件有任何变化，它应该自动重新加载。

如果您有任何问题，请随时告诉我。

谢谢，

【问题讨论】：

您不会在生产构建 (AFAIK) 时获得热重载。当您运行node 脚本时，这就是正在完成的工作。为 HMR 运行开发服务器。一般就是npm start见github.com/gaearon/react-hot-loader/issues/…

谢谢戴恩。我会看看它。我想我需要先弹出“create-react-app”。

***.com/a/48851722/82686 - 如何使用带有 Node.js 后端的 Create React App（不弹出）

【参考方案1】：

我将使用 nodemon (https://nodemon.io/) 单独运行 nodejs 服务器并创建反应应用程序。我想说，让服务器端 UI 不可知。

只是好奇，为什么你需要在服务器更改后重新加载 UI？您可以完成服务器端，编写单元/集成测试，然后编写 UI。

如有任何问题，请随时提出，我们会尽力提供帮助

【讨论】：

谢谢。假设我正在我的机器上开发应用程序。因此，create-react-app 带有“yarn start”，当我对我的 react 应用程序进行一些更改时，它会重新加载应用程序。但在从我的反应应用程序调用另一个 API 之前，我需要调用 nodejs api 来获取身份验证令牌。如果 node js 或 react app 有任何变化，我想重新加载网站。

【参考方案2】：

有一个很好的教程来处理这个设置：https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

总结一下：你可以用你习惯的任何方式编写你的 node+express 服务器 - 我们会说它位于一个名为 project 的目录中 - 然后 嵌套在其中 一个前端使用 create-react-app 创建的目录，例如project/client.

在开发时，您实际上会运行两台服务器：后端服务器 (npm start) 和嵌套的 create-react-app 附带的 webpack-dev-server (cd client && npm start)。在浏览器中，您将导航到 webpack-dev-server 提供的 url（默认为 localhost:3000）。

在生产中，您不需要运行两台服务器。您将捆绑您的前端 (cd client && npm run build)，然后您的后端服务器只需要为捆绑提供服务，例如通过 express 的静态中间件：

if (process.env.NODE_ENV === 'production') 
    app.use(express.static('client/build'))

我跳过了一些细节，所以如果这个设置听起来适合你，请查看我链接的教程。