{"id":"vite-flare-starter","name":"vite-flare-starter","summary":"Scaffold はvite-flare-starterテンプレートからフルスタックのCloudflareアプリを用意しました — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4 + shadcn/ui + TanStack Query + R2 +…","body":"# Vite Flare Starter\n\nClone and configure the batteries-included Cloudflare starter into a standalone project. Produces a fully rebranded, deployable full-stack app.\n\n## Stack\n\n| Layer | Technology | Version |\n|-------|-----------|---------|\n| Frontend | React, Vite, Tailwind CSS, shadcn/ui | 19, 6.x, v4, latest |\n| Backend | Hono (on Cloudflare Workers) | 4.x |\n| Database | D1 (SQLite at edge) + Drizzle ORM | 0.38+ |\n| Auth | better-auth (Google OAuth + email/password) | latest |\n| Storage | R2 (S3-compatible object storage) | — |\n| AI | Workers AI binding | — |\n| Data Fetching | TanStack Query | v5 |\n\n### Cloudflare Bindings\n\n| Binding | Type | Purpose |\n|---------|------|---------|\n| `DB` | D1 Database | Primary application database |\n| `AVATARS` | R2 Bucket | User avatar storage |\n| `FILES` | R2 Bucket | General file uploads |\n| `AI` | Workers AI | AI model inference |\n\n### Project Structure\n\n```\nsrc/\n├── client/                 # React frontend\n│   ├── components/         # UI components\n│   ├── hooks/              # Custom hooks + TanStack Query\n│   ├── pages/              # Route pages\n│   ├── lib/                # Utilities (auth client, etc.)\n│   └── main.tsx            # App entry point\n├── server/                 # Hono backend\n│   ├── index.ts            # Worker entry point\n│   ├── routes/             # API routes\n│   ├── middleware/          # Auth, CORS, etc.\n│   └── db/                 # Drizzle schema + queries\n└── shared/                 # Shared types between client/server\n```\n\n### Key Commands\n\n| Command | Purpose |\n|---------|---------|\n| `pnpm dev` | Start local dev server |\n| `pnpm build` | Production build |\n| `pnpm deploy` | Deploy to Cloudflare |\n| `pnpm db:migrate:local` | Apply migrations locally |\n| `pnpm db:migrate:remote` | Apply migrations to production |\n| `pnpm db:generate` | Generate migration from schema changes |\n\n## Workflow\n\n### Step 1: Gather Project Info\n\nAsk for:\n\n| Required | Optional |\n|----------|----------|\n| Project name (kebab-case) | Admin email |\n| Description (1 sentence) | Google OAuth credentials |\n| Cloudflare account | Custom domain |\n\n### Step 2: Clone and Configure\n\n#### 2a. Clone and clean\n\n```bash\ngit clone https://github.com/jezweb/vite-flare-starter.git PROJECT_DIR --depth 1\ncd PROJECT_DIR\nrm -rf .git\ngit init\n```\n\n#### 2b. Find-replace targets\n\nReplace `vite-flare-starter` with the project name in these locations:\n\n| File | Target | Replace with |\n|------|--------|-------------|\n| `wrangler.jsonc` | `\"vite-flare-starter\"` (worker name) | `\"PROJECT_NAME\"` |\n| `wrangler.jsonc` | `vite-flare-starter-db` | `PROJECT_NAME-db` |\n| `wrangler.jsonc` | `vite-flare-starter-avatars` | `PROJECT_NAME-avatars` |\n| `wrangler.jsonc` | `vite-flare-starter-files` | `PROJECT_NAME-files` |\n| `package.json` | `\"name\": \"vite-flare-starter\"` | `\"name\": \"PROJECT_NAME\"` |\n| `package.json` | `vite-flare-starter-db` | `PROJECT_NAME-db` |\n| `index.html` | `<title>` content | App display name (Title Case) |\n\nAlso in `wrangler.jsonc`:\n- **Remove** hardcoded `account_id` line (let wrangler prompt or use env var)\n- **Replace** `database_id` value with `REPLACE_WITH_YOUR_DATABASE_ID`\n\nReset `package.json` version to `\"0.1.0\"`.\n\nUse the Edit tool for replacements (preferred over sed to avoid macOS/GNU differences).\n\n#### 2c. Generate auth secret\n\n```bash\nBETTER_AUTH_SECRET=$(openssl rand -hex 32 2>/dev/null || python3 -c \"import secrets; print(secrets.token_hex(32))\")\n```\n\n#### 2d. Create .dev.vars\n\nConvert kebab-case project name: `my-cool-app` becomes Display `My Cool App`, ID `my_cool_app`.\n\n```\n# Local Development Environment Variables\n# DO NOT COMMIT THIS FILE TO GIT\n\n# Authentication (better-auth)\nBETTER_AUTH_SECRET=<generated>\nBETTER_AUTH_URL=http://localhost:5173\n\n# Google OAuth (optional)\nGOOGLE_CLIENT_ID=\nGOOGLE_CLIENT_SECRET=\n\n# Email Auth Control (disabled by default)\n# ENABLE_EMAIL_LOGIN=true\n# ENABLE_EMAIL_SIGNUP=true\n\n# Application Configuration\nAPP_NAME=<Display Name>\nVITE_APP_NAME=<Display Name>\nVITE_APP_ID=<app_id>\nVITE_TOKEN_PREFIX=<app_id>_\nVITE_GITHUB_URL=\nVITE_FOOTER_TEXT=\n\nNODE_ENV=development\n```\n\n#### 2e. Create Cloudflare resources (optional)\n\n```bash\nnpx wrangler d1 create PROJECT_NAME-db\n# Extract database_id from output, update wrangler.jsonc\n\nnpx wrangler r2 bucket create PROJECT_NAME-avatars\nnpx wrangler r2 bucket create PROJECT_NAME-files\n```\n\n#### 2f. Install and migrate\n\n```bash\npnpm install\npnpm run db:migrate:local\n```\n\n#### 2g. Initial commit\n\n```bash\ngit add -A\ngit commit -m \"Initial commit from vite-flare-starter\"\n```\n\n### Step 3: Manual Configuration\n\n1. **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`\n2. **Favicon**: Replace `public/favicon.svg`\n3. **CLAUDE.md**: Update project description, remove vite-flare-starter references\n4. **index.html**: Update `<title>` and meta description\n\n### Step 4: Verify Locally\n\n```bash\npnpm dev\n```\n\nCheck: http://localhost:5173 loads, shows YOUR app name, sign-up/sign-in works (if OAuth configured).\n\n### Step 5: Deploy to Production\n\n```bash\n# Set production secrets\nopenssl rand -base64 32 | npx wrangler secret put BETTER_AUTH_SECRET\necho \"https://PROJECT_NAME.SUBDOMAIN.workers.dev\" | npx wrangler secret put BETTER_AUTH_URL\necho \"http://localhost:5173,https://PROJECT_NAME.SUBDOMAIN.workers.dev\" | npx wrangler secret put TRUSTED_ORIGINS\n\n# If using Google OAuth\necho \"your-client-id\" | npx wrangler secret put GOOGLE_CLIENT_ID\necho \"your-client-secret\" | npx wrangler secret put GOOGLE_CLIENT_SECRET\n\n# Migrate remote database\npnpm run db:migrate:remote\n\n# Build and deploy\npnpm run build && pnpm run deploy\n```\n\n**Critical**: After first deploy, update BETTER_AUTH_URL with your actual Worker URL. Add the production URL to Google OAuth redirect URIs.\n\n## Security Fingerprints\n\nChange all of these so attackers cannot identify your site uses this starter:\n\n| Location | Default Value | How to Change |\n|----------|---------------|---------------|\n| Page title | \"Vite Flare Starter\" | `index.html` |\n| App name in UI | \"Vite Flare Starter\" | `VITE_APP_NAME` env var |\n| localStorage keys | `vite-flare-starter-theme` | `VITE_APP_ID` env var |\n| API tokens | `vfs_` prefix | `VITE_TOKEN_PREFIX` env var |\n| GitHub links | starter repo | `VITE_GITHUB_URL` (set empty to hide) |\n| Worker name | `vite-flare-starter` | `wrangler.jsonc` |\n| Database name | `vite-flare-starter-db` | `wrangler.jsonc` |\n| R2 buckets | `vite-flare-starter-*` | `wrangler.jsonc` |\n\n## Environment Variables\n\n### Branding (VITE_ prefix = available in frontend)\n\n| Variable | Purpose | Example |\n|----------|---------|---------|\n| `VITE_APP_NAME` | Display name in UI | \"My Cool App\" |\n| `VITE_APP_ID` | localStorage prefix, Sentry | \"mycoolapp\" |\n| `VITE_TOKEN_PREFIX` | API token prefix | \"mca_\" |\n| `VITE_GITHUB_URL` | GitHub link (empty = hidden) | \"\" |\n| `VITE_FOOTER_TEXT` | Footer copyright text | \"2026 My Company\" |\n| `APP_NAME` | Server-side app name | \"My Cool App\" |\n\n### Auth\n\n| Variable | Purpose | Notes |\n|----------|---------|-------|\n| `BETTER_AUTH_SECRET` | Session encryption | `openssl rand -hex 32` |\n| `BETTER_AUTH_URL` | Auth base URL | Must match actual URL exactly |\n| `TRUSTED_ORIGINS` | Allowed origins | Comma-separated, include localhost + prod |\n| `GOOGLE_CLIENT_ID` | Google OAuth | From Google Cloud Console |\n| `GOOGLE_CLIENT_SECRET` | Google OAuth | From Google Cloud Console |\n| `ENABLE_EMAIL_LOGIN` | Enable email/password | \"true\" to enable |\n| `ENABLE_EMAIL_SIGNUP` | Enable email signup | Requires ENABLE_EMAIL_LOGIN |\n\n### Email (Optional)\n\n| Variable | Purpose | Notes |\n|----------|---------|-------|\n| `EMAIL_FROM` | Sender address | For verification/password reset |\n| `EMAIL_API_KEY` | Email service API key | Resend recommended |\n\n## Common Customisations\n\n### Adding a New Database Table\n1. Add schema in `src/server/db/schema.ts`\n2. Generate migration: `pnpm db:generate`\n3. Apply locally: `pnpm db:migrate:local`\n4. Apply to production: `pnpm db:migrate:remote`\n\n### Adding a New API Route\n1. Create route file in `src/server/routes/`\n2. Register in `src/server/index.ts`\n3. Add TanStack Query hook in `src/client/hooks/`\n\n### Changing Auth Providers\nEdit `src/server/auth.ts`: add provider to `socialProviders`, add credentials to `.dev.vars` and production secrets, update client-side login buttons.\n\n### Feature Flags\nControl features via environment variables: `VITE_FEATURE_STYLE_GUIDE=true`, `VITE_FEATURE_COMPONENTS=true`. Add your own in `src/client/lib/features.ts`.\n\n## Troubleshooting\n\n| Symptom | Cause | Fix |\n|---------|-------|-----|\n| Auth redirects to homepage silently | Missing TRUSTED_ORIGINS | Set TRUSTED_ORIGINS with all valid URLs |\n| \"Not authorized\" on deploy | Wrong account_id | Remove account_id from wrangler.jsonc or set yours |\n| Database 500 errors | Missing migrations | Run `pnpm db:migrate:local` and `pnpm db:migrate:remote` |\n| localStorage shows \"vite-flare-starter\" | Missing VITE_APP_ID | Set `VITE_APP_ID=yourapp` in .dev.vars |\n| Auth fails in production only | BETTER_AUTH_URL mismatch | Must match actual Worker URL exactly (https, no trailing slash) |\n| \"redirect_uri_mismatch\" on Google sign-in | OAuth redirect URI missing | Add production URL to Google Cloud Console OAuth redirect URIs |\n| Secret changes have no effect | Not redeployed | `wrangler secret put` does NOT redeploy. Run `pnpm deploy` after |\n\n## Production Deployment Checklist\n\n- [ ] `BETTER_AUTH_SECRET` set (different from dev!)\n- [ ] `BETTER_AUTH_URL` matches actual Worker URL\n- [ ] `TRUSTED_ORIGINS` includes all valid URLs\n- [ ] Google OAuth redirect URI includes production URL\n- [ ] Remote database migrated (`pnpm db:migrate:remote`)\n- [ ] No `vite-flare-starter` references in config files\n- [ ] Favicon replaced\n- [ ] CLAUDE.md updated\n- [ ] `.dev.vars` is NOT committed (check `.gitignore`)","author":"@jezweb","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/jezweb/claude-skills/tree/main/plugins/cloudflare/skills/vite-flare-starter","license":"MIT","category":"devops","lang":"en","tokens":2657,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"assets/dev-vars-template.txt","size":746,"sha256":"932f3720da2c3bf631caef7290c175f526c7f7cf9fe80c705071d3fa0419c850"},{"path":"assets/wrangler-template.jsonc","size":1097,"sha256":"2e1dc9f84985cbc3afaf61a98c8ea2f29c68c5fc6088c2958d44c9ae3969f860"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["console.cloud.google.com","developers.cloudflare.com"]}}