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/cli
    npm 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 @id
    name String
    url String @unique
    bundles 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 @id
    feeds Feed[]
    name String
    description String @default("")
    author User? @relation(name: "BundleAuthor", fields: [authorId], references: [id])
    authorId String?
    tags BundleTag[]
    likes User[] @relation(name: "BundleUserLikes")
    }
    model User {
    id String @id
    auth0 String @unique
    nickname 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 @id
    author User? @relation(fields: [authorId], references: [id])
    contents Json
    url String
    feed Feed @relation(fields: [feedId], references: [id])
    authorId String?
    feedId String
    }
    model BundleTag {
    id String @id
    name String @unique
    bundles Bundle[]
    }
    model FeedTag {
    id String @id
    name String @unique
    feeds 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