New SvelteKit course: fullstacksveltekit.com

Supabase + Drizzle

This recipe integrates Supabase with Drizzle in a SvelteKit application.

Live Demo

Technologies

How to use

First, start by cloning this folder. We will use tiged for cloning subdirectories in Git repositories.

code loading...

Next, install the dependencies:

pnpm i

Setup Supabase

Locally

Make sure you have Supabase CLI installed on your system, and run supabase login to log in to your Supabase account.

Run supabase init to create a new local project. This will add some configuration files to your project in the supabase directory and output some information about your project.

What we specifically need for this recipe is the DB_URL value, which is the URL to your local Postgres database.

Duplicate the .env.example file and rename it to .env , and update the SUPABASE_DB_URL value to the URL of your local Postgres database.

Remotely

Supabase offers a hosted free tier, which is sufficient for this recipe. To start, go to Supabase dashboard and create a new project.

You can now link your local project to the remote one using supabase link --project-ref .

Schema changes and migrations

Because we are using Drizzle Kit for migrations, we don't need to use Supabase built-in migrations feature.

You can run:

# Push the schema changes to the database  pnpm push:db

to directly push the schema changes to the database.

Or if you prefer having migrations files, you can run:

pnpm generate-migrations:db

to generate the migrations files and then run:

# Push the schema changes to the database (using migrations files)  pnpm migrate:db

to push the schema changes to the database.

Note:  The location where your schema changes are pushed to depends on the SUPABASE_DB_URL value in the .env file.

To grab your remote Supabase database URL, go to https://supabase.com/dashboard/project//settings/database to grab the database URI (make sure to check the “Use connection pooling” checkbox).

Other Recipes