EasyStarter logoEasyStarter

Web 快速开始

本地跑起 Web 客户端

准备

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

安装必要工具

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

克隆仓库

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

# 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

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,开发业务功能前请依次完成以下步骤:

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

部署上线,必须按照下面的步骤执行:

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

On this page