Vite Flare Starter
Clone and configure the batteries-included Cloudflare starter into a standalone project. Produces a fully rebranded, deployable full-stack app.
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.
Workflow
Step 1: Gather Project Info
Ask for:
| Required |
Optional |
| Project name (kebab-case) |
Admin email |
| Description (1 sentence) |
Google OAuth credentials |
| Cloudflare account |
Custom domain |
Step 2: Clone and Configure
Perform these operations to scaffold the project. See references/setup-pattern.md for exact replacement targets and the .dev.vars template.
- Clone the repo and remove
.git, init fresh repo
- Find-replace
vite-flare-starter with the project name in wrangler.jsonc (worker name, database name, R2 bucket names), package.json (name, database refs), and index.html (title, meta)
- Remove hardcoded
account_id and replace database_id with placeholder in wrangler.jsonc
- Reset package.json version to
0.1.0
- Generate
BETTER_AUTH_SECRET using openssl rand -hex 32 (or Python secrets.token_hex(32))
- Create
.dev.vars from template (convert kebab-case name to Title Case for display, underscore for ID)
- Optionally create Cloudflare D1 database and R2 buckets, update wrangler.jsonc with database_id
- Install dependencies with
pnpm install
- Run local database migration with
pnpm run db:migrate:local
- Initial commit
Step 3: Manual Configuration
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
Step 4: Verify Locally
pnpm dev
Check:
Step 5: Deploy to Production
# 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
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.
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 |
What Gets Rebranded
The setup process 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 descriptionpublic/favicon.svg — your favicon- Google OAuth — redirect URIs
- Production secrets — via
wrangler secret put
See references/customization-guide.md for the complete rebranding checklist.
1---2name: vite-flare-starter3description: Scaffold a full-stack Cloudflare app from vite-flare-starter — React 19, Hono, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui, TanStack Query, R2, Workers AI. Run setup.sh to clone, configure, and deploy.4---56# Vite Flare Starter78Clone and configure the batteries-included Cloudflare starter into a standalone project. Produces a fully rebranded, deployable full-stack app.910## What You Get1112| Layer | Technology |13|-------|-----------|14| Frontend | React 19, Vite, Tailwind v4, shadcn/ui |15| Backend | Hono (on Cloudflare Workers) |16| Database | D1 (SQLite at edge) + Drizzle ORM |17| Auth | better-auth (Google OAuth + optional email/password) |18| Storage | R2 (S3-compatible object storage) |19| AI | Workers AI binding |20| Data Fetching | TanStack Query |21| Deployment | Cloudflare Workers with Static Assets |2223See `references/tech-stack.md` for the full dependency list.2425## Workflow2627### Step 1: Gather Project Info2829Ask for:3031| Required | Optional |32|----------|----------|33| Project name (kebab-case) | Admin email |34| Description (1 sentence) | Google OAuth credentials |35| Cloudflare account | Custom domain |3637### Step 2: Clone and Configure3839Perform these operations to scaffold the project. See [references/setup-pattern.md](references/setup-pattern.md) for exact replacement targets and the `.dev.vars` template.40411. **Clone** the repo and remove `.git`, init fresh repo422. **Find-replace** `vite-flare-starter` with the project name in wrangler.jsonc (worker name, database name, R2 bucket names), package.json (name, database refs), and index.html (title, meta)433. **Remove** hardcoded `account_id` and replace `database_id` with placeholder in wrangler.jsonc444. **Reset** package.json version to `0.1.0`455. **Generate** `BETTER_AUTH_SECRET` using `openssl rand -hex 32` (or Python `secrets.token_hex(32)`)466. **Create** `.dev.vars` from template (convert kebab-case name to Title Case for display, underscore for ID)477. **Optionally create** Cloudflare D1 database and R2 buckets, update wrangler.jsonc with database_id488. **Install** dependencies with `pnpm install`499. **Run** local database migration with `pnpm run db:migrate:local`5010. **Initial commit**5152### Step 3: Manual Configuration5354After the script completes:55561. **Google OAuth** (if using):57 - Go to [Google Cloud Console](https://console.cloud.google.com/)58 - Create OAuth 2.0 Client ID59 - Add redirect URI: `http://localhost:5173/api/auth/callback/google`60 - Copy Client ID and Secret to `.dev.vars`61622. **Favicon**: Replace `public/favicon.svg` with your own63643. **CLAUDE.md**: Update project description and remove vite-flare-starter references65664. **index.html**: Update `<title>` and meta description6768### Step 4: Verify Locally6970```bash71pnpm dev72```7374Check:75- [ ] http://localhost:5173 loads76- [ ] Shows YOUR app name, not "Vite Flare Starter"77- [ ] Sign-up/sign-in works (if Google OAuth configured)7879### Step 5: Deploy to Production8081```bash82# Set production secrets83openssl rand -base64 32 | npx wrangler secret put BETTER_AUTH_SECRET84echo "https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put BETTER_AUTH_URL85echo "http://localhost:5173,https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put TRUSTED_ORIGINS8687# If using Google OAuth88echo "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_ID89echo "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET9091# Migrate remote database92pnpm run db:migrate:remote9394# Build and deploy95pnpm run build && pnpm run deploy96```9798**Critical**: After first deploy, update BETTER_AUTH_URL with your actual Worker URL. Also add the production URL to Google OAuth redirect URIs.99100## Common Issues101102| Symptom | Cause | Fix |103|---------|-------|-----|104| Auth silently fails (redirect to homepage) | Missing TRUSTED_ORIGINS | Set TRUSTED_ORIGINS secret with all valid URLs |105| "Not authorized" on deploy | Wrong account_id | Remove account_id from wrangler.jsonc or set yours |106| Database operations fail | Using original database_id | Create YOUR database, use YOUR database_id |107| localStorage shows "vite-flare-starter" | Missing VITE_APP_ID | Set `VITE_APP_ID=yourapp` in .dev.vars |108| Auth fails in production | BETTER_AUTH_URL mismatch | Must match actual Worker URL exactly |109110## What Gets Rebranded111112The setup process handles these automatically:113114| File | What Changes |115|------|-------------|116| `wrangler.jsonc` | Worker name, database name, bucket names |117| `package.json` | Package name, database references in scripts |118| `.dev.vars` | App name, secret, URL |119| `index.html` | Title, meta tags |120121These need manual attention:122- `CLAUDE.md` — project description123- `public/favicon.svg` — your favicon124- Google OAuth — redirect URIs125- Production secrets — via `wrangler secret put`126127See `references/customization-guide.md` for the complete rebranding checklist.
ulpi-io