Question

我在我的应用程序中使用NodeJs + React。我在NodeJs中使用express。我使用＆＃39; create-react-app＆＃39;创建了我的示例应用。 NPM。

我使用NodeJ来从react app调用oauth令牌。我在这篇文章Calling a secured REST api from Javascript without user login screen中提到了这种方法。

我在下面添加了此命令，以便与我的react应用程序一起启动NodeJ。有用。

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

问题在于我没有获得“创建 - 反应 - 应用”附带的实时跟踪功能。因为我没有启动webpack-dev-server。如果我做了一些改动，我必须运行“纱线节点”。重新启动并启动节点js服务器。

我的问题是如何启动nodejs express而不会丢失＆＃39; create-react-app的实时跟踪功能。

如果我需要弹出＆＃39; create-react-app＆＃39;并自定义脚本，只要我有以下功能，我很好。

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

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

谢谢，

Answer 1

有一个关于处理此设置的好方法的优秀教程：https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

总结一下：你可以用你习以为常的方式编写你的节点+快速服务器 - 我们会说它存在于一个名为project的目录中 - 然后嵌套在其中使用create-react-app创建的前端目录，例如project/client。

当您开发时，您实际上将运行两个服务器：后端服务器（npm start）和嵌套的create-react-app附带的webpack-dev服务器（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'))
}

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

Answer 2

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

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

随意提出任何问题，将尽力提供帮助

Answer 3

添加您的create-react-app

的"proxy": "http://localhost:5000"到package.json

来自文档的解释：

要告诉开发服务器在开发过程中代理任何未知的API服务器请求，请在package.json中添加一个代理字段，例如：

＆＃34;代理＆＃34;：＆＃34; http://localhost:5000＆＃34;

这样，当您在开发中获取（＆＃39; / api / todos＆＃39;）时，开发服务器将识别出它不是静态资产，并将您的请求代理为http://localhost:5000/api/todos倒退。开发服务器将仅尝试在其Accept头中将没有text / html的请求发送到代理。

方便地，这可以避免CORS问题和错误消息

详细了解：create-react-app Docs: Proxying API Requests in Development

create-react-app + nodejs（express）服务器

3 个答案:

来自文档的解释：