DEV Community

Cover image for Adding Prisma to Remix
Chris Bongers
Chris Bongers

Posted on • Originally published at

Adding Prisma to Remix

As you might know, I'm a big fan of Prisma, and since we choose the indie stack when we set up our Remix project, it already comes with Prisma.

Setting up Postgres in Remix

Since it already comes with Prisma installed, we can find the schema over in prisma/schema.prisma file.

Inside this, let's add the most basic post setup.
And while we are here, change the data source to Postgres.

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")

model Post {
  slug     String @id
  title    String
  content  String

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
Enter fullscreen mode Exit fullscreen mode

Now open your .env file and the correct DATABASE_URL to your Prisma database instance.

For me it looks like this:

Enter fullscreen mode Exit fullscreen mode

Once you setup, run the following command to create the database.

npx prisma db push
Enter fullscreen mode Exit fullscreen mode

We should have the database populated and visible in our database client.

Database Postgres

Changing our model to Postgres

So far, our model has been using the plain JSON file we had set up locally.
Let's change it to be loaded from the Postgres database.

Open up the app/models/post.server.ts file and modify it to look like this.

import { prisma } from '~/db.server';

export async function getPosts() {

export async function getPost(slug: string) {
  return{ where: { slug } });
Enter fullscreen mode Exit fullscreen mode

This makes it way cleaner as well.

Note: Go ahead and add a post to your database. Either use the Prisma seeder or manually add one.

Now when we run our app, we don't have to make any other changes, and it will simply reflect this new data source!

A match made in heaven: Remix ❤️ Prisma.

If you want to see the completed code, it's hosted here on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (2)

dailydevtips1 profile image
Chris Bongers

Spam link do not follow, user reported