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

• 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

• Favicon: Replace public/favicon.svg

• CLAUDE.md: Update project description, remove vite-flare-starter references

• 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 "your-client-id" | npx wrangler secret put GOOGLE_CLIENT_ID

echo "your-client-secret" | npx wrangler secret put GOOGLE_CLIENT_SECRET

# Migrate remote database

pnpm run db:migrate:remote

# Build and deploy

pnpm 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:

Location

Default Value

How to Change

Page title

"Vite Flare Starter"

index.html

App name in UI

"Vite Flare Starter"

VITE_APP_NAME env var

localStorage keys

vite-flare-starter-theme

VITE_APP_ID env var

API tokens

vfs_ prefix

VITE_TOKEN_PREFIX env var

GitHub links

starter repo

VITE_GITHUB_URL (set empty to hide)

Worker name

vite-flare-starter

wrangler.jsonc

Database name

vite-flare-starter-db

wrangler.jsonc

R2 buckets

vite-flare-starter-*

wrangler.jsonc

Environment Variables

Branding (VITE_ prefix = available in frontend)

Variable

Purpose

Example

VITE_APP_NAME

Display name in UI

"My Cool App"

VITE_APP_ID

localStorage prefix, Sentry

"mycoolapp"

VITE_TOKEN_PREFIX

API token prefix

"mca_"

VITE_GITHUB_URL

GitHub link (empty = hidden)

""

VITE_FOOTER_TEXT

Footer copyright text

"2026 My Company"

APP_NAME

Server-side app name

"My Cool App"

Auth

Variable

Purpose

Notes

BETTER_AUTH_SECRET

Session encryption

openssl rand -hex 32

BETTER_AUTH_URL

Auth base URL

Must match actual URL exactly

TRUSTED_ORIGINS

Allowed origins

Comma-separated, include localhost + prod

GOOGLE_CLIENT_ID

Google OAuth

From Google Cloud Console

GOOGLE_CLIENT_SECRET

Google OAuth

From Google Cloud Console

ENABLE_EMAIL_LOGIN

Enable email/password

"true" to enable

ENABLE_EMAIL_SIGNUP

Enable email signup

Requires ENABLE_EMAIL_LOGIN

Email (Optional)

Variable

Purpose

Notes

EMAIL_FROM

Sender address

For verification/password reset

EMAIL_API_KEY

Email service API key

Resend recommended

Common Customisations

Adding a New Database Table

• Add schema in src/server/db/schema.ts

• Generate migration: pnpm db:generate

• Apply locally: pnpm db:migrate:local

• Apply to production: pnpm db:migrate:remote

Adding a New API Route

• Create route file in src/server/routes/

• Register in src/server/index.ts

• 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

Symptom

Cause

Fix

Auth redirects to homepage silently

Missing TRUSTED_ORIGINS

Set TRUSTED_ORIGINS with all valid URLs

"Not authorized" on deploy

Wrong account_id

Remove account_id from wrangler.jsonc or set yours

Database 500 errors

Missing migrations

Run pnpm db:migrate:local and pnpm db:migrate:remote

localStorage shows "vite-flare-starter"

Missing VITE_APP_ID

Set VITE_APP_ID=yourapp in .dev.vars

Auth fails in production only

BETTER_AUTH_URL mismatch

Must match actual Worker URL exactly (https, no trailing slash)

"redirect_uri_mismatch" on Google sign-in

OAuth redirect URI missing

Add production URL to Google Cloud Console OAuth redirect URIs

Secret changes have no effect

Not redeployed

wrangler secret put does NOT redeploy. Run pnpm deploy after

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)