Use Supabase with RedwoodJS

1. Setup your new Supabase project#

Create a new project in the Supabase Dashboard.

2. Gather database connection strings#

Open the project Connect panel. This quickstart connects using the Transaction pooler and Session pooler mode. Transaction mode is used for application queries and Session mode is used for running migrations with Prisma.

To do this, set the connection mode to Transaction in the Database Settings page and copy the connection string and append ?pgbouncer=true&connection_limit=1. pgbouncer=true disables Prisma from generating prepared statements. This is required since our connection pooler does not support prepared statements in transaction mode yet. The connection_limit=1 parameter is only required if you are using Prisma from a serverless environment. This is the Transaction mode connection string.

To get the Session mode connection pooler string, change the port of the connection string from the dashboard to 5432.

You will need the Transaction mode connection string and the Session mode connection string to set up environment variables in Step 4.

3. Create a RedwoodJS app#

Create a RedwoodJS app with TypeScript.

1
yarn create redwood-app my-app --ts

4. Configure environment variables#

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

• The DATABASE_URL should use the Transaction mode connection string you copied in Step 2.

• The DIRECT_URL should use the Session mode connection string you copied in Step 2.

1
# Transaction mode connection string used for migrations
2
DATABASE_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
3
4
# Session mode connection string — used by Prisma Client
5
DIRECT_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:5432/postgres"

5. Update your Prisma schema#

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

Update your Prisma schema file api/db/schema.prisma to use your Supabase Postgres database connection environment variables you set up in Step 4.

1
datasource db {
2
  provider  = "postgresql"
3
  url       = env("DATABASE_URL")
4
  directUrl = env("DIRECT_URL")
5
}

6. Create the instrument model and apply a schema migration#

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

1
model Instrument {
2
  id   Int    @id @default(autoincrement())
3
  name String @unique
4
}

7. Update seed script#

Seed the database with a few instruments.

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

1
import type { Prisma } from '@prisma/client'
2
import { db } from 'api/src/lib/db'
3
4
export default async () => {
5
  try {
6
    const data: Prisma.InstrumentCreateArgs['data'][] = [
7
      { name: 'dulcimer' },
8
      { name: 'harp' },
9
      { name: 'guitar' },
10
    ]
11
12
    console.log('Seeding instruments ...')
13
14
    const instruments = await db.instrument.createMany({ data })
15
16
    console.log('Done.', instruments)
17
  } catch (error) {
18
    console.error(error)
19
  }
20
}

8. Seed your database#

Run the seed database command to populate the Instrument table with the instruments you created.

1
yarn rw prisma db seed

9. Scaffold the instrument UI#

Use RedwoodJS generators to scaffold a CRUD UI for the Instrument model.

1
yarn rw g scaffold instrument

10. Start the app#

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

11. View instruments UI#

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

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