服务器之家

服务器之家 > 正文

大前端快闪二:React开发模式 一键启动多个服务

时间:2021-09-27 23:05     来源/作者:精益码农

大前端快闪二:React开发模式 一键启动多个服务

最近全权负责了一个前后端分离的web项目,前端使用create-react-app[1], 后端使用golang做的api服务。

  1. npxcreate-react-appmy-app
  2.  
  3. cdmy-app
  4.  
  5. npmstart

歘歘歘,就搭建了一个react前端项目。

前端老鸟都知道npm start或yarn start以开发模式启动react App:在localhost:3000调试预览前端项目,编辑器的变更会实时体现在web页面。

前端老鸟也知道npm run build或yarn build是以生产为目标,将优化后的静态文件输出到build文件夹 (优化构建性能、压缩产出物、给文件名哈希)。

从一个全栈程序员的视角,开发时最好能一次启动前后端两个程序。

大前端快闪二:React开发模式 一键启动多个服务

快闪二:你能在react app开发模式中一键启动多个服务吗?

1. 安装concurrently插件

  1. npminstallconcurrently-D

2 . 配置npm命令

  1. "scripts":{
  2. "start":"concurrently\"react-scriptsstart\"\"gorunmain.go\"",
  3. "build":"react-app-rewiredbuild",
  4. "test":"react-app-rewiredtest",
  5. "eject":"react-scriptseject"
  6. },

注意上面的start脚本内容: react-scripts start启动了前端app, go run main.go启动了后端api服务。

3. npm start或yarn start启动项目

开发模式,前后端项目不在一个端口,内置axios发起的ajax请求存在跨域。

解决跨域问题,要么反向代理,要么让后端做CORS。

这里我们采用反向代理的方式。

4. react开发模式设置proxy[2]

create-react-app允许你设置一个proxy,仅用于开发模式。

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json。

在package.json文件,设置要代理的后端地址 proxy:"localhost:8034"

,开发模式localhost:3000收到的未知请求将会由前端开发服务器代理转发。

引用链接

[1] create-react-app: https://github.com/facebook/create-react-app

[2] react开发模式设置proxy: https://coursework.vschool.io/setting-up-a-full-stack-react-application/

原文链接:https://mp.weixin.qq.com/s/lnG3GMXy_wPdg1RNpzIV8w

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部