SvelteKit SaaS Starter

🚧 This project is still under development. 🚧

Introduction

Bootstrap your next SaaS project with this SvelteKit template. 🚀

🌍 Live: https://kit-saas-starter.pages.dev/

Entirely hosted on Cloudflare. Why?

1. They have a generous free tier. For real.
2. Deploying is really easy and they have a great support.
3. A lot of built-in tools, like D1 (database), R2 (storage), cache, DNS ecc.
4. It's easy to get out, if you want, because egress costs are the lowest among the competitors.

Features

❤️ SvelteKit - Full stack JS meta framework

🪶 Drizzle ORM - Next gen, lightweight TypeScript ORM.

🛆 Lucia - A fully typed auth library

💅🏻 Tailwind CSS + Bits UI + shadcn-svelte - For styling

⚡ formsnap + sveltekit-superforms + zod = Amazing forms

🌀 lucide - Beautiful and simple icons

🌲 pino - Logging for client and server side

🪂 Paraglide JS - i18n

🔄 @total-typescript/ts-reset - A 'CSS reset' for TypeScript, improving types for common JavaScript API's

🛣️ vite-plugin-kit-routes - Fully typed routes!

How to use

Clone this repo with

pnpm dlx degit --mode=git yverek/kit-saas-starter my-project
cd my-project
pnpm install
cp wrangler.example.toml wrangler.toml

Go to Cloudflare and deploy this project.

Log in with your Cloudflare account by running:

pnpm exec wrangler login

Now create your D1 database with

$ pnpm exec wrangler d1 create my-db-prod

✅ Successfully created DB "my-db-prod"

[[d1_databases]]
binding = "DB"
database_name = "my-db-prod"
database_id = "<unique-ID-for-your-database>"

Go to wrangler.toml and change database_name and database_id.

Go to drizzle.config.ts and change dbName.

Go to package.json and change dbName in drizzle:push:dev and drizzle:push:prod.

pnpm drizzle:push:dev

Now, you can run

pnpm dev

# or start the server and open the app in a new browser tab
pnpm dev -- --open

Testing

Install Playwright testing tools with

pnpm exec playwright install

Run

pnpm test

Deploy

Just migrate schema to production database

pnpm drizzle:push:prod