🚀 SvelteKit + Hono + Cloudflare Workers

A modern, full-stack web application template combining the power of SvelteKit frontend with Hono API backend, optimized for deployment on Cloudflare Workers.

✨ Features

• 🔥 Lightning Fast - SvelteKit for optimal performance and developer experience
• 🌐 Global Edge Deployment - Cloudflare Workers for worldwide low-latency
• 🛠️ Type-Safe API - Hono with full TypeScript support and validation
• 🎨 Modern UI - TailwindCSS for beautiful, responsive design
• 🔧 Developer Experience - Hot reload, TypeScript, ESLint, Prettier
• 🚀 Production Ready - Optimized builds and edge-side caching
• 🔒 Environment Management - Secure variable handling for all environments
• 📊 Built-in Monitoring - Health checks and request logging

🏗️ Tech Stack

• Frontend: SvelteKit + Svelte 5
• Backend: Hono API framework
• Styling: TailwindCSS
• Platform: Cloudflare Workers + Pages
• Language: TypeScript
• Package Manager: pnpm

🚀 Quick Start

Prerequisites

• Node.js 18+ and pnpm installed
• Cloudflare account (for deployment)
• Wrangler CLI: npm install -g wrangler

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd sveltekit-hono
   

2. Install dependencies

   pnpm install
   

3. Set up environment variables

   cp .env.example .env.local
   

4. Start development server

   pnpm dev
   

5. Open your browser Visit http://localhost:5173

🛠️ Development

Available Scripts

Development Workflows

For Frontend Development:

pnpm dev  # Fastest hot reload, recommended for UI work

For Full-Stack with Cloudflare Simulation:

pnpm dev:cf  # Test with Cloudflare Workers environment

🌐 API Endpoints

The Hono API provides the following endpoints:

Example API Usage

// Fetch users
const response = await fetch('/api/users');
const { users } = await response.json();

// Create user
const newUser = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'John Doe', email: '[email protected]' })
});

📁 Project Structure

├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Main demo page
│   │   ├── +layout.svelte        # App layout
│   │   └── api/
│   │       └── [...paths]/
│   │           └── +server.ts     # Hono API server
│   ├── lib/
│   │   └── env.ts                # Environment configuration
│   ├── models/
│   │   └── user.model.ts         # TypeScript models
│   ├── types/
│   │   └── health.ts             # Type definitions
│   ├── app.html                  # HTML template
│   └── app.css                   # Global styles
├── static/                       # Static assets
├── wrangler.toml                 # Cloudflare Workers config
├── svelte.config.js              # SvelteKit configuration
├── vite.config.ts                # Vite configuration
└── DEVELOPMENT.md                # Detailed development guide

🚀 Deployment

Cloudflare Workers Deployment

1. Login to Cloudflare

   wrangler login
   

2. Deploy to development

   pnpm deploy
   

3. Deploy to production

   pnpm deploy:cf
   

Environment Variables

Configure your environment variables in:

• Local development: .env.local
• Cloudflare Workers: wrangler.toml

# wrangler.toml
[vars]
ENVIRONMENT = "development"

[env.production.vars]
ENVIRONMENT = "production"

🔧 Configuration

Environment Variables

# .env.local
ENVIRONMENT=development
API_BASE_URL=http://localhost:5173/api
CF_PAGES_URL=https://localhost:8787

Cloudflare Workers

The application is optimized for Cloudflare Workers with:

• Global Edge Deployment - Ultra-low latency worldwide
• Automatic HTTPS - SSL certificates handled automatically
• Static Asset Optimization - CDN-cached static files
• Serverless Functions - API routes as Cloudflare Workers

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📚 Documentation

• DEVELOPMENT.md - Comprehensive development guide
• SvelteKit Docs - SvelteKit documentation
• Hono Docs - Hono API framework docs
• Cloudflare Workers Docs - Deployment platform docs

🐛 Troubleshooting

Common Issues

API routes not working in production?

• Check wrangler.toml configuration
• Ensure all HTTP methods are exported in +server.ts

Environment variables not accessible?

• Client-side vars must be prefixed with PUBLIC_
• Server-side vars must be configured in wrangler.toml

Build errors?

• Run pnpm check for TypeScript validation
• Check all imports and dependencies

For more troubleshooting tips, see DEVELOPMENT.md.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Show your support

Give a ⭐️ if this project helped you!

Built with ❤️ using SvelteKit, Hono, and Cloudflare Workers