Svelte Template

SvelteKit + Cloudflare Workers Template for rapid webapp development

SvelteKit + Cloudflare Workers Template

A production-ready template for building full-stack web applications using SvelteKit and Cloudflare Workers, optimized for LLM-assisted development and rapid prototyping.

🚀 Modern Stack Features

🎯 Local-First Development: Real D1, R2, KV bindings work locally (no more deploy-to-test!)
🗄️ D1 Database + Time Travel: Native migrations with 30-day backup/recovery
⚡ SvelteKit Frontend: File-based routing, Svelte 5, reactive components
🌍 Cloudflare Workers Backend: API routes integrated in same project
📦 Single Deployment: Frontend + backend deploy as one optimized bundle
🎨 Zero-Dependency CSS: Vanilla CSS with utilities - no PostCSS complexity
🔧 Latest Tooling: Vite 7, Wrangler 4.43, Svelte 5.39, SvelteKit 2.46
🧪 Full Testing Suite: MCP Playwright integration for automated UI testing
⚡ Instant Feedback: HMR for both frontend AND Worker code

🏗️ Project Structure

src/
├── lib/
│   ├── components/         # Reusable Svelte components
│   ├── server/             # Server utilities (D1 helpers, retry logic)
│   └── stores/             # Svelte stores for state management
├── routes/
│   ├── api/               # API endpoints (+server.ts files)
│   │   ├── hello/         # Example endpoint with D1 integration
│   │   └── test-local-d1/ # Local development test endpoint
│   └── +page.svelte       # Home page
migrations/                 # D1 database migrations (auto-generated)
CLAUDE.md                  # Development workflow documentation
D1-FUTURE-BEST-PRACTICES.md # Advanced D1 patterns and monitoring
VITE-PLUGIN-SETUP.md       # Local development setup guide

🚀 SETUP

From zero to fully-functional local development in 2 minutes.

1. Clone & Install

git clone <your-repo-url>
cd svelte-template
npm install  # Installs latest dependencies (Vite 7, Svelte 5.39, SvelteKit 2.46)

2. Configure Cloudflare Services (Optional)

For production deployment, uncomment and configure in wrangler.toml:

# Uncomment when ready to deploy
# account_id = "YOUR_ACCOUNT_ID"

# [[env.dev.d1_databases]]
# binding = "DB"
# database_name = "your-app-db-dev"
# database_id = "your-dev-database-id"

# [[env.prod.d1_databases]]
# binding = "DB"
# database_name = "your-app-db-prod"
# database_id = "your-prod-database-id"

3. Start Local Development

# Option 1: Standard development (no database)
npm run dev

# Option 2: Full-stack development with local D1 database
npm run dev:local-db

🎉 Success! Visit http://localhost:5173

Test API with real D1 bindings: http://localhost:5173/api/test-local-d1

🌐 FIRST DEV DEPLOYMENT

Deploy your app to Cloudflare Workers with a real D1 database.

Prerequisites

Cloudflare account with Workers enabled
wrangler login completed
Your app working locally

Step 1: Create Development Database

# Create your development database
wrangler d1 create your-app-db-dev

# Copy the database ID from the output and update wrangler.toml:
# [[env.dev.d1_databases]]
# binding = "DB"
# database_name = "your-app-db-dev"
# database_id = "paste-your-database-id-here"

Step 2: Apply Database Migrations

# Apply your local migrations to the dev database
./build.sh --migrate-dev

# Or using npm scripts
npm run migrate:apply:dev

Step 3: Build and Deploy

# Deploy to development environment
./build.sh --deploy-dev

# Or using npm scripts
npm run deploy:dev

Step 4: Test Your Deployment

# Check deployment status
wrangler deployments list

# Test your deployed API endpoints
curl https://your-app-dev.your-subdomain.workers.dev/api/hello
curl https://your-app-dev.your-subdomain.workers.dev/api/test-schema

🎉 Success! Your app is now running on Cloudflare Workers with a real D1 database.

Next Steps

Test all endpoints in the dev environment
Create production database when ready: wrangler d1 create your-app-db-prod
Deploy to production: ./build.sh --deploy-prod

💡 INITIAL COMMIT

Let Claude Code (or your favorite LLM) transform your idea into working code.

The LLM-First Development Approach

This template is optimized for LLM-assisted development. Here's the proven workflow:

1. Define Your Problem Statement

Example prompt to Claude Code:

I want to build a task management app with the following features:
- Users can create, edit, delete tasks
- Tasks have: title, description, due date, priority, status
- Simple dashboard showing overdue/upcoming tasks
- User authentication with email/password

Please:
1. Create the database schema and first migration
2. Build basic CRUD API endpoints
3. Create a simple UI for task management
4. Add user authentication

2. Let LLM Build Your Foundation

Claude Code will:

✅ Create D1 migration files in migrations/
✅ Build API endpoints in src/routes/api/
✅ Create Svelte components and pages
✅ Set up authentication flows
✅ Add proper error handling and validation

3. Test Everything Locally

# Apply migrations to local database
npm run migrate:apply:local

# Start development server with D1 bindings
npm run dev:local-db

# Test your endpoints immediately
curl http://localhost:5173/api/tasks

4. First Deployment

# Create your Cloudflare databases
wrangler d1 create your-app-db-dev
wrangler d1 create your-app-db-prod

# Update wrangler.toml with database IDs
# Apply migrations to remote databases
npm run migrate:apply:dev
npm run migrate:apply:prod

# Deploy to development environment
npm run deploy:dev

# Test production-like environment
# Deploy to production when ready
npm run deploy:prod

🎯 Result: From problem statement to deployed app in 15-30 minutes!

