Home

Awesome

<img alt="SaaS Kit logo" src="./static/images/logo@512.png" width="64" height="64">

SaaS Kit

Build Format Check Linting License

SaaS Kit is an open-source, fast, and free to host SaaS template / boilerplate

Based on CriticalMoments/CMSaasStarter by the folks at Critical Moments!

Make mobile apps? Improve conversion rates and ratings with Critical Moments.

(I'm not affiliated with Critical Moments, but I love their work and wanted to make it easier for others to use their template.)

Features

Everything you need to get started for a SaaS company:

Tech Stack

Suggested Hosting Stack

There’s no cost for using this template. The costs below reflect our suggested hosting stack.

Performance / Best Practices

The selected tech stack creates lightning fast websites.

Quick Start

Get Started (Local Development)

This repo is a template, so you can click the green "Use this template" button on Github to create your own repo with this code. Then clone your repo locally and follow these steps:

## First fork the project on Github
git clone <your-repo-from-this-template>
cd <your-repo-dir> ## or your fork name if different
npm install
## Create an env file. You'll replace the values in this in later steps.
cp .env.example .env.local
## Run the project locally in dev mode, and launch the browser
npm run dev -- --open

Developer Environment

The repo includes CI scripts designed for GitHub Actions. These confirm you don’t break your build, you use proper code formatting, and code linting and typechecking passes.

You can manually run these scripts yourself; npm run build for the build, npm run format:check to check formatting, npm run lint for the linting, npm run check for typechecking, and npm run test for testing (if you add tests).

If you're using VSCode, go to the extensions tab and install the recommended extensions. Those should be:

To catch build, formatting, linting and test issues before you commit changes, we suggest the following local git hook. It will run before you commit, stop you from breaking the build, and show any issues that are found. Add the lines below to an executable git hook script at the location .git/hooks/pre-commit.

#!/bin/sh
set -e
npm run format:check
npm run lint
npm run build
npm run check
npm run test

Finally: if you find build, formatting or linting rules too tedious, you can disable enforcement by deleting the CI files (.github/workflows/*) and remove the git hook (.git/hooks/pre-commit).

Setup Supabase

Local Development

This repo is ready to run locally with Supabase CLI. Supabase CLI is installed locally after running npm install above.

Having Docker Desktop installed is the only prerequisite for using Supabase CLI. Make sure Docker Desktop is running before running the commands below.

To start Supabase locally run:

npx supabase start

"This takes time on your first run because the CLI needs to download the Docker images to your local machine. The CLI includes the entire Supabase toolset, and a few additional images that are useful for local development (like a local SMTP server and a database diff tool)." [1]

[1] https://supabase.com/docs/guides/cli/getting-started?queryGroups=platform&platform=npm#running-supabase-locally

Now you can access your local Supabase Studio dashboard at http://localhost:54323.

At the end of the starting process, Supabase CLI will output values you'll need to set in your .env.local file for local development. You can also print this information at any time by running npx supabase status.

npx supabase status -o env --override-name api.url="PUBLIC_SUPABASE_URL" --override-name auth.anon_key="PUBLIC_SUPABASE_ANON_KEY" --override-name auth.service_role_key="PRIVATE_SUPABASE_SERVICE_ROLE"

See /supabase/config.toml for the local Supabase configuration. Here is a list of settings you'll probably want to change in the default configuration:

As a next step, you'll apply the initial database migration to your local Supabase instance:

npx supabase db reset

Going to Production

To start you'll need at least a free Supabase account and a Supabase project created for your app.

After you have your account, you can login with the CLI:

npx supabase login

Follow the instructions from the CLI to authenticate with your Supabase account.

Next, you can proceed to link your local Supabase project to your hosted Supabase project. This will allow you to deploy your local database schema to your hosted project.

npx supabase link

Follow the instructions from the CLI to link your local project to your hosted project.

Finally, you can deploy your local database schema to your hosted project.

npx supabase db push

Setup Stripe Billing

Deploy To Cloudflare

Cloudflare Pages and Workers is one of the most popular options for deploying SvelteKit and we recommend it. Follow Cloudflare’s instructions to deploy in a few clicks. Be sure to select “SvelteKit” as framework, and the rest of the defaults will work.

When prompted: add environment variables for your production environment (PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, PRIVATE_SUPABASE_SERVICE_ROLE, and PRIVATE_STRIPE_API_KEY).

Optional: enable Cloudflare Analytics for usage metrics.

If you prefer another host you can explore alternatives:

Add your content!

After the steps above, you’ll have a working version like the demo page. However, it’s not branded, and doesn’t have your content. The following checklist helps you customize the template to make a SaaS homepage for your company.