howto

Supabase Vercel Starter

lets clone the world

tags
supabase
vercel
nextjs
starter

Contents

I'm looking to build a bunch of apps, and am evaulating a bunch of the start kits out there. I know I want to use supabase and probably NextJS, so lets look at the base one that vercel supplies.

Preqs

Setup all the stuff on your machine if you don't have it.

1

  which pnpm

If not found, install pnpm.

1

  which docker

If not found, brew install --cask docker

1

  which supabase

If not found, brew install supabase/tap/supabase

1

  which cursor

If not found, brew install --cask cursor

Setup the environment

1
2

  pnpm create next-app --example with-supabase appname
  cursor .

Once this is open, create a .vscode/tasks.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

 {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "dev",
        "type": "shell",
        "command": "pnpm run dev", // or your specific dev command
        "isBackground": true,
        "problemMatcher": [],
        "presentation": {
          "reveal": "always",
          "panel": "new"
        },
        "runOptions": {
          "runOn": "folderOpen"
        }
      }
    ]
  }

The CMD-SHIFT-P, Run Tasks, and select dev which you just created.

CTRL-SHIFT-` to create a new terminal. Type

1

  supabase init

And then

1

  supabase start

This will take a while.

Setup local .env.development

1
2
3
4
5
6
7

  supabase status | \
      awk -F ": " '/API URL/ {print "NEXT_PUBLIC_SUPABASE_URL=" $2}' \
          >> .env.development

  supabase status | \
      awk -F ": " '/anon key/ {print "NEXT_PUBLIC_SUPABASE_ANON_KEY=" $2}' \
          >> .env.development

Accounts

Go to the signup page.

Create an account.

You will see you login details on the account page.

Go to the user page on the studio to see the new user account.

Go to the Inbox server to see the email that it sent.

Testing real emails

Lets sign up with resend because they give you a bunch of free emails, and we don't need that much.

First get an API key, and put it in .env.development

1

  RESEND_API_KEY=asdfasdf....

Go to Settings > SMTP

Inside of supabase/config.toml, find the auth.email.smtp section:

Change the outgoing email address to be something that resend will sent from, for example your email. I'm using the onboarding email test but you can use whatever you have verified.

1
2
3
4
5
6
7
8

  [auth.email.smtp]
  enabled = true
  host = "smtp.resend.com"
  port = 2465
  user = "resend"
  pass = "env(RESEND_API_KEY)"
  admin_email = "onboarding@resend.dev"
  sender_name = "Admin"

Everytime you make a change, be sure to

supabase stop and supabase start

Test data

1

  supabase migration new notes

And in the resultant file

1
2
3
4

  create table notes (
    id bigserial primary key,
    title text
  );

And then in seed.sql:

1
2
3
4
5

  insert into notes(title)
  values
    ('Today I created a Supabase project.'),
    ('I added some data and queried it from Next.js.'),
    ('It was awesome!');

Then

1

  supabase db reset

Deploy

Supabase Database

Create a new supabase project.

Save the password somewhere, like a password manager. Then link your local project to the main project:

1

  supabase link

You'll need the database password. Once the database is done being created, push the schema over:

1

  supabase db push

That will take a bit to load up.

Supabase email

On the supabase side header, go to Authentication. Select Emails and then SMTP Settings. Enter in your resend SMTP credentials

Supabase environment variables

Go into Connect in the header, slide over to app frameworks, and copy the NEXT_PUBLIC_SUPABASE_URL etc stuff to the clipboard.

Deploy to vercel

1

  gh repo create brokerscopre --private --source=. --remote=origin
1
2
3

  git add .
  git commit -m "Import"
  git push origin main

Then go to vercel.com and create a new project, importing it from that newly created repo.

Go to settings, environment, and then paste in the NEXT_PUBLIC_SUPABASE_URL stuff in there. Once it's added, then select Redeploy to have the changes go public.

Add supabase redirect urls

In the supabase dashboard,go into Authentication and then Configuration.

Change the siteurl to be your main url

Add in the redirect urls.

Test

Create a user.

Forgot password. Make sure that the redirectURL is working correctly.

Email rate limiting

Be sure to up the liits of how many emails you can send, it defaults to 2.

Conclusions

This is a good start kit. The saas-starter also has a lot of interesting code it it, but it does use supabase auth so it's less interesting to me.

My biggest take away here is that it's worth it to start looking at the commercial offerings.

Previously

labnotes

Using Github CLI

Maybe it’s faster, lets see

tags
github
git
gh

Next

fragments

No Snow 1948

birth of snowmaking

tags