🔄 ONGOING DEVELOPMENT

The modern development workflow optimized for rapid iteration and LLM collaboration.

The "Vibe Coding" Philosophy

Embrace experimentation. With this setup, trying ideas is cheap and abandoning failed branches is normal and healthy. The goal is to move fast and learn quickly.

Development Workflow

1. Create Feature Branch

git checkout -b feature/user-dashboard
# or
git checkout -b experiment/ai-task-suggestions
# or
git checkout -b fix/authentication-bug

2. LLM-Assisted Development

Typical conversation with Claude Code:

"Add a user dashboard that shows:
- Task completion stats for the last 30 days
- Upcoming deadlines this week
- A quick-add task form
- Recent activity feed

Make it look modern with good UX. Add any necessary API endpoints."

Claude Code will:

Create new API endpoints for dashboard data
Build responsive Svelte components
Add proper loading states and error handling
Update database schema if needed
Style with modern CSS

3. Rapid Local Testing

# Apply any new migrations
npm run migrate:apply:local

# Start development with hot reload
npm run dev:local-db

Everything works locally with real database:

✅ Test API endpoints with actual data
✅ UI updates instantly with HMR
✅ Database queries run against real D1
✅ Debug with browser dev tools

4. Automated UI Testing (MCP Playwright)

Ask Claude Code to test your features:

"Create Playwright tests that:
1. Sign up a new user
2. Create 5 tasks with different priorities
3. Mark some as complete
4. Verify dashboard shows correct stats
5. Test the quick-add task form"

Claude Code will generate and run comprehensive UI tests.

5. Deploy to Development Environment

# Apply migrations to dev database
npm run migrate:apply:dev

# Deploy to development environment
npm run deploy:dev

Get instant preview URL for stakeholder review.

6. Production Deployment

# Create Time Travel backup (automatic)
npm run migrate:apply:prod  # Includes backup + migration

# Deploy to production
npm run deploy:prod

Test in production environment with real traffic.

7. Commit & Push (or Abandon)

✅ Success Path:

git add .
git commit -m "Add user dashboard with stats and quick-add form

🚀 Generated with Claude Code
https://claude.com/claude-code

Co-Authored-By: Claude <[email protected]>"

git push origin feature/user-dashboard
# Create PR via GitHub CLI or web interface

❌ Abandon Failed Experiments:

# This approach didn't work out - no worries!
git checkout main
git branch -D experiment/ai-task-suggestions

# Try a different approach
git checkout -b experiment/better-ai-suggestions

🎯 Key Insight: Failed branches are learning opportunities, not wasted time.

Advanced Workflows

Database Schema Evolution

# Create new migration
./build.sh --migrate-create "add_task_categories"

# Ask Claude Code to populate the migration:
"Add a categories table with name, color, and icon fields.
Add a category_id foreign key to tasks table."

# Test locally
npm run migrate:apply:local
npm run dev:local-db

# Deploy when ready
npm run migrate:apply:dev
npm run migrate:apply:prod

Performance Optimization

Ask Claude Code:

"Optimize the dashboard API - it's getting slow with lots of tasks.
Add pagination, caching, and better database queries."

Emergency Rollback

# Check backup timestamps
npm run db:backup-info

# Rollback if something goes wrong (prod only)
./build.sh --migrate-rollback 1672531200

🎨 Why This Workflow Works

For Individual Developers:

⚡ Rapid prototyping - Ideas to working code in minutes
🧪 Safe experimentation - Easy to try and abandon approaches
🎯 Local testing - No deploy-to-test cycles
🤖 LLM amplification - Focus on product vision, not implementation details

For Teams:

📊 Clear environments - local/dev/prod with distinct purposes
🔒 Safe deployments - Time Travel backups for production
🔄 Consistent tooling - Same commands work for everyone
📚 Self-documenting - Code generation includes documentation

For Rapid Innovation:

🚀 Ship fast - From idea to production in hours
📈 Iterate quickly - Easy to modify and enhance features
🎯 Stay focused - Spend time on business logic, not infrastructure
🤝 LLM-native - Designed for AI-assisted development

📚 Key Commands Reference

Development

npm run dev                    # Standard development
npm run dev:local-db          # Local development with D1 bindings
npm run dev:reset-db          # Fresh local database + restart

Database Operations

./build.sh --migrate-create "description"  # Create migration
./build.sh --migrate-local                 # Apply to local DB
./build.sh --migrate-dev                   # Apply to dev environment
./build.sh --migrate-prod                  # Apply to prod (with backup)
./build.sh --migrate-status [local|dev|prod] # Check migration status

Deployment

npm run deploy:dev            # Deploy to development
npm run deploy:prod           # Deploy to production

Emergency Recovery

npm run db:backup-info        # View Time Travel backups
./build.sh --migrate-rollback TIMESTAMP # Rollback production DB

🌟 Philosophy: Embrace the Vibe

This template embodies "vibe coding" - a development philosophy optimized for the LLM era:

✅ DO:

Experiment freely with new branches
Ask LLMs to build entire features
Abandon approaches that don't work
Deploy frequently to get real feedback
Focus on user value over code perfection

❌ DON'T:

Overthink the perfect architecture upfront
Spend hours debugging instead of trying new approaches
Fear breaking things (Time Travel has your back)
Manually write boilerplate (let LLMs handle it)
Get attached to failed experiments

The goal: Maximum learning velocity and rapid value delivery.

📖 Documentation

CLAUDE.md - Complete development workflow and commands
VITE-PLUGIN-SETUP.md - Local development setup guide
D1-FUTURE-BEST-PRACTICES.md - Advanced patterns and monitoring

Happy coding! 🚀

Top categories