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

Question

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

我使用NodeJ来从react app调用oauth令牌.我在这篇文章中提到了这种方法在没有用户登录屏幕的情况下从Javascript调用安全的REST api.

我在下面添加了这个命令,以便与我的react应用程序一起启动NodeJ.有用.

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

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

我的问题是如何启动nodejs express而不会丢失'create-react-app'的实时跟踪功能.

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

• 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(cd client && npm start)附带的webpack-dev服务器.在浏览器中,您将导航到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。

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