模板介绍
介绍 Tanplate,一个构建于 Cloudflare Workers 上的模块化 TanStack Start 全栈模板。
什么是 Tanplate?
Tanplate 是一个运行在 Cloudflare Workers 上的 TanStack Start 全栈模板,面向个人产品、内容网站和带账号体系的应用。仓库已经组合了用户站、管理后台、技术文档和一组可选平台能力,让新项目可以从完整但可裁剪的代码基线开始。
无论是首次使用 TanStack Start,还是已经熟悉边缘运行时,都可以从本文档完成项目初始化、本地开发、功能配置和部署准备。
技术栈
| 领域 | 技术 |
|---|---|
| 全栈框架 | React、TanStack Start、TanStack Router、TanStack Query |
| 构建与样式 | Vite、Tailwind CSS、base-nova、Base UI、Iconify |
| 数据与存储 | Cloudflare D1、Drizzle ORM、Cloudflare R2 |
| 身份认证 | Better Auth、Google/GitHub Social Auth、Turnstile |
| 边缘能力 | Cloudflare Workers、Queues、Rate Limiting、Workers AI |
| 内容与文档 | Git 管理的 Markdown/MDX、Fumadocs |
| 邮件与分析 | React Email、Resend、Umami |
| 工程工具 | TypeScript、pnpm workspace、ESLint、Prettier、Playwright |
三个应用
| 应用 | 当前职责 | 部署单元 |
|---|---|---|
apps/web | Landing 与 Manifest 选中的 Auth/Projects/产品能力 | Worker tanplate |
apps/admin | Authentication 用户核心与已启用模块的管理/安全审计 | Worker tanplate-admin |
apps/docs | 本文档、搜索、Markdown 与 LLM 友好输出 | Worker tanplate-docs |
web 与 admin 只在同时消费对应能力时共享 D1/R2;纯 Landing 不需要业务 D1,docs 始终不绑定业务存储。
Capability Profile
仓库源码保留全部受支持模块,project.manifest.json 决定当前项目真正启用的应用、功能和 Provider。Authentication 与 Projects 默认开启但彼此独立,Web emailAndPassword 可关闭并保留 Social Auth;Favorites、Consent、事务邮件和 D1/R2 等依赖由 Manifest 自动派生。
关闭功能会裁剪产物
关闭某项能力后,初始化器会同步调整所需 binding、公开变量和构建 Profile;对应路由、客户端服务和运行时代码不会进入最终产物。
本文档的范围
本文档聚焦 Tanplate 自身的项目结构、配置入口和运维合同,不重复讲解 React、TanStack Start 或 Cloudflare Workers 的基础概念。需要了解框架细节时,请参考对应的官方文档。
当前 Tanplate 技术栈
| 技术 | 官方文档 |
|---|---|
| TanStack Start | TanStack Start 文档 |
| TanStack Router | TanStack Router 文档 |
| TanStack Query | TanStack Query 文档 |
| Vite | Vite 文档 |
| Drizzle ORM | Drizzle 文档 |
| Tailwind CSS | Tailwind CSS 文档 |
| shadcn/ui | shadcn/ui 文档 |
| Base UI | Base UI 文档 |
| Better Auth | Better Auth 文档 |
| Resend | Resend 文档 |
| React Email | React Email 文档 |
| Cloudflare D1 | D1 文档 |
| Cloudflare R2 | R2 文档 |
| Cloudflare KV | KV 文档 |
| Cloudflare Workers | Workers 文档 |
| Cloudflare Queues | Queues 文档 |
| Cloudflare Workers AI | Workers AI 文档 |
| Cloudflare Turnstile | Turnstile 文档 |
| Fumadocs | Fumadocs 文档 |
| Umami | Umami 文档 |
| Iconify | Iconify 文档 |
参考站包含但当前未集成
以下技术出现在参考项目的技术栈中,但 Tanplate 当前 Manifest、共享包和运行时没有对应集成。保留链接用于方案对照,不表示已经进入本模板:
| 技术 | 官方文档 |
|---|---|
| Stripe | Stripe 文档 |
| Creem | Creem 文档 |
| TanStack AI | TanStack AI 文档 |
| Cloudflare Email | Cloudflare Email Service 文档 |
| Content Collections | Content Collections 文档 |
获取帮助
遇到问题时,建议按以下顺序排查:
- 使用文档站搜索定位当前功能的配置页和专用集成页。
- 运行
pnpm check:template、pnpm check:environment或pnpm verify获取可复现的失败信息。 - 阅读目标目录的
.folder.md和文件 Header,确认修改边界与同步要求。 - 框架或 Cloudflare 平台问题回到上面的官方文档核对当前版本行为。
视频教程
当前状态
Tanplate 暂未发布配套视频教程。本文档中的版本化文字、可复制命令和仓库验证结果是当前权威操作入口。
快速开始
创建项目、安装依赖并启动本地应用。
代码库
查看仓库入口、应用和共享包边界。
环境配置
按 Capability Profile 准备变量、secret 与 binding。
部署网站
完成 dry-run、生产门禁并部署三个 Worker。
网站配置
调整品牌、导航、页脚、侧边栏和用户入口。