React Starter Kit：从数据库到前端的全栈 SaaS 模板

文章目录React Starter Kit从数据库到前端的全栈 SaaS 模板1、这玩意儿是干嘛的2、技术栈长什么样3、怎么跑起来4、Monorepo 结构5、适合谁用React Starter Kit从数据库到前端的全栈 SaaS 模板react-starter-kit 在 GitHub 上已经拿到 23.6K Star 了。这是一个全栈 monorepo 模板用 React 19、tRPC 和 Cloudflare Workers 搭建 SaaS 应用。从数据库到 UI 全链路类型安全部署到边缘节点几分钟搞定。1、这玩意儿是干嘛的一件事给你一套开箱即用的 SaaS 脚手架。注册登录、组织管理、订阅付费、API 接口、前端页面全都在一个仓库里类型定义从数据库一路穿透到前端组件。不用再东拼西凑各种库不用再手动对齐前后端类型。2、技术栈长什么样运行时用 Bun不再依赖 Node.js 和 npm。前端是 React 19 配合 TanStack Router 做文件路由状态管理用 Jotai样式用 Tailwind CSS v4 和 shadcn/ui。后端是 Hono 加 tRPC认证走 Better Auth支持邮箱验证码、Passkey、Google 登录Stripe 订阅付费也接好了。数据库用 Drizzle ORM 操作 Neon PostgreSQLschema 定义、迁移、种子数据一套齐全。整个项目分四个应用web 是 Astro 做的营销站负责静态页面和路由分发app 是主应用 SPA跑 TanStack Router 和 Jotaiapi 是 Hono 加 tRPC 的接口服务处理认证和业务逻辑email 是 React Email 写的邮件模板。它们各自独立部署到 Cloudflare Workers通过 service bindings 互相调用不走公网。工具链也配好了Vite 做构建Vitest 跑测试ESLint 和 Prettier 管代码规范连 VS Code 的配置都预设了。3、怎么跑起来装 Bunv1.3 以上从模板生成仓库克隆到本地bun install装依赖。复制.env为.env.local把占位符换成真实的数据库连接串和密钥bun dev就能把 web、app、api 三个应用同时启动起来。数据库初始化用bun db:push直接推 schemabun db:seed灌测试数据bun db:studio打开可视化界面查看表结构。开发阶段用 push 就行生产环境建议用bun db:migrate走正式迁移流程。部署到 Cloudflare Workers 之前需要把 BETTER_AUTH_SECRET、Stripe 密钥、OAuth 凭证、邮件服务 Key 等通过wrangler secret put写进去。然后依次构建 email、web、app再逐个 deploy。4、Monorepo 结构项目根目录下apps 放四个应用packages 放共享组件ui 是 shadcn/ui 的组件库core 是通用类型和工具函数ws-protocol 是 WebSocket 的类型安全通信协议。db 目录放 Drizzle 的 schema 和迁移文件infra 放 Terraform 配置管 Cloudflare 的基础设施docs 是 VitePress 写的文档站。每个应用独立部署互不影响。web worker 负责路由分发把/api/*请求转给 api worker把应用路由转给 app worker。5、适合谁用想从零搭 SaaS 产品的人。注册、登录、组织管理、付费订阅这些通用功能不用再写一遍直接在模板上改业务逻辑就行。对类型安全有要求的团队。tRPC 让前后端共享类型定义改了后端接口字段前端编译时立刻报错不用等运行时才发现问题。打算部署到边缘节点的项目。Cloudflare Workers 的 service bindings 让几个服务之间调用延迟很低数据不用绕远路。ers 的 service bindings 让几个服务之间调用延迟很低数据不用绕远路。