SvelteKit Saas Boilerplate

A SvelteKit boilerplate project for a Software As A Service (SaaS) application, to get you started quickly.

Developing

After you have cloned the repository you can install the dependencies with npm install, and start a development server:

npm run dev

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

An example .env file is provided in the repository. You will need to copy .env.example to .env and fill in the values with your own credentials.

Local DB Development

Ensure you have Docker installed on your development machine.

You can start and stop the local DB environment with:

npx supabase start

npx supabase stop

Generate schema types (Typescript)

npx supabase gen types typescript --local > ./src/lib/db_schema.ts

The overarching Database type is used for a generic SupabaseClient. This is set globally in src/app.d.ts

import { SupabaseClient } from '@supabase/supabase-js'
import { Database } from '$lib/db_schema'

declare global {
  namespace App {
    interface Locals {
      supabase: SupabaseClient<Database>
      ...
    }
  }
}

Migrations

There are two options to create a migration file:

1. Writing the SQL manually

   • Create new blank migration file

     npx supabase migration new <migration_name>
     

   • Add the SQL you want to deploy as part of the migration e.g.

     create table
     employees (
     id bigint primary key generated always as identity,
     name text,
     email text,
     created_at timestamptz default now()
     );
     

   • Reset the DB and apply the latest migrations

     supabase db reset
     

2. Generate SQL based on differences to the schema

   • With the local DB running, enter the studio and make your changes to the schema

   • Generate the migration file containing the SQL with the differences in the schema

     npx supabase db diff -f <migration_name>
     

Building

To create a production version:

npm run build

You can preview the production build with npm run preview.

Hosting and Tech Stack

This application is designed to run on Netlify and uses Supabase for database storage and user authentication (Supabase Auth).

The application is written in Typescript using the SvelteKit framework.

For styling, the application uses Tailwind CSS with the DaisyUI component library and HyperUI.

For taking payments the Stripe Checkout is used.

In its current configuration, the application can be easily linked to Netlify via git for CI/CD, enabling automatic deployments on push to the main branch.

To Do

Please see the Issues tab for enhancement tagged issues.