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.
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.
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.
yarn package manager is required to create a RedwoodJS app. You will use it to run RedwoodJS commands later.
Open your RedwoodJS app in VS Code
You'll develop your app, manage database migrations, and run your app in VS Code.
Configure Environment Variables
.env file, add the following environment variables for your database connection:
DIRECT_URLshould use the
Connection Stringfrom your Supabase project. Hint: the port is
DATABASE_URLshould use the
Connection Pooling / Connection Stringfrom your Supabase project. Hint: the port is
Be sure to append
?pgbouncer=true to the end of the
DATABASE_URL connection string.
[YOUR-PROJECT-REF] with the password you used when creating your Supabase project and the project reference from the URL in your browser.
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.
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.
Update seed script
Let's seed the database with a few countries.
Update the file
scripts/seeds.ts to contain the following code:
Seed your database
Run the seed database command to populate the
Country table with the countries you just created.
The reset database command
yarn rw prisma db reset will recreate the tables and will also run the seed script.
Scaffold the Country UI
Now, we'll use RedwoodJS generators to scaffold a CRUD UI for the
Start the app
Start the app via
yarn rw dev. A browser will open to the RedwoodJS Splash page.
View Countries UI
/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.