Web 快速开始

准备

无论是 Web 端还是移动端，先完成工作区级别的初始化：

安装必要工具

确保你的开发环境中已安装以下工具：

安装 Node.js 20+
安装 pnpm 9+
安装 git

克隆仓库

克隆仓库并进入项目根目录，以便开始开发：

# clone 仓库
git clone https://github.com/sunshineLixun/easystarter.git your-project-name

# 进入项目根目录
cd your-project-name

# 移除默认的 origin
git remote remove origin

# 添加你自己的 origin
git remote add origin https://github.com/your-username/your-project-name.git

# 推送到 origin
git push -u origin main

安装依赖

执行以下命令安装项目所需的所有依赖包：

pnpm install

配置 Web 端环境变量

复制模板文件：

cp apps/web/.env.development.example apps/web/.env.development

然后打开 apps/web/.env.development 并填入对应的值：

变量	本地默认值	用途
`VITE_SERVER_URL`	`http://localhost:3001`	Web 调用服务端的基础地址（服务端基于 Hono 跑在 Cloudflare Workers，本地开发监听 `3001` 端口）。
`VITE_APP_URL`	`http://localhost:3000`	Web 应用自身的地址 —— 用于 OAuth 回调。
`VITE_GA_MEASUREMENT_ID`	（留空）	Google Analytics 衡量 ID，可选。
`VITE_OPENPANEL_CLIENT_ID`	（留空）	OpenPanel 分析的 Client ID，可选。

VITE_ 前缀意味着 Vite 会在构建时把这些值打进 JS bundle —— 切勿在这里放服务端密钥。

配置服务端环境变量

服务端需要本地环境变量文件，复制模板：

cp apps/server/.dev.vars.example apps/server/.dev.vars

同时启动服务端和 Web

Web 客户端会调用 http://localhost:3001，所以服务端必须先跑起来。在仓库根目录执行合并脚本：

pnpm dev:web+server

如果想要独立的日志窗口，也可以分两个终端各自启动：

pnpm dev:server   # wrangler dev --port=3001
pnpm dev:web      # TanStack Start 开发服务器

默认本地开发地址：

Web: http://localhost:3000
Server: http://localhost:3001

Web & 服务端脚本速查

monorepo 根 package.json 中与 Web / 服务端相关的脚本：

pnpm dev:web —— 仅启动 Web 客户端
pnpm dev:server —— 仅启动服务端（端口 3001）
pnpm dev:web+server —— 两者并行（Web 开发推荐）
pnpm dev —— 用 turbo 跑起所有 workspace（web + server + native）

配置清单

你已经启动 Web + Server，开发业务功能前请依次完成以下步骤：

Cloudflare — 账号凭据与 D1 配置
数据库 — Drizzle ORM + D1 表结构与数据迁移
邮件服务 — 配置 Resend，启用注册验证和密码重置（出海推荐使用国外邮件服务）
手机号登录 — 启用手机号登录（国内推荐）
认证服务 — Better Auth、GitHub OAuth、Google OAuth
存储服务 — Cloudflare R2 对象存储，管理头像和文件上传
Stripe 支付 — Stripe Checkout、账单管理门户和 Webhook
Creem 支付 — Creem Checkout、账单管理门户和 Webhook

部署上线，必须按照下面的步骤执行：

部署 Server — 将 Hono 服务端部署到 Cloudflare Workers
部署 Web — 将 TanStack Start Web 应用部署到 Cloudflare Workers

On this page