Vite flare starter

--- name: vite-flare-starter description: "Set up a full-stack Cloudflare app using 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, a vite-flare-starter scaffold, or a React + Cloudflare app with auth, database, and Workers AI ready to go." compatibility: claude-code-only --- # Vite Flare Starter Clone and configure the all-in-one 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 the 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 `bash 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 REPLACEWITHYOURDATABASEID 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 `bash 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 mycoolapp. `` # Local Development Environment Variables # DO NOT COMMIT THIS FILE TO GIT # Authentication (better-auth) BETTERAUTHSECR