CMSaasStarter
A modern SaaS template/boilerplate built with SvelteKit, Tailwind, and Supabase. Includes marketing page, blog, subscriptions, auth, user dashboard, user settings, pricing page, and more.
Install / Use
/learn @scosman/CMSaasStarterREADME
SaaS Starter: A SvelteKit Boilerplate/Template
- Feature Rich: user auth, user dashboard, marketing site, blog engine, billing/subscriptions, pricing page, search, emails, and more.
- Lightning Performance: fast pre-rendered pages which score 100/100 on Google PageSpeed.
- Delighful Developer Experience: tools you'll love working with, including SvelteKit, Tailwind, DaisyUI, Postgres, and Supabase.
- Extensible: all the tools you need to make additional marketing pages, UI components, user dashboards, admin portals, database backends, API endpoints, and more.
- Hosting: Our suggested hosting stack is free to host, cheap to scale, easy to manage, and includes automatic deployments.
- MIT Open Source
- Fully Functional Demo
- Quick Start: Full docs from
git cloneto deployment.
Created by the folks at Kiln AI! It's the easiest tool for fine-tuning LLM models, synthetic data generation, and collaborating on datasets. The Kiln app was built with SaaS Starter!
Kiln AI Rapid AI Prototyping and Dataset Collaboration Tool
Demo
You can explore all the features using our fully functional demo saasstarter.work.
See criticalmoments.io and getkiln.ai for examples of what’s possible after this template has design, content, and functionality added.
<a href="https://saasstarter.work"> <kbd> <img width="500" alt="homepage" src="https://github.com/CriticalMoments/CMSaasStarter/assets/848343/34944c09-df72-4ac2-9099-01d25d99911b"> </kbd> <br> <kbd> <img width="200" alt="pricing page" src="https://github.com/CriticalMoments/CMSaasStarter/assets/848343/c3cb2ab7-3739-473e-a1fe-f82a4a31e844"> </kbd><kbd> <img width="200" alt="settings page" src="https://github.com/CriticalMoments/CMSaasStarter/assets/848343/2d947c97-3cc7-4ff5-a5b1-7c8478b6f31a"> </kbd><kbd> <img width="200" alt="payments portal" src="https://github.com/CriticalMoments/CMSaasStarter/assets/848343/0c4749c3-0d29-4edc-ae87-d8a4eefea3c9"> </kbd> </a>Features
Everything you need to get started for a SaaS company:
- User Authentication: Sign up, sign out, forgot password, email verification, and oAuth. Powered by Supabase Auth. GDPR cookie warning for European users.
- Marketing Page with SEO optimization and Sitemap
- Blog engine with rich formatting, RSS and SEO optimization.
- User Dashboard with user profile, user settings, update email/password, billing, and more
- Subscriptions powered by Stripe Checkout
- Pricing page
- Emails: send emails to users, including template support
- Search: lightning fast site search, without a backend
- Contact-us form
- Billing portal: self serve to change card, upgrade, cancel, or download receipts
- Onboarding flow after signup: collect user data, and select a payment plan
- Style toolkit: theming and UI components
- Responsive: designed for mobile and desktop.
- Extensible: all the tools you need to make additional marketing pages, UI components, admin portals, database backends, API endpoints, and more.
Introduction Blog Post
Want to learn why we picked the technologies we did, and how to keep your fork lightning fast as you add content? Check out our blog post on the process. Yes, it's hosted on a SaaS Starter fork!
Tech Stack
- Web Framework: SvelteKit
- CSS / Styling
- Framework: TailwindCSS
- Component library: DaisyUI
- Suggested Hosting Stack
- Host + CDN: Cloudflare Pages
- Serverless compute: Cloudflare Workers
- Authentication: Supabase Auth
- Database: Supabase Postgres
- Payments
- Stripe Checkout
- Stripe Portal
Suggested Hosting Stack
There’s no cost for using this template. The costs below reflect our suggested hosting stack.
- $0/mo — Supabase free tier, Cloudflare free tier.
- Pros:
- Free!
- Can scale to thousands of users.
- Unlimited static page requests.
- 100k serverless functions/day.
- Cons:
- Does not include database backups. The frugal among you could hook up pgdump backups on lambda/S3 for a few cents per month.
- Will auto-pause your database when not in use for 7 days.
- Who it’s for:
- This tier is perfectly functional for a hobby project, or pre-revenue company (up to 50,000 monthly active users). It’s easy to scale up once revenue starts, but it’s also fine to keep at this scale indefinitely.
- Pros:
- $30/mo - Supabase Pro, Cloudfare Workers Paid
- Pros:
- Database backups.
- Never pauses database.
- Over 1M serverless functions per day, with linear pricing for additional invocations.
- Cons:
- none
- Who it’s for:
- I suggest moving to this once you have paid customers or investors.
- Pros:
Performance / Best Practices
The selected tech stack creates lightning fast websites.
- Pre-rendering (static generation) for marketing pages, pricing and blog
- Instant navigation: the best of CSR + SSR in one. SSR your first page for fastest possible initial load times. For subsequent pages, the content is pre-loaded and rendered with CSR, for instant rendering.
- CDN optimized, for high edge-cache hit ratios
- Edge-functions for dynamic APIs/pages
- Svelte and Tailwind compile out unused HTML, CSS and JS at deploy time for smaller pages
- Linting to find accessibility and syntax issues
The result is a perfect Google PageSpeed Insights score in all categories!
<img width="420" alt="Screenshot 2024-01-18 at 11 31 32 AM" src="https://github.com/CriticalMoments/CMSaasStarter/assets/848343/46b5e960-2aa0-4fb5-acd7-4f84b380e1d0">Quick Start
Create a Copy of the Template
To get started, create your own copy of the project for development. There are two options:
- "Use this template": use this Github button if you want to build your own project using CMSaasStarter as a starter template and you aren't planning on contributing work back to the public open source project. See Github Docs.
- "Fork": use this button if you want contribute some or all of your work back to the public open source project. It will keep the full commit history, and be easier to create PRs back to CMSaasStarter.
Setup Local Development
On your development machine:
git pull [Your Repo Created Above]
cd CMSaasStarter ## or your repo 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
Note: some features won't work until you complete the rest of the setup steps below!
Developer Tools
The repo includes CI scripts designed for GitHub Actions. These confirm you don’t break your build, you use proper code formatting, code linting and typechecking passes, and even spell checking.
Enabling GitHub Actions
Github disables CI on new forks by default, so be sure to go into the Github Actions page for your repo and enable workflows.
Running Developer Tools Locally
To manually run all these tools run the following script. You can view it's contents for individual commands.
# first time only: chmod +x ./checks.sh
./checks.sh
Running Developer Tools in your IDE
Installing extensions in your editor can automatically format-on-save, show linting/type issues inline, and run your test cases:
- Svelte for Svelte and accessibility issues: VSCode or other editors
