这是一个演示项目,仅供展示。

入门指南模板TanStack Start

TANSHIP SaaS 模板快速入门

Nia Harbor

Nia Harbor

Interface Engineer

面向开发者的快速入门指南,帮助你在几天内从克隆仓库到运行完整的 SaaS 应用。

TANSHIP SaaS 模板快速入门

TANSHIP 模板是一个可直接投入生产的 SaaS 应用起点。它内置了身份认证、支付、数据库、邮件、国际化以及 20 多个预构建页面——全部针对 Cloudflare Workers 进行了配置。

你获得的能力

开箱即用,模板包含:

  • 身份认证 — Better Auth + Google OAuth。注册、登录、密码重置和会话管理。
  • 支付 — 支持 Stripe、PayPal 和 Creem。选择一种支付服务商并配置对应的密钥。
  • 数据库 — 基于 Cloudflare D1 的 Drizzle ORM。类型安全的查询、自动迁移和本地开发工作流。
  • 邮件 — Resend 集成,支持国际化的事务邮件模板。
  • 页面 — 落地页、仪表盘、博客、文档、更新日志、定价、关于、联系等。
  • 主题 — 34 套预设方案,支持亮色/暗色模式和可视化定制器。
  • 国际化 — 基于 URL 的中英文路由,无硬编码字符串。

快速开始

克隆仓库并安装依赖:

git clone <repo-url> my-saas
cd my-saas
pnpm install

复制示例环境变量文件并填入你的配置值:

cp .env.example .env

启动开发服务器:

pnpm dev

应用运行在 http://localhost:3000,同时提供英文和中文双语支持。

首要配置事项

在完整使用模板之前,需要完成以下服务配置:

身份认证

Better Auth 已预配置。将你的 Google OAuth 客户端 ID 和密钥添加到 .env 中。/sign-in/sign-up/dashboard 等认证页面即刻可用。

数据库

Drizzle ORM 连接 Cloudflare D1。运行初始迁移:

pnpm db:generate
pnpm db:migrate:local

支付

在环境变量中设置 PAYMENT_PROVIDERstripepaypalcreem,并添加对应的 API 密钥。/checkout/start 的结账流程将创建真实的支付会话。

邮件

添加你的 Resend API 密钥。模板可发送新闻通讯确认、联系表单回执和认证通知的本地化邮件。

项目结构

src/
├── routes/          # 基于文件的路由(TanStack Router)
├── features/        # 页面内容与功能范围内的代码
├── components/      # 共享 UI 组件(shadcn/ui)
├── server/          # 仅服务端代码(认证、数据库、邮件、支付)
├── i18n/            # 中英文翻译文件
└── lib/             # 共享工具函数

构建生产版本

当你准备好部署时:

pnpm build

这将在 dist/ 中生成优化的构建产物,可直接部署到 Cloudflare Workers。完整的生产部署流程请参阅部署指南。