monorepo 结构划分 apps（web、app、api、email）与 packages（ui、core、ws-protocol）
ViteReactSaaS启动器
react-starter-kit — Vite SaaS模板
作者 kriasoft
基于 Vite 与 React 的 SaaS 全栈 monorepo 启动模板，集成 tRPC、Drizzle ORM、Better Auth 与 Stripe，可部署到 Cloudflare Workers。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-02查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
TypeScript 与 tRPC、Drizzle ORM 形成从数据库到 UI 的类型契约
三个 Cloudflare Workers 通过 service bindings 连接，web worker 负责路由与代理
内置 Better Auth 的邮箱 OTP、passkey、Google OAuth、组织功能与 Stripe 订阅
前端采用 React 19、TanStack Router、TanStack Query、Jotai、Tailwind CSS 与 shadcn/ui
提供 Drizzle 迁移、种子数据脚本以及 Terraform 基础设施配置
模板详细介绍
这是一个面向 SaaS 应用的全栈 monorepo 模板，采用 Bun 工具链与 Vite 构建，前端使用 React 19、TanStack Router、TanStack Query、Jotai、Tailwind CSS 与 shadcn/ui，后端由 Hono、tRPC、Better Auth 和 Stripe 组成，数据库层使用 Drizzle ORM 连接 Neon PostgreSQL。仓库按 apps 与 packages 划分：apps 下包含 Astro 营销站、React 单页应用、Hono + tRPC API 服务以及 React Email 邮件模板；packages 下提供 shadcn/ui 组件、共享类型工具和 WebSocket 协议。三个 Cloudflare Workers（web、app、api）通过 service bindings 连接，web worker 将 /api/* 路由到 API worker。
模板内置邮箱 OTP、passkey、Google OAuth 登录与组织、Stripe 订阅计费，并提供 Drizzle 迁移与种子数据脚本。开发环境通过 bun dev 同时启动各应用，本地端口分别为 5173（React 应用）、4321（营销站）和 8787（API）。部署前需用 Terraform 创建 Hyperdrive 连接池配置，并在 Cloudflare Workers 中设置 BETTER_AUTH_SECRET、RESEND_API_KEY 等密钥，生产数据库通过 bun db:migrate:production 迁移。
使用限制：需要 Bun 运行时与 Cloudflare 账号；数据库依赖 Neon PostgreSQL；Google 登录与 Stripe 计费为可选配置，但启用 Stripe 需同时设置相关密钥。代码采用 MIT 许可，可免费使用、修改与商用，但演示图片、字体、图标等第三方素材需单独核对许可，域名、托管、数据库、支付等外部服务可能另行收费。
ViteReactSaaS启动器
适合你的项目吗？
适用场景
- 从模板生成仓库，搭建需要登录、组织与订阅计费的 SaaS 产品
- 在 Cloudflare Workers 上部署前端、API 与营销站分离的边缘应用
- 以 tRPC 与 Drizzle ORM 构建端到端类型安全的全栈项目
- 需要邮箱 OTP、passkey 或 Google OAuth 等多种登录方式的 Web 应用
适合人群
- 熟悉 React、TypeScript 与 Bun 工具链，准备搭建 SaaS 项目的开发者
- 计划使用 Cloudflare Workers 与 Neon PostgreSQL 作为运行和数据库环境的团队
- 需要现成认证、组织与 Stripe 订阅模块作为起点的产品原型
- 希望用 monorepo 统一管理营销站、应用与 API 的工程团队
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
需安装 Bun v1.4+ 与 VS Code 推荐扩展，并准备 Cloudflare 账号
- 2
复制 .env 为 .env.local 并填入真实凭据，同时检查 apps/api/wrangler.jsonc 的 Worker 配置
- 3
执行 bun install 后可用 bun dev 启动全部应用，或分别使用 bun web:dev、bun app:dev、bun api:dev
- 4
配置 DATABASE_URL 后运行 bun db:push 初始化开发库，生产环境改用 bun db:migrate:production
- 5
部署前用 Terraform 创建 Hyperdrive 配置，并通过 wrangler secret put 设置 BETTER_AUTH_SECRET、RESEND_API_KEY 等密钥
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 部署需要注册 Cloudflare 账号，属于外部服务依赖，可能产生费用。
- 开发与构建需使用 Bun v1.4+ 运行时，替代 Node.js 与 npm。
- 数据库依赖 Neon PostgreSQL 外部服务，需自行配置连接。
- Google 登录为可选功能，启用需配置 Google OAuth 客户端凭据。
- Stripe 计费为可选功能，启用需配置相关密钥，Stripe 服务本身可能收费。
- 邮件发送依赖 Resend 服务，需使用已验证域名，默认地址仅能发往本人邮箱。
- 生产部署需使用 Terraform 创建 Hyperdrive 连接池配置。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
[Cloudflare account](https://dash.cloudflare.com/sign-up) for deployment
README 原文
[Bun](https://bun.sh/) v1.4+ (replaces Node.js and npm)
README 原文
Drizzle ORM with Neon PostgreSQL, migrations, and seed data
README 原文
Google sign-in (optional – email OTP and passkeys work without it)
README 原文
Stripe billing (optional – set all four to enable, or none; annual is extra)
README 原文
Set `RESEND_EMAIL_FROM` to an address on a domain you have verified with Resend.
README 原文
https://github.com/kriasoft/react-starter-kit/blob/main/LICENSEhttps://github.com/kriasoft/react-starter-kit/blob/main/README.mdTerraform creates the Hyperdrive configurations the API worker connects through
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 100 / 100
- 技术栈
- Vite · React
- 网站类型
- SaaS · 启动器
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-10-02
- 截图检查日期
- 2026-10-02
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: a0e4afbe11bd8a139a94ce8203ba4f8e409d8ac0d8e4d25f7fe8bcbc84586e5d
2026-10-02T22:02:16.307Z
来源文件 / 仓库<div align="center"> # React Starter Kit <a href="https://reactstarter.com/getting-started/"><img src="https://img.shields.io/badge/Docs-007ec6" height="20"></a> <a href="https://github.com/kriasoft/react-starter-kit?sponsor=1"><img src="https://img.shields.io/badge/-GitHub-%23555.svg?logo=github-sponsors" height="20"></a> <a href="https://discord.gg/2nKEnKq"><img src="https://img.shields.io/discord/643523529131950086?label=Chat" height="20"></a> <a href="https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant"><img src="https://img.shields.io/badge/Ask_ChatGPT-10a37f?logo=openai&logoColor=white" height="20"></a> <a href="https://gemini.google.com/gem/1IXFElQ2UvvZY86iL6uZLeoC-r8mp-OB-?usp=sharing"><img src="https://img.shields.io/badge/Ask_Gemini-8E75B2?logo=googlegemini&logoColor=white" height="20"></a> <a href="https://github.com/kriasoft/react-starter-kit/stargazers"><img src="https://img.shields.io/github/stars/kriasoft/react-starter-kit.svg?style=social&label=Star&maxAge=3600" height="20"></a> <a href="https://x.com/ReactStarter"><img src="https://img.shields.io/twitter/follow/ReactStarter.svg?style=social&label=Follow&maxAge=3600" height="20"></a> </div> A full-stack monorepo template for building SaaS applications with React 19, tRPC, and Cloudflare Workers. Type-safe from database to UI, deployable to the edge in minutes. ## Highlights - **Type-safe full stack** – TypeScript, tRPC, and Drizzle ORM create a single type contract from database to UI - **Edge-native** – Three Cloudflare Workers (web, app, api) connected via service bindings - **Auth + billing included** – Better Auth with email OTP, passkey, Google OAuth, organizations, and Stripe subscriptions - **Modern React** – React 19, TanStack Router (file-based), TanStack Query, Jotai, Tailwind CSS v4, shadcn/ui - **Database ready** – Drizzle ORM with Neon PostgreSQL, migrations, and seed data - **Fast DX** – Bun toolchain, Vite, Vitest, Oxlint, Oxfmt, and pre-configured VS Code settings React Starter Kit is proudly supported by these amazing sponsors: <a href="https://reactstarter.com/s/1"><img src="https://reactstarter.com/s/1.png" height="60" /></a> <a href="https://reactstarter.com/s/2"><img src="https://reactstarter.com/s/2.png" height="60" /></a> <a href="https://reactstarter.com/s/3"><img src="https://reactstarter.com/s/3.png" height="60" /></a> ## Technology Stack | Layer | Technologies | | --- | --- | | **Runtime** | [Cloudflare Workers](https://workers.cloudflare.com/) | | **Frontend** | [React 19](https://react.dev/), [TanStack Router](https://tanstack.com/router), [Tailwind CSS v4](https://tailwindcss.com/), [shadcn/ui](https://ui.shadcn.com/), [Jotai](https://jotai.org/) | | **Marketing** | [Astro](https://astro.build/) | | **Backend** | [Hono](https://hono.dev/), [tRPC](https://trpc.io/), [Better Auth](https://www.better-auth.com/), [Stripe](https://stripe.com/) | | **Database** | [Drizzle ORM](https://orm.drizzle.team/), [Neon PostgreSQL](https://get.neon.com/HD157BR) | | **Toolchain** | [Bun](https://bun.sh/), [TypeScript](https://www.typescriptlang.org/) 7.0, [Vite](https://vitejs.dev/), [Vitest](https://vitest.dev/), [Oxlint](https://oxc.rs/docs/guide/usage/linter), [Oxfmt](https://oxc.rs/docs/guide/usage/formatter) | ## Monorepo Architecture ``` ├── apps/ │ ├── web/ Astro marketing site (edge router, serves static + proxies to app/api) │ ├── app/ React 19 SPA (TanStack Router, Jotai, Tailwind CSS v4) │ ├── api/ Hono + tRPC API server (Better Auth, Cloudflare Workers) │ └── email/ React Email templates ├── packages/ │ ├── ui/ shadcn/ui components (new-york style) │ ├── core/ Shared types and utilities │ └── ws-protocol/ WebSocket protocol with type-safe messaging ├── db/ Drizzle ORM schemas, migrations, and seed data ├── infra/ Terraform (Hyperdrive connection pools, R2 storage) ├── docs/ VitePress documentation └── scripts/ Build automation and dev tools ``` Each app deploys independently to Cloudflare Workers. The web worker routes `/api/*` to the API worker and app routes to the app worker via service bindings. ## Prerequisites - [Bun](https://bun.sh/) v1.4+ (replaces Node.js and npm) - [VS Code](https://code.visualstudio.com/) with our [recommended extensions](.vscode/extensions.json) - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) browser extension (recommended) - [Cloudflare account](https://dash.cloudflare.com/sign-up) for deployment ## Quick Start ### 1. Create Your Project [Generate a new repository](https://github.com/kriasoft/react-starter-kit/generate) from this template, then clone it locally: ```bash git clone https://github.com/your-username/your-project-name.git cd your-project-name ``` ### 2. Install Dependencies ```bash bun install ``` ### 3. Configure Environment This project follows [Vite env conventions](https://vite.dev/guide/env-and-mode#env-files): - [`.env`](./.env) is committed and contains shared defaults/placeholders only (no real secrets) - `.env.local` is git-ignored and should contain your real credentials - `.env.local` values override `.env` ```bash cp .env .env.local # then replace placeholder values with real ones ``` Also check [`wrangler.jsonc`](./apps/api/wrangler.jsonc) for Worker configuration and bindings. ### 4. Start Development ```bash # Launch all apps in development mode (web, api, and app) bun dev # Or, start specific apps individually bun web:dev # Marketing site bun app:dev # Main application bun api:dev # API server ``` ### 5. Initialize Database Ensure `DATABASE_URL` is configured in your `.env.local` file, then set up the schema: ```bash bun db:push # Push schema directly (quick dev setup) bun db:seed # Seed with sample data (optional) bun db:studio # Open database GUI ``` `db:push` is for local prototyping only. Staging and production apply migrations instead: `bun db:migrate:staging`, `bun db:migrate:production`. | App | URL | | -------------- | ----------------------- | | React app | <http://localhost:5173> | | Marketing site | <http://localhost:4321> | | API server | <http://localhost:8787> | ## Keep Your Project Updated When you want to bring in newer React Starter Kit changes, ask your coding agent to run the `merge-seed` skill (`/merge-seed` in Claude Code or `$merge-seed` in Codex). It merges upstream changes while preserving your project's identity and configuration. Start with a clean working tree; the [Quick Start guide](https://reactstarter.com/getting-started/quick-start#keep-template-updates) explains the workflow and its safety boundary. ## Production Deployment The short version. The [deployment guide](https://reactstarter.com/deployment/) covers each step in full. ### 1. Provision Infrastructure Terraform creates the Hyperdrive configurations the API worker connects through: ```bash bun infra:production apply ``` Paste the two IDs it prints into the `hyperdrive` block of `apps/api/wrangler.jsonc`. ### 2. Environment Setup Configure your production secrets in Cloudflare Workers: ```bash # Required – the API refuses to deploy without these bun wrangler secret put BETTER_AUTH_SECRET --config apps/api/wrangler.jsonc --env="" bun wrangler secret put RESEND_API_KEY --config apps/api/wrangler.jsonc --env="" # Google sign-in (optional – email OTP and passkeys work without it) bun wrangler secret put GOOGLE_CLIENT_ID --config apps/api/wrangler.jsonc --env="" bun wrangler secret put GOOGLE_CLIENT_SECRET --config apps/api/wrangler.jsonc --env="" # Stripe billing (optional – set all four to enable, or none; annual is extra) bun wrangler secret put STRIPE_SECRET_KEY --config apps/api/wrangler.jsonc --env="" bun wrangler secret put STRIPE_WEBHOOK_SECRET --config apps/api/wrangler.jsonc --env="" bun wrangler secret put STRIPE_STARTER_PRICE_ID --config apps/api/wrangler.jsonc --env="" bun wrangler secret put STRIPE_PRO_PRICE_ID --config apps/api/wrangler.jsonc --env="" bun wrangler secret put STRIPE_PRO_ANNUAL_PRICE_ID --config apps/api/wrangler.jsonc --env="" # optional ``` All of these belong to the API worker, which is what `--config` selects – without it Wrangler has no worker to attach the secret to. Use `--env staging` for staging; production is the top-level config, selected explicitly with `--env=""`. Non-sensitive vars like `RESEND_EMAIL_FROM` go in `wrangler.jsonc` directly. Set `RESEND_EMAIL_FROM` to an address on a domain you have verified with Resend. The default `[email protected]` only delivers to your own inbox, and sign-in is email OTP – leave it and no one else can sign in. ### 3. Migrate the Production Database ```bash bun db:migrate:production # reads .env.production.local, and only that file ``` ### 4. Build and Deploy ```bash # Builds, then deploys api -> app -> web (service-binding targets first) bun deploy:staging bun deploy:production ``` CI runs the same script, so a release from your machine and one from GitHub Actions cannot drift. ## Backers <a href="https://reactstarter.com/b/1"><img src="https://reactstarter.com/b/1.png" height="60" /></a> <a href="https://reactstarter.com/b/2"><img src="https://reactstarter.com/b/2.png" height="60" /></a> <a href="https://reactstarter.com/b/3"><img src="https://reactstarter.com/b/3.png" height="60" /></a> <a href="https://reactstarter.com/b/4"><img src="https://reactstarter.com/b/4.png" height="60" /></a> <a href="https://reactstarter.com/b/5"><img src="https://reactstarter.com/b/5.png" height="60" /></a> <a href="https://reactstarter.com/b/6"><img src="https://reactstarter.com/b/6.png" height="60" /></a> <a href="https://reactstarter.com/b/7"><img src="https://reactstarter.com/b/7.png" height="60" /></a> <a href="https://reactstarter.com/b/8"><img src="https://reactstarter.com/b/8.png" height="60" /></a> ## Contributors <a href="https://reactstarter.com/c/1"><img src="https://reactstarter.com/c/1.png" height="60" /></a> <a href="https://reactstarter.com/c/2"><img src="https://reactstarter.com/c/2.png" height="60" /></a> <a href="https://reactstarter.com/c/3"><img src="https://reactstarter.com/c/3.png" height="60" /></a> <a href="https://reactstarter.com/c/4"><img src="https://reactstarter.com/c/4.png" height="60" /></a> <a href="https://reactstarter.com/c/5"><img src="https://reactstarter.com/c/5.png" height="60" /></a> <a href="https://reactstarter.com/c/6"><img src="https://reactstarter.com/c/6.png" height="60" /></a> <a href="https://reactstarter.com/c/7"><img src="https://reactstarter.com/c/7.png" height="60" /></a> <a href="https://reactstarter.com/c/8"><img src="https://reactstarter.com/c/8.png" height="60" /></a> <a href="https://reactstarter.com/c/9"><img src="https://reactstarter.com/c/9.png" height="60" /></a> <a href="https://reactstarter.com/c/10"><img src="https://reactstarter.com/c/10.png" height="60" /></a> <a href="https://reactstarter.com/c/11"><img src="https://reactstarter.com/c/11.png" height="60" /></a> <a href="https://reactstarter.com/c/12"><img src="https://reactstarter.com/c/12.png" height="60" /></a> <a href="https://reactstarter.com/c/13"><img src="https://reactstarter.com/c/13.png" height="60" /></a> ## Need Help? **[Documentation](https://reactstarter.com/)** covers auth, database, billing, deployment, and more. Our AI assistant is trained on this codebase – ask it anything on [ChatGPT](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant) or [Gemini](https://gemini.google.com/gem/1IXFElQ2UvvZY86iL6uZLeoC-r8mp-OB-?usp=sharing). Try these questions: - [How do I add a new tRPC endpoint?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20do%20I%20add%20a%20new%20tRPC%20endpoint%3F) - [Help me create a database table](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=Help%20me%20create%20a%20database%20table) - [How does authentication work?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20does%20authentication%20work%3F) - [Explain the project structure](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=Explain%20the%20project%20structure) - [How do I deploy to Cloudflare?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20do%20I%20deploy%20to%20Cloudflare%3F) - [Add a new page with routing](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=Add%20a%20new%20page%20with%20routing) - [How do I send emails?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20do%20I%20send%20emails%3F) ## Contributing See the [Contributing Guide](.github/CONTRIBUTING.md) to get started. Check [good first issues](https://github.com/kriasoft/react-starter-kit/issues?q=label:"good+first+issue") or join [Discord](https://discord.gg/2nKEnKq) for discussion. ## License Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the [LICENSE](https://github.com/kriasoft/react-starter-kit/blob/main/LICENSE) file. --- <sup>Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@koistya)) and [contributors](https://github.com/kriasoft/react-starter-kit/graphs/contributors).</sup>
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
cove
The Cove Stack: 🏝️ minimal TanStack Start template with Vite+, Better Auth, Drizzle ORM, shadcn/ui
Vite · SaaS
vite-react-boilerplate
A production ready, scalable starter template for Vite + React
Vite · 启动器
react-vite-admin
This Starter utilizes React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统
Vite · 后台
typescript-react_best_practices-vite_template
<⚡⚛️> Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)
Vite · 启动器
cloudflare-starter-kit
Template (boilerplate) repository for scaffolding Cloudflare Workers projects
Vite · 启动器
vitejs-template-react-rescript
Integrating ReScript and rescript-react into the official Vite React template
Vite · 启动器