Home

Awesome

SupaNuxt SaaS

SupaNuxt SaaS

Netlify Status

Demo Sites

Demo site here

Pottery Helper here

Community

Discord here

Tech Stack

Features

User Management

Schema and DB Management

Config Management and Env integration

Multi-Modal State Management

Multi User Accounts (Teams)

Plans and Pricing

Stripe (Payments) Integration

Support

Look and Feel, Design System and Customisation

GDPR

Demo Software (Notes)

Testing

Special Mention

This https://blog.checklyhq.com/building-a-multi-tenant-saas-data-model/ Article by https://twitter.com/tim_nolet was my inspiration for the user/account/subscription schema. Tim was also generous with his time and answered some of my stoopid questions on the https://www.reddit.com/r/SaaS/ Subreddit.

Architecture

The focus is on separation of concerns and avoiding vendor lock in.

Diagram

<img src="assets/images/technical_architecture.png">

Walkthrough

<img src="https://img.youtube.com/vi/AFfbGuJYRqI/hqdefault.jpg">

Tricky Decisions

Composition over options API - I have decided to use composition api and setup functions accross the board including components, pages and Pinia stores. I was resistant at first, especially with the stores as I was used to Vuex but have come to the conclusion that it is easier to go one approach all over. It's also the latest and greatest and folks don't like to use a starter that starts behind the cutting edge.

Prisma over Supabase API - I went with Prisma for direct DB access rather than use the Supabase client. This is Primarily to avoid lock-in with Supabase too much. Supabase is great but I thought burdening my users with a future situation where it's difficult to move off it wouldn't be very cool. Also, I really like how Prisma handles schema changes and updates to the client layer and types with just two bash commands, after using other approaches, I find this super smooth.

Trpc over REST - Primarily for full thickness types without duplication on the client. Also I think the remote procedure call paradigm works well. Note however that I still include a REST endpoint example for flexibility. My preference for mobile is Flutter and there is not a Trpc client for Flutter that i'm aware off so it was important for me to make sure REST works also.

Externals Setup

Things you gotta do that aren't code (and are therefore not very interesting)

Env

Copy the .env_example file to create .env Note) This file is for development convenience, is .gitignored by default and should not be added to source control

Supabase

This solution uses Supabase for Auth and to provide a DB. In addition to Magic Link and email/password login via Supabase, it also supports Google OAuth via Supabase.

  1. Go to Supabase and 'Start your Project'
  2. Setup your org and project (Free tier is fine to start)
  3. Update the project's email template (Supabase -> Authentication -> Email Templates) Note that the default Supabase email templates are very generic and for some reason, this can lead to your emails being sent to spam folders. for e.g. to get my password reset emails to my inbox, I needed to change the subject to "Password Reset for ..." and the email body text.
  4. Choose an OAuth provider. I have chosen Google using these Instructions for the purposes of demonstration but they all should work.
  5. Go to Project Settings -> API and copy Project URL and Project API Key to SUPABASE_URL and SUPABASE_KEY settings respectively in your .env file
  6. Go to Project Settings -> Database -> Connection String -> URI and copy the uri value into the DATABASE_URL setting in your .env file, remembering to replace [YOUR-PASSWORD] with the password you provided when you setup the project.

Stripe

This solution uses Stripe for Subscription payments.

  1. Go to Stripe and setup your business (Free Tier is fine to start)
  2. Create 2 products ('Team Plan' and 'Individual Plan') each with a single price and note the Product ID's and Price ID's
  3. Edit the seed.ts file and replace the stripe_product_id values with the Product ID's from 2)
    create: {
      name: 'Team Plan',
      .....
      stripe_product_id: '[Your Product ID from Stripe]'
    },
  1. Edit the Pricing pricing page and put your Price ID's from 2) into the appropriate hidden price_id form fields...
<input type="hidden" name="price_id" value="[Your Price ID from Stripe]" />

  1. go to the API Keys page find 'Secret Key' -> reveal test key. click to copy and then replace the STRIPE_SECRET_KEY value in your .env

  2. install the stripe cli used to forward webhooks (macos)

brew install stripe/stripe-cli/stripe
  1. log the CLI into your stripe account.
stripe login -i

provide the api key found in step 5) above

Setup Database (Prisma)

This solution uses Prisma to both manage changes and connect to the Postgresql database provided by Supabase. Your Supabase DB will be empty by default so you need to hydrate the schema and re-generate the local prisma client.

npx prisma db push
npx prisma generate
npm install @prisma/client --save-dev
npx prisma db seed

...you should now have a a Plan table with 3 rows and a bunch of empty tables in your Supabase DB

Developement Setup

Dependencies

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Webhook Forwarding

This makes sure that you can debug subscription workflows locally

stripe listen --forward-to localhost:3000/webhook

If you haven't already done so look at the stripe cli output for this text

Your webhook signing secret is whsec_xxxxxxxxxxxxx (^C to quit)

take ths signing secret and update the STRIPE_ENDPOINT_SECRET value in .env

Start the Server

Start the development server on http://localhost:3000

npm run dev

Running the Tests

There are a few unit tests, just for the stores because I needed to refactor. Feel free to extend the tests for your use cases, or not, it's your SaaS, not mine.

npm run test

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Going Live on Netlify

Where you host your SAAS is 100% your problem however :-

Steps (Assumes your repo is in github)

  1. Go to Netlify

  2. Log in with your github account (it's easier) and create an account (Free Tier is fine for now)

  3. Add a New Site -> Import from Existing Proect

  4. Choose your repo (You might need to Configure the Netlify app on GitHub) - Netlify auto-detects a nuxt app pretty good and the defaults it chooses seem to be fine.

  5. Setup environment variables per the .env_example file (SUPABASE_URL, SUPABASE_KEY....etc)

  6. Optionally change site name (e.g. mycoolsaas) or apply a domain name

  7. Go to Supabase

  8. Choose your project

  9. Go to URL Authentication -> URL Configuration -> Site URL

  10. enter your new netlify URL e.g. https://mycoolsaas.netlify.app/ and click 'save'

  11. Add the following additional redirect URLs for local development and deployment previews:

  1. If you haven't already done so, edit your Supabase Email templates as the generic ones tend to get blocked by GMail.

Netlify deployments and environment variables

Netlify is a bit rubbish at updating environment variables so you may need to manually re-deploy your site in certain situations e.g.

To manually redeploy to to your Netlify dashboard and navigate to Deploys -> Trigger Deploy -> Deploy site