Allumeur à flamme Vite
/SKILLCréer une application Cloudflare « full-stack » à partir du modèle « vite-flare-starter » - React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI.
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/serverKey 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_idline (let wrangler prompt or use env var) - Replace
database_idvalue withREPLACE_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 c