Getting Started

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.


1

Setup your new Supabase Project

Create a new project in the Supabase Dashboard.

New project for redwoodjs

2

Gather Database Connection Strings

Go to the database settings page. In this quickstart, we are going to connect via the connection pooler. If your network supports IPv6, you can connect to the database directly without using the connection pooler.

We will use the pooler both in Transaction and Session 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 setup environment variables in Step 5.

pooled connection for redwoodjs

3

Create a RedwoodJS app

Create a RedwoodJS app with TypeScript.

Terminal

_10
yarn create redwood-app my-app --ts

4

Open your RedwoodJS app in VS Code

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

Terminal

_10
cd my-app
_10
code .

5

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 1.

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

.env

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

6

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

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

7

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

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

8

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

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

9

Seed your database

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

Terminal

_10
yarn rw prisma db seed

10

Scaffold the Country UI

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

Terminal

_10
yarn rw g scaffold country

11

Start the app

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

RedwoodJS Splash Page

12

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.

RedwoodJS Splash Page