Use Supabase with RedwoodJS

Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.

Setup your new Supabase Project

Create a new project in the Supabase Dashboard.

important

Be sure to make note of the Database Password you used as you will need this later to connect to your database.

Gather Database Connection Strings

After your project is ready, gather the following information about your database connections:

Connection String (port 5432)
Connection Pooling / Connection String (port 6543)

You will need these to setup environment variables in Step 5.

tip

You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps.

Create a RedwoodJS app

Create a RedwoodJS app with TypeScript.

note

The yarn package manager is required to create a RedwoodJS app. You will use it to run RedwoodJS commands later.

While TypeScript is recommended, If you want a JavaScript app, omit the --ts flag.

Terminal

yarn create redwood-app my-app --ts

Open your RedwoodJS app in VS Code

You'll develop your app, manage database migrations, and run your app in VS Code.

Terminal

cd my-app
code .

Configure Environment Variables

In your .env file, add the following environment variables for your database connection:

The DIRECT_URL should use the Connection String from your Supabase project. Hint: the port is 5432.
The DATABASE_URL should use the Connection Pooling / Connection String from your Supabase project. Hint: the port is 6432.

note

Be sure to append ?pgbouncer=true to the end of the DATABASE_URL connection string. Also, replace [YOUR-PASSWORD] and [YOUR-PROJECT-REF] with the password you used when creating your Supabase project and the project reference from the URL in your browser.

.env

# PostgreSQL connection string used for migrations
DIRECT_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
# PostgreSQL connection string with pgBouncer config — used by Prisma Client
DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:6543/postgres?pgbouncer=true"

Update your Prisma Schema

By default, RedwoodJS ships with a SQLite database, but we want to use PostgreSQL.

Update your Prisma schema file api/db/schema.prisma to use your Supabase PostgreSQL database connection environment variables you setup in Step 5.

api/prisma/schema.prisma

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

Create the Country model and apply a schema migration

Create the Country model in api/db/schema.prisma and then run yarn rw prisma migrate dev from your terminal to apply the migration.

api/db/schema.prisma

model Country {
  id   Int    @id @default(autoincrement())
  name String @unique
}

Update seed script

Let's seed the database with a few countries.

Update the file scripts/seeds.ts to contain the following code:

scripts/seed.ts

import type { Prisma } from '@prisma/client'
import { db } from 'api/src/lib/db'
export default async () => {
  try {
    const data: Prisma.CountryCreateArgs['data'][] = [
      { name: 'United States' },
      { name: 'Canada' },
      { name: 'Mexico' },
    ]
    console.log('Seeding countries ...')
    const countries = await db.country.createMany({ data })
    console.log('Done.', countries)
  } catch (error) {
    console.error(error)
  }
}

Seed your database

Run the seed database command to populate the Country table with the countries you just created.

tip

The reset database command yarn rw prisma db reset will recreate the tables and will also run the seed script.

Terminal

yarn rw prisma db seed

Scaffold the Country UI

Now, we'll use RedwoodJS generators to scaffold a CRUD UI for the Country model.

Terminal

yarn rw g scaffold country

Start the app

Start the app via yarn rw dev. A browser will open to the RedwoodJS Splash page.

View Countries UI

Click on /countries to visit http://localhost:8910/countries where should see the list of countries.

You may now edit, delete, and add new countries using the scaffolded UI.

Edit this page on GitHub