End to End React with Prisma 2
Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.
2. Configure Auth0
Objective: We want to set up all of our data models using Prisma 2 up front so we can use them across all our videos more easily.
First we need to configure our postgres database. We will be doing this with AWS, but there are many other ways you can set this up including Heroku, Google Cloud, Azure and even self hosted. If you chose to set it up a different way, just pick up after the database creation and you should be all set.
Create a .env
file:
.env
DATABASE_URL=postgresql://user:password@endpoint:5432/database_name
Add it to the .gitignore
file:
.gitignore
node_modules.next.env
Now let's add the prisma client and cli.
npm install --save-dev @prisma/clinpm install --save @prisma/client
In order to more easily use prisma, let's create several npm scripts. We will use generate
to update the local javascript library to reflect the models and types we define in our schema.prisma
file. We can prepare our database by first generating a migration with migrate:save
and then pushing it up to the database with migrate:up
.
package.json
json
"scripts": {"dev": "next","build": "next build","start": "next start","generate": "prisma generate","migrate:save": "prisma migrate save --experimental","migrate:up": "prisma migrate up --experimental"},
Now let's create our schema. We have 6 tables: Feed, Bundle, User, SavedArticle, BundleTag, FeedTag. We define the relations between them as either one-to-many or many-to-many (we don't have any one-to-one relations in our schema). For many-to-many relations, such as the Feed-Bundle relation we can just specify that by having Bundle[]
or Feed[]
as the type. For one-to-many relations, we have to give the schema a little more help. We can see in the case for Author-Feed relation that on the Feed
model we add the @relation(name: "FeedAuthor", fields: [authorId], references: [id])
and a field called authorId
while on the User
model we add @relation("FeedAuthor")
to help clarify the relation.
Note that these relations are a little tricky- I'd highly recommend installing the Prisma extension in VS Code because it will automatically set up these relations for us!
prisma/schema.prisma
datasource db {provider = "postgres"url = env("DATABASE_URL")}generator client {provider = "prisma-client-js"}model Feed {id String @idname Stringurl String @uniquebundles Bundle[]author User? @relation(name: "FeedAuthor", fields: [authorId], references: [id])authorId String?tags FeedTag[]likes User[] @relation(name: "FeedUserLikes")savedArticles SavedArticle[]}model Bundle {id String @idfeeds Feed[]name Stringdescription String @default("")author User? @relation(name: "BundleAuthor", fields: [authorId], references: [id])authorId String?tags BundleTag[]likes User[] @relation(name: "BundleUserLikes")}model User {id String @idauth0 String @uniquenickname String?picture String?bundles Bundle[] @relation("BundleAuthor")feeds Feed[] @relation("FeedAuthor")savedArticles SavedArticle[]feedLikes Feed[] @relation(name: "FeedUserLikes")bundleLikes Bundle[] @relation(name: "BundleUserLikes")}model SavedArticle {id String @idauthor User? @relation(fields: [authorId], references: [id])contents Jsonurl Stringfeed Feed @relation(fields: [feedId], references: [id])authorId String?feedId String}model BundleTag {id String @idname String @uniquebundles Bundle[]}model FeedTag {id String @idname String @uniquefeeds Feed[]}
Now we need to prepare our local prisma library based on our schema so we can have strong typesetting when we use our prisma object. Run the following npm command:
npm run generate
Now let's create a migration plan for upgrading our database to have this same schema. Run:
npm run migrate:save
Confirm yes you want to create the database name. Call the migration whatever you'd like. Finally, let's apply the migration:
npm run migrate:up