DOCSEARCHbyAlgolia
Submit Docs

cmsaasstarter

repository·main·Indexed 25 days ago

https://github.com/scosman/cmsaasstarter

A high-performance, open-source SvelteKit boilerplate for building SaaS applications. It includes integrated authentication via Supabase Auth, Stripe-powered subscriptions and billing portals, a blog engine, and marketing tools. The stack utilizes TailwindCSS, DaisyUI, and is optimized for deployment on Cloudflare Pages and Workers.

Tokens
5.9K
Snippets
11
Records
31
Agent score
81%

What's inside cmsaasstarter

  1. SaaS Starter Overview

    main
    SaaS Starter is a feature-rich SvelteKit boilerplate designed for building SaaS applications. It provides a complete foundation including user authentication (Supabase Auth), marketing sites with SEO, a blog engine, user dashboards, Stripe-powered subscriptions, and a billing portal. The template is optimized for high performance (100/100 Google PageSpeed) using pre-rendering and edge-optimized deployment patterns.

  2. Tech Stack and Suggested Hosting

    main

    The project uses the following technologies:

    Core Stack:

    • Framework: SvelteKit
    • Styling: TailwindCSS and DaisyUI
    • Payments: Stripe Checkout and Stripe Portal

    Suggested Hosting (Free Tier):

    • Host + CDN: Cloudflare Pages
    • Serverless Compute: Cloudflare Workers
    • Authentication: Supabase Auth
    • Database: Supabase Postgres

    Note: The free tier is suitable for hobby projects or pre-revenue companies (up to ~50,000 monthly active users). For production with paid customers, a $30/mo tier (Supabase Pro + Cloudflare Workers Paid) is recommended to ensure database backups and prevent database pausing.

  3. Configure Git Hooks for Pre-commit Checks

    main

    To prevent committing code that breaks the build, formatting, or linting, you can add a local git hook. Create or edit the file at .git/hooks/pre-commit and add the following script. Ensure the hook file is executable.

    #!/bin/sh
# Run standard checks before committing
cd "$(dirname "$0")"
sh ../../checks.sh

  4. Run Developer Tools Locally

    main

    The repository includes a checks.sh script to manually run CI-style checks (build, formatting, linting, typechecking, and spell checking) on your local machine. This ensures your code meets the project's standards before pushing.

    Run the following commands:

    # first time only: chmod +x ./checks.sh
