Next.js, Drizzle ORM, PostgreSQL, and Vercel Tutorial

hello everyone in this video I'm going to show you how to integrate drizzle omm with nextjs postgressql and versel so the first step is to create a next app and I'm just going to select the default for each of these options so after the project is initialized let's go to vs code and clean up the homepage and then let's go to our Global CSS and remove all of these default Styles here next let's get this deployed to versel yes no and no all right so our project has been deployed to verel so let's go to the browser and we should see our project here so the next step uh we're going to want to create a postgress database so I'm going to go here and then I'll create a new database postgress continue accept create and continue and it says created post store successfully and then I'll hit connect and that should connect this postgress database to our project now in our terminal we want to run this command here and that should have created a env. looc file and add it to the git ignore next we'll want to install a few packages so I'm going to install drizzle omm and verell postgress and a Dev dependency drizzle kit for the next step we'll want to create a drizzle config so I'll create a new file here and call this drizzle. config.sys this configuration here and then I'll hit save uh and note that we don't have this config yet but we'll get to that soon all right so let's go and create the schema so I'll create a new fold here called lib and then I'll create a file called schema dots and I'll just go ahead and uh paste in the schema here so uh we're getting these imports from the drizzle omm PG core and then creating our users table here now let's create the configuration for loading the environment variables so um we go back to the project route here and then create a file uh actually let's create it in lib so I'll create it here and then [Music] config.sys I'm going to create the database connection now and I'm going to create db. TS here and I'm going to go ahead and copy and paste in a bit of code here and uh let's go line by line what we are doing here so first I am importing the environment variables and then the drizzle module uh for versel postgress as well as the SQL client from versel postgress and I'm getting users table from the schema as well as the entire schema like this so this is only needed if we want to use the drizzle om if we're only using the query builder then we don't need to do this and this part here is only needed if we're using the uh drizzle omm so this is the query Builder syntax where we're just using uh this API here that looks a lot like SQL and then down down here we are using the OM where we kind of have this om like syntax uh and then for inserting the user we have uh this here so we can infer the user type by our schema so we have this new user and then so we can use that as a typescript type so in this next step let's generate the migration file so I'm going to run npx drizzle kit generate PG and this is going to give us an error that says transforming cons to the configured Target environment es5 is not supported yet so after a bit of research I found that the solution to this is to change this setting here in the TS config so if I go to TS config and then change this to six and then rerun the command then it should work so so let's go back here and rerun this command all right so it says that your SQL migration file has been created so uh if we go here we should find that SQL file so let's go up here's the drizzle folder and then here is the generated SQL file for the next step let's create the migrate script so I'm going to go to the root project and then create a fold folder called scripts and in here I will create a file called migrate dots and I'm just going to paste in the script here so we're getting the migrate function from the drizzle orm versel postgress migrator module here and I'm also importing the uh database uh from our database connection file and then I have this async function here that will run the migrate command and it'll look at the migrations folder in drizzle so let's go ahead and run the migrate script so I will run npx TSX scripts migrate dots enter all right so it takes a little while um but the way that the versel postest package works is that uh if if uh the connection is Idle then it will automatically close so that's what happened there um all right so it looks like the migration script ran uh let's go to our code and check the drizzle folder here so yeah it looks like it has generated some stuff here so there is our entry and our snapshot all right in this next step let's create a seed script so I'll create a file here called seed. TS and I'll go ahead and copy in this code here and so we are importing our new user type and insert user function from our DB uh module and then I'm creating this new user here with an email and for the image I'm just uh hardcoding some string in here and then for the name I'm uh doing this random string inserting the user and then also I'm adding this process. exit since um it kind of hangs since uh not sure what the best way to close the connection with versell postgress is so I'm just doing a process. exit here all right so now I'm going to go to the terminal and run the seed script all right so insert user success so in this step let's go and update our homepage so I'm going to copy uh this code here and uh we are importing get users and get users to and remember that the first one is using the cql like query Builder and the second one is using the OM and then we are rendering out the Json data using json. stringify here and let's go to the browser and refresh and it looks like it's already here so you can see that we got our data like this so now you'll be able to use this data however you want and render it uh however you want to all right so let's go and take a look at our postgress database in verell so I'm going to go to data and then here I'll open this and then click on users so you can see that this is our one user here now what if we want to uh add another field to this well we can uh follow the same pattern that we just did where we generate a migration and then run the migrate command or we can use another approach uh with the push command so first uh let's go and update our schema so I can demonstrate how the push command works so let's go back here and let's go to the schema and let's imagine that we add another field here called password and this will be a text field like this and uh yeah so let's let's try the push command so I'm going to go back to the terminal here and run npx drizzle kit push PG so now it is comparing our schema with the database that's in versell and it says okay well you're about to exe execute the current statements alter table users add column password text so I can say no or yes I'm just going to say yes I want to execute all statements and then it says changes applied so now if I go back to uh versell here and let me close out this and reopen it okay so now we have a password field here so uh yeah the push command is useful if you are trying to iterate quick or if you are prototyping and uh you just want to iterate very quickly uh and then for migrations um perhaps you are working on a larger project where you need to have those migration files then you would use that approach instead for the final step I am going to add the commands here uh for future reference so in conclusion drizzle has two main ways to update the database schema one generate and migrate for projects that require migration files and two push for prototyping or if the project doesn't require migration files and drizzle has two main ways to query the data one using a SQL like query Builder and two using an omm that always outputs one SQL query all right if you found that helpful uh please like And subscribe

Channel: Full Stack Book

Views: 9,938

Keywords:

Id: G5B7gsLLGvQ

Length: 14min 31sec (871 seconds)

Published: Mon Dec 25 2023