news 2026/9/3 13:28:36

Reflex 新手指南:5 条命令跑通第一个纯 Python Web 应用

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Reflex 新手指南:5 条命令跑通第一个纯 Python Web 应用

Reflex 新手指南:5 条命令跑通第一个纯 Python Web 应用

【免费下载链接】reflex🕸️ Web apps in pure Python 🐍项目地址: https://gitcode.com/GitHub_Trending/re/reflex

Reflex 是一个用纯 Python 构建全栈 Web 应用的框架:前端和后端都写.py文件,不需要写 JavaScript。它在本地把你的 Python 组件编译成 React 前端,开发时保存代码即热重载。读完这篇指南,你会得到一个跑在http://localhost:3000的空白应用,并清楚哪些文件能改、哪些文件不能碰。环境要求只有一条:Python 3.10+,安装细节可查 docs/getting_started/installation.md。

黄金路径:从零到本地运行

前置条件是装好包管理器 uv(macOS/Linux 用官方文档里的一行安装脚本,Windows 用 PowerShell 命令,均见 docs/getting_started/installation.md)。然后执行:

mkdir my_app && cd my_app uv init uv add reflex uv run reflex init

reflex init会问你要哪个模板:(0) 空白应用,(1) AI builder。第一次直接选 0,官方文档后续内容都基于它。生成后,my_app/my_app.py是应用入口,rxconfig.py是配置文件。启动开发服务器:

uv run reflex run

浏览器打开http://localhost:3000就能看到默认页面。此后修改代码并保存,浏览器几秒内自动刷新,不用重启进程。

项目结构:哪些文件别碰

reflex init生成的目录不复杂,完整说明见 docs/getting_started/project-structure.md:

  • .venv/是 uv 建的虚拟环境,依赖和系统 Python 隔离。
  • .web/是编译产物目录 ⚠️ 不要编辑、不要提交;每个页面会编译出对应的.js,排查编译问题时倒是可以看看。
  • assets/放图片、字体等静态资源,组件里直接按路径引用。
  • pyproject.toml记录依赖,uv.lock锁定解析后的版本,建议提交给团队保证一致。

日常开发你只需要碰应用 py 文件这一个地方。

初始化报错速查

现象原因处理办法
reflex命令找不到没在虚拟环境里执行,或 uv 不在 PATH命令一律加uv run前缀,或先激活.venv
初始化卡在选择模板首次 init 需要选模板选 (0) 空白应用即可
Windows 报 "missing a DLL required to run bun.exe"Bun 依赖 VC++ 运行时安装 Microsoft Visual C++ 2015 运行库后重试
提示端口 3000 被占用其他服务占了前端默认端口(后端默认 8000)找到占用进程释放,或在rxconfig.py里改为空闲端口
页面空白、无响应编译或前端依赖安装失败--loglevel debug重跑看日志,检查.web/pages/下是否生成了.js
改了代码不刷新误改了生成目录只改应用源码,.web/一律不动

生产部署:Caddy 反代容器化方案

要上线的话,仓库自带 4 套 Docker 示例(见 docker-example/README.md),新手最实用的是production-compose:构建时把前端静态导出,运行时只跑后端加 Caddy 反向代理,不需要 Node.js,内存占用更小。在 docker-example/production-compose/ 目录下两条命令:

DOMAIN=example.com docker compose build DOMAIN=example.com docker compose up

DOMAIN填访问域名(不带协议前缀),不填则默认给 localhost 自动申请 TLS 证书,签发过程可能花几分钟。如果应用需要更高并发,追加-f compose.prod.yaml即可带起 Postgres 和 Redis、让后端多 worker 运行;只开单端口的场景可以看simple-one-port示例。

验收:三条自检确认跑通

  1. 执行uv run reflex run后打开http://localhost:3000,页面显示默认欢迎内容而不是空白或 404,说明前端跑起来了。
  2. 改掉my_app/my_app.py里的页面标题并保存,几秒内浏览器标题自己变化,说明热重载生效——这是 Reflex 开发体验的核心。
  3. uv run reflex --version确认装的版本,再对照当前版本文档查 API;需要断点调试时,按 DEBUGGING.md 在 VSCode 里以模块方式启动,或者加CI=1做无头运行验证。

三条都通过,你的第一个纯 Python Web 应用就算真正跑通了,接下来从改页面标题开始往真实功能上迭代即可。

【免费下载链接】reflex🕸️ Web apps in pure Python 🐍项目地址: https://gitcode.com/GitHub_Trending/re/reflex

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/3 13:27:31

【计算机毕业设计单片机案例】基于 STM32 的可配置定时智能药盒控制系统实现 基于 STM32 的声光语音双模式服药提醒设备开发(012906)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于嵌入式单片机,Java、小程序技术领域和毕业项目实战 ✌️…

作者头像 李华
网站建设 2026/9/3 13:24:30

Vue 3与Cesium集成实战:构建三维GIS大屏可视化应用

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/3 13:22:54

C++进阶核心:内存管理、多线程与性能优化实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/3 13:22:38

Spring Boot+Vue 3前后端分离教学样板解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/9/3 13:22:11

Ice 开源免费 macOS 菜单栏管理:3 分钟摆平刘海屏旁边的图标堆积

Ice 开源免费 macOS 菜单栏管理:3 分钟摆平刘海屏旁边的图标堆积 【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice 装了二十多个常驻 App 之后,Wi-Fi 和电池图标被挤到刘海旁边…

作者头像 李华