Check out a free preview of the full Introduction to Next.js 13+, v3 course

The "Prisma" Lesson is part of the full, Introduction to Next.js 13+, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott walks through the process of setting up a database using Prisma, a Node.js and TypeScript ORM. This segment also covers creating a schema for the todo items.


Transcript from the "Prisma" Lesson

>> Now, we're gonna set up all this stuff we need to actually create some to dues and pull our to dues into our app and stuff like that. In order to do that we need some type of storage, we can use a JSON file but it's so free and easy to set up a database these days.

So I figured we just set up a database and just get started with that, so let's just do that. My favorite way of doing that is using something called Prisma. If you've never heard of Prisma, it's basically just an ORM, a type-checked ORM. If you don't know what an ORM is, it's an SDK for a database.

That's literally it. It's an SDK for a database, Prisma, there's an SDK for many databases. So you can pick whatever database it supports and you still get the same code experience no matter what database you support. So you don't have to like, I need to know SQL for SQL or Postgres.

And whatever Mongo's query languages for Mongo or this thing for this. Nope, you just use Prisma and it works for every database. So it doesn't matter, it's pretty sick. So we're just gonna get started with that, best way to get started with prisma is just to npm install prisma.

We're gonna save that as a developer, a dev dependency, so save dev. And then another one is npm install @prisma/client at latest. That's not a dev dependency, so you can hit Enter on that. So just those two, prisma and then @prisma/client latest. Once you get those two installed, and then we just need to set up our database.

We'll just use SQLite, which is basically like SQL that's based off a file. So that way we're not like trying to go host a database somewhere and like and do all that, so. Once we have those two things installed, so Prisma and then Prisma client latest. We can just do something called mpx prisma innit, which is short for initialized and we can run that.

And it's just gonna tell us a bunch of stuff that we don't need to care about right now, but I'm just gonna walk you through what it did. Basically, what we got here now is on the root of our app, we should see a Prisma folder, and it's something called a schema.prisma.

All right, everybody see that? Actually, I'm gonna start that or I'm gonna delete it because I just realized I could add another flag to it, and it'll generate some more stuff for me. So I wanna do prisma init, but then I want to say data source provider, SQLite, like that.

If you do that, it'll create like some other files for us as well, that's really cool. So I'll leave that up for a little bit mpx source data provider, SQLite, I'll run that. And then what that's gonna do same thing. I guess it didn't do the thing that I thought I was gonna do.

I guess you don't have to do that. All I did was change this to SQLite or whatever, that's cool, I'm cool with that. So this is a schema file, if you've never written a database schema before, this is what you'll probably do a lot. You'll have to go into some schema file and write a schema, but Prisma's really chill.

It's based off of GraphQL and JavaScript, so if you've familiar with GraphQL, or if you just know JavaScript, which I think everyone here does, writing a schema's actually really quite easy. So we're just gonna write a schema for our todos. So I'm just gonna make a new model using the model keyword.

I'm gonna say, todo, like that. And I'm gonna give it an id, let's say its id is type string. I'm gonna use this app sign to say this field is is annotated as the ID field. I'm saying this field is the ID field. And then I'm just gonna say I need to give it a default.

And because it's a string, I can use this built in UUID function. If you don't know what UUID is, it just stands for universally unique identifier. I don't know how to explain it other than it spits out guaranteed unique strings. That's the best way I can describe UUID is if you use it, you get some unique strings, right?

Here we go, I'm gonna get another one, there we go, so here's a UUID. And every time I do it, I get a new one, right? So the database will just do that for me automatically. [COUGH] It's like different versions of UUID as well. So that's all I'm saying, it's like make that a UUID.

And then I don't know, to do might have some content whose type is string. It might have a created at, whose type is thick? There's like a I'm sorry, type, Date Time. And then there's like a special that's where's that? Yeah, daytime within like default So, like, now, something like that.

I could do another one that says, like, completed. It's a Boolean, and its default is, false. All right, pretty simple, we're not gonna do crazy as this. In the full stack course, we're gonna have like, it's gonna be a crazy schema, but in this is pretty much it.

It doesn't really matter what database you pick, right? You can pick SQLite, you can pick Postgres. All this is going to be the same, for the most part. There's like some different directives that you might use, but everything to the left of the directives is pretty much the same no matter what database you pick, it's pretty cool.

And if you already have a database you can just add prisma to it. It works, it works pretty good. So we just need to migrate our database to get it set up so we can start using it. So we'll do a, npx prisma migrate, not migrate, deploy, migrate, let's do a help on this.

I think it's migrate. Let me see, let's do a migrate help. So I think we might want migrate dev, I think, let's do that. So migrate dev, you can give it a name. You don't have to name it, but I'm just gonna name it init. And of course it breaks because, yeah, we got to add a DATABASE URL to our env file.

Awesome, great, segue into envs real quick. So it should have an ENV file here on the route that Prisma probably created for us. If you don't know what an ENV file is, it stands for an environment variable file. This is a file in which you don't check into Git, so I just wanna make sure I go into my dot get ignore, make sure that .ENV is listed in here anywhere.

It doesn't matter what line you put it on. And this will tell GET to ignore it. The reason you ignore this is this is where you put your secret stuff. If you check this into GitHub and it's something useful, people will have it. So we're gonna put our database URL in here, which for SQLite is where's where's my repo, it's basically this.

It's a file, so it's just like file:/dev.db. So we have that, now we can run our migration. And then boom, it created a migration for us. We're ready to go, created a database file for us right here, something called a journal. And we are ready to go on that.

So now we're ready to actually use this data inside of our components that we can actually do crud on the actual database and try to create some to do's and list some to do's and things like that. So cool, any questions on that? That was a lot really quick, I know.

I have all the code on the GitHub repo, so if you feel like I need to catch up, it's all here, the link's in the initial page of the notes, right here, remember? So here you go, so check that out if you need to catch up, question?
>> It's maybe more of a personal opinion question.

I've worked with Prisma before but if we're just like, active record, right?
>> Yeah.
>> In your back, your experiences Prisma pretty easy to drop down into a raw SQL when needed for like, those walkie migrations or that one lookup
>> Yeah, so it also depends on the database you used to lifers if you saw that, like, planet scale, which handles migrations for you.

Then you could, but you don't, playing scale doesn't want you to, but prisma does have the ability for you to drop down and get pretty custom with raw queries. I think it actually has a .raw method where you can just do whatever you want. So I don't think it, it doesn't hide it from you, but it tries to do most of the stuff for you.

Anytime you use a CLI, like in this case, prisma or something like that, you can just put npx in front of it so you don't have to install it. So that's how you know whether or not you need to use npx or npm. You're probably using npm to install things or run a script in a package JSON that you have here.

You're probably using npx to run a CLI or some other command. So npx prisma init, and then that created our data source, our SQLite, all this stuff here, and then we just did a migration. Yeah, we just did a migration here to sync our state with the database, with the SQLite database.

You think of migration as like syncing the database, that's literally what a migration is. We've made some changes to our schema, and we need to sync those changes back to the database, that's a migration. Some people's job is just to write migrations. In fact, if something was going to go wrong in your app, it's probably during a migration.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now