Prisma SQLite Database with NextJS 13

foreign [Music] today we have an exciting tutorial planned we'll be diving right into the world of databases and showing you how to create a sqlite database using Prisma in your next case application before we get started don't forget to hit the like button share it with your friends and if you like this content please do subscribe to my channel it supports the channel and encourages me to create more videos like this so let's get started on the Prisma on the right hand side of your screen you can see the Prisma website what is Prisma Prisma is a orm tool basically it is a object relational mapping mapper it creates a bridge between your programming language in our case we are using next is and the databases to perform day-to-day activities like querying the database updating the database deleting the rows in the database all that sort of stuff in this tutorial we are going to create the sqlite database using Prisma so let's get started right into it I'll jump to the docs section of the Prisma you have got extensive documentation on this website to get started the first thing you have to do is to go into the talks click on the quick start on the left hand side I have got my next days application which we have built throughout this YouTube channel you can see in the SRC I'm using the latest app router I've got few pages here dashboard servers etc etc so to install Prisma what I'm going to do I'm going to go into my terminal and I am going to write down few commands the first thing which I'm going to do to install the prismo to install the Prisma what we have to do you have to write down command npm i iPhone d as a Dev dependency and say Prisma let's give it a minute to get it installed and then we are going to install the client the Prisma client so clear the stuff up and see install at Prisma client so why we are installing this client this client will be used to interact with the database using Prisma let me install this prismaclite and then once the client is installed we are going to initialize this prismacline so to initialize this npx Prisma in it now you can see we have got a new folder in our folder structure called Prisma and underneath we have got a schema dot Prisma file now let me close this yes you can see a file got generated with the Press name as schema.prisma where we have got the client as prisoner client.js and the data sources DB by default it is provided as post postgres SQL and the URL is coming from the database URL in the environment file I'll show you how the environment file looks like in the environment file you can see a database URL is created and a sample postgres URL is provided now what we are going to do I am going to remove this database URL completely commenting this out saving this environment file and let's jump to the schema.presma file I'm going to change few things here first thing which I'm going to change here is the name so the provider name I want is sqlite and the URL for this sqlite database will be a file based URL so I am going to say file will be stored under dev.tp give it a quick save now once we have created this file as sqlite will be able to store this data into the dev.db if you want to use this data source initially rather than initializing the database as like npx Prisma in it you could have used the command npx Prisma in it and you could provide the data source provider as sqlite that is what we are doing here now everything is looking fine let's try to understand how we create table structures here so to create a table structure you have to use so the very first model which I am going to create is users this is just a sample model I am going to use for this tutorial in this model I am going to store some values as ID the ID column will be defaulted as cuid this is a unique ID generated by the Prisma so maybe you are seeing I am getting all this help while while writing down the my code for example first name if I write down S I get a string as a help from the vs code I am getting this I'll go to the extensions and install one extension called Prisma and this extension helps us quite a lot to get through the Prisma model creation very quickly so I would recommend to use this extension while working with Prisma now the second column which I'm going to create is last name again I am going to provide string as the type of this column email string and I'm going to create two column create date where I'm going to say this is a date time field and the default value is now now means whatever the system date and time is based on that it is going to get populated update date again a date time column and I am going to say updated at so this attribute is provided by Prisma and it gives me the current date and time on which This Record has been updated okay so this this comes from the Prisma by default now we have created this model how to utilize this model how to see this in action so what we have to do we have to firstly migrate this entire model to the Prisma so to do that I am going to run a command called npx Prisma migrate there foreign okay so I have not saved my file that's why I'm getting this error let me run this command again [Music] when I say NP express my migrate Dev it asks me enter the name for your new migration I am going to see Dev migration hit enter you can see it returned me a SQL file which is stored under migrations and the migration number generated by plasma let's go to the file structure and you can see under Prisma we have got migrations and you can see the script which we just wrote down for the users table also it has created dev.db this is the database file sqlit light database file which we just created under our scheme this is the file now to play around with this schema what we can do either we can use the code in this session we are not going to talk how to interact with the Prisma by using the code in the subsequent videos we are going to talk about how to interact with the Prisma Tables by using next yes code as well as how to create apis on on top of these tables but for this video I am going to use the Prisma Studio which is a local development environment provided by Prisma where I can see all the models created by me and I can add records so you can see on the right hand side of a URL got populated localhost 5555 if I can click on my user schema I can add rows here I can remove rows I can play around with the data so First Column you know it is a default column where we are you populating unique IDs so need not to touch it first name web type last name is wise email is web device 100 gmail.com and then creation date it will be a default value updated it will be a default value maybe I can kill 23rd of July 2023 you can see on the top if everything is looking fine we'll get this green button save one change I'll click save on change and our user record is now inserted into the users table you can play around with this data you can see the unique ID is also generated all the data is persistent in our database table even though if I shut down this server on the left hand side and try to run this again npx Prisma Studio the data will persist see the user data is still there because we are storing this into our sqlite database so that was the quick tutorial about Prisma if you want to learn more how we were we are going to utilize this Christmas in our next days application on the front end then stick around for the new videos thank you so much for your time have a great day

Channel: Web Dev Wise

Views: 7,324

Keywords: javascript, nextjs13, nextjs, orm, prisma, viral, video, tutorial, youtube, learning, learn, database, sqllite, html, css, viralvideo, howto, sqlite

Id: pYTb82QMCto

Length: 10min 55sec (655 seconds)

Published: Sun Jul 23 2023