Vite Flare Starter

Vite Flare Starter

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

Stack

Cloudflare Bindings

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

Workflow

Step 1: Gather Project Info

Ask for:

Step 2: Clone and Configure

2a. Clone and clean

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

2b. Find-replace targets

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

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 ConfigurationAPP_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-avatarsnpx wrangler r2 bucket create PROJECT_NAME-files

2f. Install and migrate

pnpm installpnpm run db:migrate:local

2g. Initial commit

git add -Agit 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 secretsopenssl rand -base64 32 | npx wrangler secret put BETTER_AUTH_SECRETecho "https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put BETTER_AUTH_URLecho "http://localhost:5173,https://PROJECT_NAME.SUBDOMAIN.workers.dev" | npx wrangler secret put TRUSTED_ORIGINS
# If using Google OAuthecho "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_IDecho "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET
# Migrate remote databasepnpm run db:migrate:remote
# Build and deploypnpm run build && pnpm run deploy

Critical: After first deploy, update BETTER_AUTH_URL with your actual Worker URL. Add the production URL to Google OAuth redirect URIs.

Security Fingerprints

Change all of these so attackers cannot identify your site uses this starter:

Environment Variables

Branding (VITE_ prefix = available in frontend)

Auth

Email (Optional)

Common Customisations

Adding a New Database Table

1. Add schema in src/server/db/schema.ts
2. Generate migration: pnpm db:generate
3. Apply locally: pnpm db:migrate:local
4. Apply to production: pnpm db:migrate:remote

Adding a New API Route

1. Create route file in src/server/routes/
2. Register in src/server/index.ts
3. Add TanStack Query hook in src/client/hooks/

Changing Auth Providers

Edit src/server/auth.ts: add provider to socialProviders, add credentials to .dev.vars and production secrets, update client-side login buttons.

Feature Flags

Control features via environment variables: VITE_FEATURE_STYLE_GUIDE=true, VITE_FEATURE_COMPONENTS=true. Add your own in src/client/lib/features.ts.

Troubleshooting

Production Deployment Checklist

• BETTER_AUTH_SECRET set (different from dev!)
• BETTER_AUTH_URL matches actual Worker URL
• TRUSTED_ORIGINS includes all valid URLs
• Google OAuth redirect URI includes production URL
• Remote database migrated (pnpm db:migrate:remote)
• No vite-flare-starter references in config files
• Favicon replaced
• CLAUDE.md updated
• .dev.vars is NOT committed (check .gitignore)