SvelteKit & Prisma Full-Stack CRUD Application

in this video you're going to learn how to use prismo as felkit by building a simple crud application this video isn't going to be a deep dive on Prisma itself but more so how you can set it up and use it with spell kit if you are interested in more videos about Prisma in the future and some of the cool things that you can do with it let me know in the comments down below and I will certainly consider for future videos so I want to keep this intro as short as possible so let's get into it now I went ahead and set up the markdown for application just some basic forms and some cards here using Pico CSS but before we can do anything with Prisma we need to install the Prisma and Prisma client packages so let's head into our vs code here and that's the first thing that we're going to install and then once those are installed we can actually initialize Prisma within our project by running MPX Prisma init and you'll see here now a Prisma folder was created with a schema.prisma file inside of it now to keep this video short and sweet we'll be using sqlite however the beauty of Prisma is that you can pretty much use whatever database you'd like later on with only Minor Adjustments needed depending on what type of database you choose to use so we're going to be using sqlite so we'll change our provider to SQL Lite and then for the URL we'll just set this to file then I'm going to do dot backslash so it's going to put the database inside of this folder here dev.sqlite now we can define a model so we can say model let me close my terminal here article and we'll give it an ID which is going to be an integer and it's going to be default will be Auto increment so it's going to increase by one every single time we create a new article now I have a title which is going to be of type string and content which can be of type string now to get our database up and running with this new table we have defined here with an article we can open up our terminal again and say MPX Prisma DB push now this command should only be used during development because it doesn't produce migrations or record of your databases history so when you're at a point where you want to deploy this application to production you want to look into how to handle migrations with Prisma and manage your migrations that way so as we can see now we have this dev.sqlite file that was created and the reason I can actually see this inside of es code like this is because I have an extension called sqlite viewer and it only lets me see files that are named dot sqlite but I'll leave a link to that extension in the video description if you want to check it out but now we can see that we have an article table with our three different columns here we have ID title and content which is exactly what we would expect we can see that ID is a number title is a string and content is a string so now that our database is up and running it's time to interact with it and in order to do so we're going to have to initialize the Prisma client so I like to actually set up my Prisma client inside of a directory lib server and then do prisma.ts and by placing it in the directory server spell kid will make sure that this file cannot be run on a client which is exactly what you want right because all Direct Communications with our database should only be happening on our server side right so this is where we will Define our Prisma client but we have to do something else first because spoke kit hot reloads whenever we make changes to our files during development we want to make sure that we're not creating a new instance of the Prisma client that we're going to set up on every hot reload which would then create an additional connection to our database and every reload and this can cause some unexpected and annoying errors depending on what database platform you're using so to get around that we actually need to store the Prisma client as a global variable whenever we're running in development mode because Global variables aren't reloaded with those hot reloads so to do that we'll first come into our app.d.ts here and I'm just going to set up a new variable and I'm going to call it Prisma and it's going to be a type Prisma client and if you're just using JavaScript you can skip this step here and then inside of our prisma.ts file what we want to do is we want to say import Prisma client of course from prismaclient and then we'll say cons Prisma equals global.prisma or new Prisma client so basically if global.prisma exists it's going to use that otherwise we'll instantiate a new client here and then we can set up some logic to essentially set the global Prisma variable to Prisma if we're in a development environment like this we can say if process.env dot node environment is equal to development then we want to set global.prisma equal to Prisma and then we'll export Prisma and if you're using JavaScript you can pause the video in just a second when I show a little snapshot of what it would look like for JavaScript so now the first time our application runs in development mode global.prismo will not be set here right so therefore it's going to set a new Prisma client to Prisma right and then if we're in process e and B node environment of development it's going to then set global.prisma equal to this Prisma here right and then we export that so then the next time it reloads it's going to check and then that time global.prism will be set therefore we're still using that global.prisma rather than creating a new one every single time we hot reload okay so now that we have our clients set up we can actually use it now by adding the ability to add new articles to our database so you can see this is where our application is as it stands right now we have this form here and this form already exists that means we can go ahead and just start to add the form actions so I'm going to create a new plus page.server.ts file and then I'm going to set up my actions with kit actions here and we'll set up an action called create article it's going to be asynchronous and it's going to take in a request and then we're going to take out the title and content is going to be object Dot from entries away request.form data and then we can actually say as title string and content string this is because since we're doing form data here an object Dot from entries title is going to be a form data entry value type rather than being a string which is what Prisma is expecting but we know it is a string so then because Prisma returns promises when we're creating a new article we're creating something inside of our database we need to set up a try catch block here so we can say a weight Prisma which we actually need to import dot article dot create and then we'll say data title and content and then we'll catch any errors and then if we do have an error we'll just return fail and then we can obviously console error this error as well just so we can see it while we're in development and then if everything is good to go we will just return status of 201 and then we need to update our forms action to actually hit that action so we can say create article method post everything was good to go here and now let's try to actually create an article so we can say my first article this is a test article say add okay we didn't get any errors so it looks like maybe we're okay so let's go into our database here and we can see now that we have a record with my first article and this is a test article so I'm gonna add a couple more articles here and then if we check our database and we give it a refresh we'll see that we have all three of these articles here inside of our database now so right now on our application we're just rendering out an example article but we actually want to get the Articles from the database so inside of the same page.server.ts file I'm going to set up a kit load it's gonna be a page server load and I'm just going to return articles await prisma.articles dot find many prisma.article.fi mini that's going to give us a list of Articles so we can come back into our page and we can set up a script tag and accept the page data and then I'll destructure article from data articles from data and then I'll come down here and I'll say each articles as article and then we'll replace these values with what they should be so we have article.title and then we have article.content now when we come into our application we can see that we have these three articles here now let's have the ability to delete articles and to do so what we can do is we can actually wrap this button here in a form tag and give it a type of submit and then what we'll do is we'll make the action question mark slash delete article and we'll say and ID equals article dot ID so we're going to do is we're going to actually submit this request here we're not submitting any data any form data we're just hitting this specific endpoint or this specific action and then we'll be able to get the article ID from the URL object so we can come into our actions here you can say delete article it's going to be asynchronous it's going to take in a we're going to get the URL out of the request and then we'll say const ID equals URL dot search params dot get ID and we'll say if no ID we just want to return fail and then otherwise we're going to set up a try catch block await Prisma dot article dot delete where ID is equal to number ID because it's going to be a string or null right because it comes from our URL we're going to first rule out that is not null so now it can only be a string so we have to convert it into a number so that Prisma can actually accept it because our IDs are numbers and then we'll catch any errors that occur and then we'll just return status of 200 and then we have to add method equals post to our form action here can't forget that and then we can go back into our application and try to delete one so I'm just going to delete article two so if I click on delete article we're going to see that the article has just disappeared and if we look at our database we refresh we no longer have the second article so now the last thing we're going to implement is the ability to update articles and I already have a button here but we're going to first create a new route we're going to call it article ID and then add a plus page dots felt to that and then also a plus page.server.ts file and this plus page.svelt is just going to have the form that we have here so if we look at this form here we'll just copy this down and paste it here and so in order to update this article we're going to have information from that article we need to have access to that article so that we actually know what we're updating what a Content currently exists on that article so we can get that information if we go into our load function here and set one up and we're just going to take in the params and then we'll set up a function called get article it's going to be asynchronous and what we'll do is we will say const article equals await Prisma dot article dot find unique where ID will convert the params dot article ID into a number then we need to import Prisma from lib server Prisma and then we need to run a check here so if there's not an article right because this could possibly return null here right so find unique can either be an article or a null we're going to throw an error saying the article was not found otherwise we'll return the article and then from our load function we'll return article is get article so then our page here for the article ID we can set up script tags and receive that data here and then we'll change this to say well actually destructure article from this and we'll say editing article.title and then we'll set the value of these two inputs to article dot title and then article.content we'll change the button to say update article and then we'll change the action to say update article as well so now inside of our root page we actually need to make this button here linked to that article so we can do that by just simply saying slash article.id as the href and now when I click on an article for my first article you'll see that this article is now pre-populated with the information of that article and the last thing we need to do is set up the form action for updating this article so we can say kit actions and then I'm going to import this type update article it's going to be very similar to the other one we did right it's going to take a request but it's also going to take in params and we'll say the title and content are equal to object from entries await request.form data as title string content string and then we can run another try catch block so we can say await Prisma Dot article.update where the ID is you guessed it the number params dot article ID we'll say data we'll just pass title and content and then we'll catch any errors we'll log them out and or return a fail if there is an error and this will be a 500 status code could not update article and then we'll just return status of 200 here if everything goes well and this return here this return statement here is pretty much arbitrary you can return whatever whatever would indicate to you that this request was successful right so let's go back into our article ID we have the proper action set up here everything looks to be good to go so let's test this out so if I update this my first article has been updated and I say update article we can see that the title changed of course because the title changed here and then we go back into our home screen we can see that this was changed as well so this has been a brief introduction to spell kit and Prisma I hope it has been informative to you if you got value out of this video don't forget to like And subscribe it greatly helps the channel out a lot if you'd like to see more content with Prisma and spell kit let me know in the comments below and I will consider for future videos and I will see you all in the next one [Music]

Channel: Huntabyte

Views: 41,411

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, api route svelte, svelte routes, layouts, advanced layout sveltekit, sveltekit icons, sveltekit extensions, sveltekit productivity, svelte search, svelte react, svelte searchbar, svelte filtering, svelte stores, how to add search to svelte, search data svelte, svelte data search

Id: E9J2VXd-bzE

Length: 14min 38sec (878 seconds)

Published: Thu Jan 19 2023