如何无需每次执行npm run build即可运行Flask+React调试环境？

方法一：前后端独立启动（推荐，调试体验最好） #

这是React开发最常用的调试方式，利用React自带的开发服务器实现热重载，同时通过代理转发API请求到Flask：

• 1. 在React项目目录（frontend）下启动开发服务器：

  npm start
  

  此时React会在localhost:3000运行，修改代码会自动刷新页面。
• 2. 在React项目的package.json中添加代理配置，把API请求转发到Flask服务器（假设Flask运行在localhost:5000）：

  "proxy": "http://localhost:5000"
  

• 3. 启动Flask服务器，确保你的API路由以/api开头（比如/api/users），避免和React的路由冲突：

  flask run --port 5000
  

• 4. 调试时直接访问localhost:3000，前端修改后自动热更，API请求会自动转发到Flask，完全不用执行npm run build。

方法二：让Flask代理React开发服务器请求 #

如果习惯通过Flask的端口访问页面，可以让Flask把非API请求转发到React开发服务器：

• 1. 先安装依赖：

  pip install requests
  

• 2. 修改Flask的App.py，添加一个兜底路由转发请求：

  from flask import Flask, request
  import requests
  
  app = Flask(__name__)
  
  # 你的API路由写在这里
  @app.route('/api/hello')
  def hello():
      return {"message": "Hello from Flask!"}
  
  # 转发所有非API请求到React开发服务器
  @app.route('/', defaults={'path': ''})
  @app.route('/<path:path>')
  def forward_to_react(path):
      react_dev_url = f"http://localhost:3000/{path}"
      resp = requests.get(react_dev_url)
      return resp.content, resp.status_code
  
  if __name__ == '__main__':
      app.run(port=5000)
  

• 3. 先启动React开发服务器（npm start），再启动Flask，访问localhost:5000即可看到React页面，修改前端代码会自动刷新。

为什么指向public目录无效？ #

React的public目录只是存放静态资源的地方，开发模式下的页面是由React开发服务器动态编译、注入热重载脚本后生成的，并非直接读取public/index.html。所以Flask直接指向public目录时，无法加载React的组件渲染逻辑和热重载功能，自然无法正常运行开发中的React应用。

内容的提问来源于stack exchange，提问作者Mich