/vite-flare-starter

name: vite-flare-starter
description: "Scaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI. Run setup.sh to clone, configure, and deploy. Use whenever the user wants a batteries-included Cloudflare full-stack app, vite-flare-starter scaffold, or a React + Cloudflare app with auth + database + Workers AI ready to go."
compatibility: claude-code-only

Vite Flare Starter

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

Stack

| Layer | Technology | Version | |-------|-----------|---------| | Frontend | React, Vite, Tailwind CSS, shadcn/ui | 19, 6.x, v4, latest | | Backend | Hono (on Cloudflare Workers) | 4.x | | Database | D1 (SQLite at edge) + Drizzle ORM | 0.38+ | | Auth | better-auth (Google OAuth + email/password) | latest | | Storage | R2 (S3-compatible object storage) | — | | AI | Workers AI binding | — | | Data Fetching | TanStack Query | v5 |

Cloudflare Bindings

| Binding | Type | Purpose | |---------|------|---------| | `DB` | D1 Database | Primary application database | | `AVATARS` | R2 Bucket | User avatar storage | | `FILES` | R2 Bucket | General file uploads | | `AI` | Workers AI | AI model inference |

Project Structure

src/
├── client/                 # React frontend
│   ├── components/         # UI components
│   ├── hooks/              # Custom hooks + TanStack Query
│   ├── pages/              # Route pages
│   ├── lib/                # Utilities (auth client, etc.)
│   └── main.tsx            # App entry point
├── server/                 # Hono backend
│   ├── index.ts            # Worker entry point
│   ├── routes/             # API routes
│   ├── middleware/          # Auth, CORS, etc.
│   └── db/                 # Drizzle schema + queries
└── shared/                 # Shared types between client/server

Key Commands

| Command | Purpose | |---------|---------| | `pnpm dev` | Start local dev server | | `pnpm build` | Production build | | `pnpm deploy` | Deploy to Cloudflare | | `pnpm db:migrate:local` | Apply migrations locally | | `pnpm db:migrate:remote` | Apply migrations to production | | `pnpm db:generate` | Generate migration from schema changes |

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

2a. Clone and clean

git clone https://github.com/jezweb/vite-flare-starter.git PROJECT_DIR --depth 1
cd PROJECT_DIR
rm -rf .git
git init

2b. Find-replace targets

Replace `vite-flare-starter` with the project name in these locations:

| File | Target | Replace with | |------|--------|-------------| | `wrangler.jsonc` | `"vite-flare-starter"` (worker name) | `"PROJECT_NAME"` | | `wrangler.jsonc` | `vite-flare-starter-db` | `PROJECT_NAME-db` | | `wrangler.jsonc` | `vite-flare-starter-avatars` | `PROJECT_NAME-avatars` | | `wrangler.jsonc` | `vite-flare-starter-files` | `PROJECT_NAME-files` | | `package.json` | `"name": "vite-flare-starter"` | `"name": "PROJECT_NAME"` | | `package.json` | `vite-flare-starter-db` | `PROJECT_NAME-db` | | `index.html` | `<title>` content | App display name (Title Case) |

Also in `wrangler.jsonc`:

• **Remove** hardcoded `account_id` line (let wrangler prompt or use env var)
• **Replace** `database_id` value with `REPLACE_WITH_YOUR_DATABASE_ID`

Reset `package.json` version to `"0.1.0"`.

Use the Edit tool for replacements (preferred over sed to avoid macOS/GNU differences).

2c. Generate auth secret

BETTER_AUTH_SECRET=$(openssl rand -hex 32 2>/dev/null || python3 -c "import secrets; print(secrets.token_hex(32))")

2d. Create .dev.vars

Convert kebab-case project name: `my-cool-app` becomes Display `My Cool App`, ID `my_cool_app`.

# Local Development Environment Variables
# DO NOT COMMIT THIS FILE TO GIT

# Authentication (better-auth)
BETTER_AUTH_SECRET=<generated>
BETTER_AUTH_URL=http://localhost:5173

# Google OAuth (optional)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

# Email Auth Control (disabled by default)
# ENABLE_EMAIL_LOGIN=true
# ENABLE_EMAIL_SIGNUP=true

# Application Configuration
APP_NAME=<Display Name>
VITE_APP_NAME=<Display Name>
VITE_APP_ID=<app_id>
VITE_TOKEN_PREFIX=<app_id>_
VITE_GITHUB_URL=
VITE_FOOTER_TEXT=

NODE_ENV=development

2e. Create Cloudflare resources (optional)

npx wrangler d1 create PROJECT_NAME-db
# Extract database_id from output, update wrangler.jsonc

npx wrangler r2 bucket create PROJECT_NAME-avatars
npx wrangler r2 bucket create PROJECT_NAME-files

2f. Install and migrate

pnpm install
pnpm run db:migrate:local

2g. Initial commit

git add -A
git commit -m "Initial commit from vite-flare-starter"

Step 3: Manual Configuration

1. **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` 2. **Favicon**: Replace `public/favicon.svg` 3. **CLAUDE.md**: Update project description, remove vite-flare-starter references 4. **index.html**: Update `<title>` and meta description

Step 4: Verify Locally

pnpm dev

Check: http://localhost:5173 loads, shows YOUR app name, sign-up/sign-in works (if OAuth configured).

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 "you