./checks.sh

  5. Set up email capabilities

    main

    To enable email functionality in the SaaS Starter, you must configure the following environment variables.

    Warning: The template includes a default welcome email that is automatically enabled once the Resend API key is set. You should customize or remove this email BEFORE setting these environment variables to avoid sending unbranded emails to your users.

    Required/Optional Environment Variables:

    • PRIVATE_RESEND_API_KEY: Your Resend API key. Note that you must verify your 'from' domain with Resend before use.
    • PRIVATE_ADMIN_EMAIL: The destination email address for admin notifications (e.g., new signups). If unset, admin emails will not be sent.
    • PRIVATE_FROM_ADMIN_EMAIL: The 'from' address used for admin emails. Defaults to the value of PRIVATE_ADMIN_EMAIL if not explicitly set.

  6. Deploy to Cloudflare Pages

    main

    The recommended deployment target is Cloudflare Pages.

    1. Follow Cloudflare's Git integration instructions.
    2. Select SvelteKit as the framework.
    3. Add the following production environment variables:
      • PUBLIC_SUPABASE_URL
      • PUBLIC_SUPABASE_ANON_KEY
      • PRIVATE_SUPABASE_SERVICE_ROLE
      • PRIVATE_STRIPE_API_KEY

  7. Add PostHog analytics

    main

    To integrate PostHog for event tracking, follow these steps:

    1. Install the library: Run npm install posthog-js in your terminal.
    2. Initialize in SvelteKit: Add the PostHog initialization code to the <script> section of src/routes/+layout.svelte. It is recommended to follow the PostHog Svelte Guide for the specific implementation details. Tip: Ensure you are logged into your PostHog dashboard when copying code to ensure your unique API key is included.
    3. Verify: Navigate through several pages on your local site and check your PostHog dashboard to confirm events are being captured.
    npm install posthog-js

  8. Customize Site Content and SEO

    main

    To brand the template with your own content:

    1. Site Identity: Set the name, description, and base URL in src/config.ts for SEO purposes.
    2. Blog:
      • Update metadata in src/routes/(marketing)/blog/posts.ts.
      • Replace post pages in src/routes/(marketing)/blog/posts to match the URLs defined in posts.ts.
      • To remove the blog, delete the src/routes/(marketing)/blog directory and remove links in the header/footer.
    3. SEO: Update title and meta description tags for every public page. Blog post SEO is handled automatically via posts.ts metadata.
    4. Dynamic Content Warning: If you add dynamic (server-side rendered) content to the marketing, pricing, or blog pages, you must set prerender = false in the corresponding +page.ts file.

  9. Setup Supabase Project

    main

    To use Supabase for authentication and database, follow these steps:

    1. Database Schema:
      • For new projects: Run the SQL from database_migration.sql in the Supabase SQL Editor.
      • For existing projects: Apply migrations from the supabase/migrations directory in chronological order via the SQL Editor.
    2. Authentication Configuration:
      • Enable user signups in the Supabase Auth settings.
      • Auth Callbacks: Set your default callback URL (e.g., https://yourdomain.com/auth/callback) and add it to the "allowed redirect URL" list. Include a wildcard version (e.g., https://yourdomain.com/auth/callback?*) to allow parameters. For local development, add http://localhost:5173/auth/callback and http://localhost:5173/auth/callback?*.
      • OAuth: Configure providers in the Supabase Auth console. Update the oauthProviders list in /src/routes/(marketing)/login/login_config.ts to match your chosen providers.
      • SMTP: Configure a custom SMTP provider to avoid the 4-email-per-hour limit on Supabase development servers.
    3. Environment Variables: Create a .env.local file with the following keys:
      • PUBLIC_SUPABASE_URL
      • PUBLIC_SUPABASE_ANON_KEY
      • PRIVATE_SUPABASE_SERVICE_ROLE
    PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
PRIVATE_SUPABASE_SERVICE_ROLE=your service_role secret

  10. Setup Stripe for Subscriptions

    main

    To integrate Stripe for billing, follow these steps:

    1. Products and Prices: Create products and prices in the Stripe Dashboard. It is recommended to define each tier (e.g., Free, Pro, Enterprise) as a separate product. Include both monthly and annual prices for each.
    2. Environment Variables: Add your Stripe Secret API key to PRIVATE_STRIPE_API_KEY in your .env.local (local) or Cloudflare environment (production).
    3. Pricing Plan Data: Align the app's pricing data with Stripe in /src/routes/(marketing)/pricing/pricing_plans.ts.
      • Fill in stripe_price_id and stripe_product_id for all paid plans.
      • Only one "free" plan should exist; it should omit the stripe_price_id.
      • Set defaultPlanId to the plan users see after signup (typically the free plan).
    4. Stripe Portal: In the Stripe Dashboard, configure the billing portal to disallow editing email under customer information (as the app handles this) and optionally set a custom domain.

  11. Customize the Welcome Email

    main

    The welcome email is sent to users when they create their profile. You can customize it by modifying three specific areas:

    1. Metadata: Edit properties like company name, 'from' email, and subject line in src/routes/(admin)/account/api/+page.server.ts within the sendTemplatedEmail function call.
    2. Plaintext Content: Edit src/lib/emails/welcome_email_text.hbs. Use triple braces {{{property}}} for variables in plaintext files.
    3. HTML Content: Edit src/lib/emails/welcome_email_html.hbs. Use double braces {{property}} for variables in HTML files. Ensure you update the address and preheader text.

    To disable the welcome email entirely, remove the sendTemplatedEmail call from src/routes/(admin)/account/api/+page.server.ts.