sveltekit-d1-tailwindcss-template

A modern web application template combining SvelteKit, Cloudflare D1 Database, and TailwindCSS for rapid development of performant, full-stack applications.

Features

• 🚀 SvelteKit - Full-stack application framework
• 💾 Cloudflare D1 - SQLite-compatible database on the edge
• 🎨 TailwindCSS - Utility-first CSS framework
• ✅ Type-safe database operations
• 📱 Responsive design out of the box
• 🧪 Testing setup with Vitest
• 📚 JSDoc documentation

Prerequisites

• Node.js (version 16 or higher)
• Cloudflare account
• Wrangler CLI installed globally (npm install -g wrangler)

Getting Started

1. Create a new project using this template:

   npx create-next-app my-app -e https://github.com/kcbrewron/sveltekit-d1-tailwindcss-template
   cd my-app
   

2. Install dependencies:

   npm install
   

3. Set up your D1 database:

   wrangler d1 create my-db
   

4. Update the wrangler.toml with your D1 database details.

5. Run the development server:

   npm run dev
   

Project Structure

├── migrations/       # Database migration files
├── src/
│   ├── lib/         # Shared components and utilities
│   ├── routes/      # SvelteKit routes and pages
│   └── app.css      # Global styles
├── static/          # Static assets
└── tests/           # Test files

Database Migrations

To run migrations:

npm run migrate

Deployment

1. Build the application:

   npm run build
   

2. Deploy to Cloudflare Pages:

   wrangler pages deploy .svelte-kit/cloudflare
   

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run test - Run tests
• npm run check - Type-check the codebase
• npm run lint - Lint the codebase

Environment Variables

Create a .env file in the root directory:

DATABASE_URL=your_d1_database_url

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

License

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

Acknowledgments

• SvelteKit Documentation
• Cloudflare D1 Documentation
• TailwindCSS Documentation