react 将express配置到react项目路径下启动，并配置为自动更新（热加载），并配置同时启动react项目以及express服务

前言

本文基于 (“react”: “^16.13.1”) 版本

1.参考 express 下的 package.json 文件

express的服务启动命令为：npm start

2.打开 react 项目的 package.json 文件，进行改写，增加 server 命令

路径为 express项目名 /bin/www，须根据自己项目express服务文件夹名称进行改写

"server": "node server/bin/www",

3.在react项目路径的基础上，启动express服务

npm run server

出现如下

4.express实现自动刷新 (热加载)

express 默认是没有热加载的，每次更改接口都需要重新启动，不然不生效

使用 nodemon 实现 express 热加载。

npm  install nodemon --save

5.改写 package.json （注意是react项目的package.json）

node 更改成 nodemon

"server": "nodemon server/bin/www",

6.启动 npm run server

npm run server

------------ 至此配置热加载完成，以下为一条命令同时启动react项目以及express服务 -----------------

7.使用 concurrently (一条命令同时启动react项目以及express服务)

npm install concurrently --save

还是修改react项目的package.json,增加 dev 命令

"dev": "concurrently \"npm start\" \"npm run server\"",

8. 使用 dev 命令同时启动react项目以及express服务端

npm run dev

启动成功

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。