How to use Supabase with Prisma?

 

Step 1: Initialize a Supabase Project

 

First, create a new project on the Supabase website:

• Go to the Supabase website.
• Log in or sign up for an account.
• Click on the "New Project" button.
• Fill in the required project information:
• Project Name
• Database Password
• Region
• Click "Create" to initialize the project.

After your project is set up, you will be redirected to the project dashboard, where you can find the API URL and API Key in the "API" section.

 

Step 2: Set Up a Node.js Project

 

Set up a new Node.js project on your local machine:

• Open your terminal or command prompt.
• Create a new directory for your project and navigate into it:

mkdir supabase-prisma-tutorial
cd supabase-prisma-tutorial

• Initialize the Node.js project with npm:

npm init -y

 

Step 3: Install Dependencies

 

You'll need to install the necessary packages for Prisma and connect it to Supabase:

npm install @prisma/client prisma @supabase/supabase-js

 

Step 4: Initialize Prisma

 

Set up Prisma in your Node.js project:

• Run the Prisma init command:

npx prisma init

This will create a prisma directory with a schema.prisma file.

• Open schema.prisma and configure it to connect to your Supabase database. Replace the DATABASE_URL in the .env file with the connection string from the Supabase dashboard. The format should look like this:

DATABASE\_URL="postgresql://username:password@host:port/database"

 

Step 5: Define Your Data Model

 

Define your Prisma data model inside schema.prisma. Here’s an example model:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}

 

Step 6: Migrate Your Database

 

With the data model defined, create the necessary tables in the Supabase database using a Prisma migration:

• Run the migration command:

npx prisma migrate dev --name init

This command will apply your schema to the database. Check the Supabase dashboard to ensure the tables are created.

 

Step 7: Generate Prisma Client

 

Generate the Prisma client to interact with your Supabase database using:

npx prisma generate

Now you can use Prisma in your application to query and manipulate your database.

 

Step 8: Create a Node.js Script

 

Create a script to test the Prisma client:

• Inside your project directory, create a file named index.js.
• Add the following code to connect to the database and perform a basic operation:

const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

async function main() {
  const post = await prisma.post.create({
    data: {
      title: 'Hello Supabase',
      content: 'This is our first post using Prisma with Supabase!',
    },
  });

  console.log(post);
}

main()
  .catch(e => {
    throw e;
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

• Run the script:

node index.js

If everything is set up correctly, a new post will be created in your Supabase database, and the details of the post will be logged to the console.