vite-flare-starter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vite Flare Starter

Clone and configure Jez's batteries-included Cloudflare starter into a standalone project. Produces a fully rebranded, deployable full-stack app.

克隆并配置Jez的一站式Cloudflare启动模板，将其转换为独立项目，生成可重新品牌化、可部署的全栈应用。

What You Get

你将获得的技术栈

Layer	Technology
Frontend	React 19, Vite, Tailwind v4, shadcn/ui
Backend	Hono (on Cloudflare Workers)
Database	D1 (SQLite at edge) + Drizzle ORM
Auth	better-auth (Google OAuth + optional email/password)
Storage	R2 (S3-compatible object storage)
AI	Workers AI binding
Data Fetching	TanStack Query
Deployment	Cloudflare Workers with Static Assets

See

references/tech-stack.md

for the full dependency list.

层级	技术栈
前端	React 19, Vite, Tailwind v4, shadcn/ui
后端	Hono（基于Cloudflare Workers）
数据库	D1（边缘SQLite）+ Drizzle ORM
身份验证	better-auth（支持Google OAuth + 可选邮箱/密码登录）
存储	R2（兼容S3的对象存储）
人工智能	Workers AI 绑定
数据获取	TanStack Query
部署	带静态资源的Cloudflare Workers

完整依赖列表请查看

references/tech-stack.md

。

Workflow

操作流程

Step 1: Gather Project Info

步骤1：收集项目信息

Ask for:

Required	Optional
Project name (kebab-case)	Admin email
Description (1 sentence)	Google OAuth credentials
Cloudflare account (Jezweb Team or Personal)	Custom domain

需要收集以下信息：

必填项	可选项
项目名称（短横线分隔格式）	管理员邮箱
项目描述（一句话）	Google OAuth 凭证
Cloudflare账号（Jezweb团队账号或个人账号）	自定义域名

Step 2: Run Setup Script

步骤2：运行安装脚本

bash

bash skills/vite-flare-starter/scripts/setup.sh

The script will:

Clone the repo and remove
```
.git
```
Find-replace
```
vite-flare-starter
```
with project name (7 locations)
Generate
```
BETTER_AUTH_SECRET
```
Create
```
.dev.vars
```
from template
Optionally create Cloudflare D1 + R2 resources
Run
```
pnpm install
```
Run local database migration
Report remaining manual steps

bash

bash skills/vite-flare-starter/scripts/setup.sh

脚本将完成以下操作：

克隆仓库并移除
```
.git
```
目录
将所有出现
```
vite-flare-starter
```
的位置替换为项目名称（共7处）
生成
```
BETTER_AUTH_SECRET
```
基于模板创建
```
.dev.vars
```
文件
（可选）创建Cloudflare D1和R2资源
运行
```
pnpm install
```
安装依赖
执行本地数据库迁移
列出剩余需要手动完成的步骤

Step 3: Manual Configuration

步骤3：手动配置

After the script completes:

Google OAuth (if using):
- Go to Google Cloud Console
- Create OAuth 2.0 Client ID
- Add redirect URI:
```
http://localhost:5173/api/auth/callback/google
```
- Copy Client ID and Secret to
```
.dev.vars
```
Favicon: Replace
```
public/favicon.svg
```
with your own
CLAUDE.md: Update project description and remove vite-flare-starter references
index.html: Update
```
<title>
```
and meta description

脚本执行完成后，需完成以下手动配置：

Google OAuth（若使用）：
- 访问Google Cloud Console
- 创建OAuth 2.0客户端ID
- 添加重定向URI：
```
http://localhost:5173/api/auth/callback/google
```
- 将客户端ID和密钥复制到
```
.dev.vars
```
  文件中
网站图标：替换
```
public/favicon.svg
```
为自定义图标
CLAUDE.md：更新项目描述并移除所有与vite-flare-starter相关的引用
index.html：更新
```
<title>
```
标签和元描述

Step 4: Verify Locally

步骤4：本地验证

bash

pnpm dev

Check:

http://localhost:5173 loads
Shows YOUR app name, not "Vite Flare Starter"
Sign-up/sign-in works (if Google OAuth configured)

bash

pnpm dev

检查以下内容：

http://localhost:5173 可正常加载
显示你的应用名称，而非“Vite Flare Starter”
注册/登录功能正常（若已配置Google OAuth）

Step 5: Deploy to Production

步骤5：部署到生产环境

bash

undefined

bash

undefined

Set production secrets

设置生产环境密钥

openssl rand -base64 32 | npx wrangler secret put BETTER_AUTH_SECRET echo "https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put BETTER_AUTH_URL echo "http://localhost:5173,https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put TRUSTED_ORIGINS

If using Google OAuth

若使用Google OAuth

echo "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_ID echo "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET

Migrate remote database

迁移远程数据库

pnpm run db:migrate:remote

Build and deploy

构建并部署

pnpm run build && pnpm run deploy


**Critical**: After first deploy, update BETTER_AUTH_URL with your actual Worker URL. Also add the production URL to Google OAuth redirect URIs.

pnpm run build && pnpm run deploy


**重要提示**：首次部署后，需将BETTER_AUTH_URL更新为实际的Worker URL。同时需将生产环境URL添加到Google OAuth的重定向URI列表中。

Common Issues

常见问题

Symptom	Cause	Fix
Auth silently fails (redirect to homepage)	Missing TRUSTED_ORIGINS	Set TRUSTED_ORIGINS secret with all valid URLs
"Not authorized" on deploy	Wrong account_id	Remove account_id from wrangler.jsonc or set yours
Database operations fail	Using original database_id	Create YOUR database, use YOUR database_id
localStorage shows "vite-flare-starter"	Missing VITE_APP_ID	Set `VITE_APP_ID=yourapp` in .dev.vars
Auth fails in production	BETTER_AUTH_URL mismatch	Must match actual Worker URL exactly

症状	原因	解决方法
身份验证静默失败（重定向到首页）	缺少TRUSTED_ORIGINS配置	设置TRUSTED_ORIGINS密钥，包含所有有效URL
部署时提示“未授权”	account_id错误	从wrangler.jsonc中移除account_id或设置为你的账号ID
数据库操作失败	使用了原始的database_id	创建你自己的数据库，并使用对应的database_id
localStorage中显示"vite-flare-starter"	缺少VITE_APP_ID配置	在.dev.vars中设置 `VITE_APP_ID=yourapp`
生产环境中身份验证失败	BETTER_AUTH_URL不匹配	必须与实际的Worker URL完全一致

What Gets Rebranded

品牌化修改内容

The setup script handles these automatically:

File	What Changes
`wrangler.jsonc`	Worker name, database name, bucket names
`package.json`	Package name, database references in scripts
`.dev.vars`	App name, secret, URL
`index.html`	Title, meta tags

These need manual attention:

```
CLAUDE.md
```
— project description
```
public/favicon.svg
```
— your favicon
Google OAuth — redirect URIs
Production secrets — via
```
wrangler secret put
```

See

references/customization-guide.md

for the complete rebranding checklist.

安装脚本将自动完成以下修改：

文件	修改内容
`wrangler.jsonc`	Worker名称、数据库名称、存储桶名称
`package.json`	包名称、脚本中的数据库引用
`.dev.vars`	应用名称、密钥、URL
`index.html`	标题、元标签

以下内容需要手动修改：

```
CLAUDE.md
```
—— 项目描述
```
public/favicon.svg
```
—— 自定义网站图标
Google OAuth —— 重定向URI
生产环境密钥 —— 通过
```
wrangler secret put
```
设置

完整的品牌化修改清单请参考

references/customization-guide.md

。