In this chapter we're gonna go ahead and set up a database and an ORM for our project. Let's get started and let's obtain a Postgres database using NEON. You can visit NEON.tech or you can use the link in the description to let them know you came from this video. Let's go ahead to the Neon homepage and let's quickly create or log in using Google. After you are inside of your dashboard you will be able to create a new project.
I'm going to call this one MeetAI and I will set the database name to MeetAI as well. Once I create the project, I can click on the Connect button and this will help me obtain my database URL connection string. Once you've obtained that, go inside of your project and create a new .environment file in the root of your application. Go ahead and create a database URL and inside of the quotes, simply paste the copied snippet. It goes without saying that you should never share this with anyone.
All environment variables that I will be using are for this tutorial and it will be removed after this tutorial. You however should not share this with anyone. Make sure you didn't misspell database URL here and also do one more thing. Confirm that your .environment file is a little grayed out. That means that it's added to gitignore and that you will not be able to accidentally commit it.
Great! After you've added the database URL it is time for us to set up our Drizzle ORM. So let's go to orm.drizzle.team or use the link in the description to let them know you came from this video. So let's go to Drizzle ORM here, let's click get started, new database neon. And now what we're going to do is we're going to install some packages.
What I've prepared here is the versions, right? So what we're going to do is we're going to prepare and without pressing enter, we're just going to go ahead and get the latest versions of each one. Just in case you're watching in the future, you will know what versions I'm using. So Druzal ORM 0.43.1, Neon Database Serverless is 1.1.1, and my .environment is 16.5. Point one point one and my dot environment is 16.5.0 and I will also add dash dash legacy dash beer dash depths So this is all in one line and this will basically help me avoid those errors which I was talking about regarding peer dependencies.
Please use this line, otherwise you will get an error. If you get an error, no worries, just try again and add ''-legacy-peer-debs''. After you run this command you should have three new packages. Let's go inside of a package.json. We can check here as well.
Neon database serverless, .environment and drizzle.orm. There we go. So Neon Database Serverless is version 1.0, .environment 16.5, and Drizzle ORM 0.43.1. Perfect. Now let's add DrizzleKit and TSX as our dev dependencies.
TSX as our dev dependencies. So the DrizzleKit version I will be using is 0.31.1 and the TSX version I will be using is 4.19.4 and let's add legacy here, deps here as well. This will add these two packages right here in the dev dependencies. We now have a DrizzleKit and TSX. Great!
Now we can close all of these. I mean, you didn't even have them open, but I will close them. We've already established step two, adding the connection variable, so we can go immediately to step 3. I'm going to copy this snippet here and I will go inside of source, database folder and inside an index ts. Let's paste this inside and I'm going to change this to double quotes and I will add an exclamation point here at the end and I will do expert const database.
One thing I want you to double check is go inside of your dot environment, copy this key and paste it here because you would be surprised how easy it is to misspell this and no errors will be thrown if you for example put an I here instead of an L. It just won't work. So what I recommend is just copy it from here and then paste it here. There we go. And add an exclamation point to get rid of the error.
Great. Now let's go ahead and do the following thing. So in here we are okay with using neon HTTP. If you need a synchronous connection, you can use the neon database serverless. We have it installed.
So if you want to, you can do it like this as well. Great. So now what I want to do is I want to create a table and we can do this exactly so I'm just going to copy whatever they did source database is schema dot DS let's go inside of schema dot DS there we go And this really doesn't matter because we will remove it later. But for now, yeah, let's use integer, pgTable and varchar here. And for the id, it will be generated always as identity here.
This will be unique. And these will be integers and these will be varchars with a fixed length. Once you've done that, we have to set up a drizzle.config file. So we can copy this as well and create a drizzle.config.ts in the root of our application. There we go.
I'm going to go ahead and just modify these two double quotes. I love using double quotes. There we go. And let's just confirm that this is correct. So my auth will be .slash drizzle.
My schema is at source database schema ps. Let's double check source database schema ps. My dialect is Postgres. And my database credentials are correct. I once again, just double check database URL and just add it here.
Make sure you have the Drizzle config outside of any folders here. Great! And now what you have to do is you have to apply the changes to the database. The easiest way to do that is by using npx drizzle kit push. Alternatively, there are more advanced methods such as generating the actual migrations and then applying the migrations.
But since we are not working in a team, we are working solo, this is just a tutorial, we're going to keep it simple and we will directly push our changes to the database. So let's go ahead and clear this and let's just do a comparison. So if you go inside of your neon now and go inside of your tables here, you will see that for the Meet AI, there are zero tables in the public schema but if I do npx drizzle kit push right here you can see that it pulled the schema from the database and it applied the changes so if I try refreshing now, I have the users, the user has an ID, name, age, and email. There we go. Perfect.
So we've added Drizzle ORM, we've added the schema, we've pushed the schema, and we've verified the changes in Neon. But one thing that we didn't do is verify changes in Drizzle Studio. So let's go ahead and do that now. Using a similar command, npx drizzle-kit, instead of push, you can type studio. And in here, you can click on local.drizzle.studio.
So you have two options. You can either locally use the Drizzle Studio like this, or you can use them in the Neon console. There we go. So these are in sync. They are the same studio.
Amazing, right? And now what I want to do is create some scripts just to help us in the future. So let's go inside of package.json here, and let's go ahead and add database push, and let's map that to drizzle-kit push. And database Studio will be Drizzle-Kit Studio. So now, instead of doing npx, I don't have to do that anymore because Drizzle Kit is a part of our dev dependencies here.
So instead, I can do npm run database studio, like this. It's going to be more generic. So later on, if for any reason you replace your database, you can keep the command that... You can keep the familiarity with your command, right? And we are also not going to have to remember this command anymore.
Npx-resultkit-studio. We can just use our database push then database studio like that. Excellent! So I believe that is it. We have verified the changes in the studio.
Now what we have to do is create, review and merge this pull request. Let's go inside of our source control here And under the changes, let's click the big plus button. And this will mark them as staged changes. And this is zero to database, I believe it is. So I will press commit.
And since we have already connected with GitHub this time, what we can do is we can check out to a new branch, and I'm going to call this 02 database. There we go. So I have committed, but I'm in a new database because I didn't push yet. In case you already pushed, no worries, okay? We are just learning the Git workflow here.
You can do the branch process in another chapter. It's completely fine, no worries. But if you didn't push, you can create the new branch using the IDE just like I did and I will just click publish branch that's it and now my branch will be published so I'm gonna go inside of github repository and see what happens Inside of my GitHub repository you can see that I have a new branch with recent pushes here. So I will click compare and pull request. But just in case you don't have this you can go inside of pull requests manually, click on new pull request, keep the main as base and select your new branch here, just in case you want to do it manually and then click create pull request.
And I'm going to now click create pull request. Now in here yours will probably look like mine was a second ago. You probably don't have CodeRabbit. So what is CodeRabbit? CodeRabbit is an AI tool which will almost act like a teammate for me and it's going to review all of the changes that I just added here and it's going to give me a summary of what I just did and also some comments even some potentially breaking issues So it's a very useful teammate for us.
And we're going to see our code being reviewed by AI for each chapter so we know we didn't commit any bugs. And you'd be surprised, in my last tutorial CodeRabbit caught so many bugs I was shocked so I'm excited to see what it will catch now I'm gonna pause the video and play it when it's finished and here we go a summary by CodeRabbit. We introduced some new features, integrated Drizzle ORM and Neon database support. We added what is a temporary database schema for users including fields for id, name, age, and unique email. We've also added some environment variable management for secure database connections.
So no worries, it did not detect a new environment variable, it detected that we're using it for database connections so no we did not commit any environment variables here and we also detected some chores such as new scripts for database migrations and studio accents And we're in here we have a more in-depth walkthrough, specifically we have changes file by file, exactly what we modified and how. And we even have a sequence diagram which will become increasingly useful as we add some complex things. Right now the only sequence it can create is our app connection with the NEON database through Drizzle ORM, but later on when we add some hooks and components it will create equally if not even more useful diagrams to help us understand that. And in here we have some actionable comments. As you can see here it recommends adding an environment variable validation for database URL.
Basically, inside of our, let me see, index here, we put an exclamation point here because we just know that the database URL will exist. But CodeRabbit recommends doing an if clause and throwing an error if it's not set and then we can use it without the exclamation point. It also recommends using the Neon Database serverless driver. So in our case I'm fine the way it is. I'm always open to suggestions like this one, but this is how I initially built the project and I didn't have any problems whatsoever.
And I think it's okay because if we are missing the database URL, nothing is going to work either way. So we don't have to put an explicit if clause for that. And as per database, Neo Database is serverless. Well, using the drizzle, you know, configuration here, we can see it's fine to use Neon HTTP serverless is if we want a synchronous connection, more specifically, if we want to use web sockets. But it's completely fine to use Neon HTTP for this tutorial.
Let's see what else it gave advice for. So in here, I think it's the same thing. It's recommending an if check for the database URL. Of course, a good suggestion, but as I said, if this is missing, everything will break anyway. And here's an interesting thing.
So it actually detected that some issues were opened in Drizzle or Drizzle Kit where they had a mismatch between Drizzle Kit and Drizzle ORM. So our Drizzle Kit version is 0.31 and our Drizzle ORM is 0.43. So it's telling us to be careful here, but it's completely fine. They don't have to match exactly. Perhaps that was an issue previously in some previous versions, but it's completely fine.
You can see it's working with no problems whatsoever. Great. So I'm ready to merge my pull request. We got a very good review. And this is how we are going to review our code every time.
Great. So once you have merged this, you will see this says merged. And you can now go back to your code and you can change your branch back to main like this and you can press this and click okay and it should synchronize your branch with main. And when you look at your graph here, you will see that we had our 01 setup commit and then we branched out into a new version, I mean into a new branch, and then we merge that pull request back here. So it's important that next to your main branch here, you don't see any numbers.
You can click this button as much as you want, it will simply resynchronize. So make sure you don't have any weird numbers here or any numbers here. Make sure your graph looks like this and that means that you are ready to go on to the next chapter. Amazing. So, if you want to have code reviews like this, you can visit coderabbit.ai or use the link in the description if you want to let them know you came from this video.
I highly, highly recommend this, especially if you're working solo and have no one to review your code. There we go. So let's go ahead and wrap this up and see you in the next chapter.