Build apps at lightning speed with Blitz.js | Blitz.js Tutorial

blitzjs is a framework that combines the power of nexjs with a zero api typesafe backend and today we're going to take a look at how blitz works and how it can make you a more productive developer than you ever dreamed possible so let's dive in and if you find this video useful please do hit that like button it really helps me out as a youtuber who's just getting started so normally when you build a modern full stack javascript application you have to worry about what tick you're going to use to build the front end and the same for the back end and on top of that you have to worry about how they're going to connect to each other and this usually involves setting up a huge amount of boilerplate a couple of repos and making technical decisions and choosing libraries where you don't necessarily know whether they're the right choice or whether everything will work together nicely and ruby on rails was one of the first frameworks to solve this problem for the web you'd keep all of your front-end and back-end code in one repo and they'd interact seamlessly plus ruby made a lot of decisions for you but they were the kind of decisions that didn't really matter no matter what kind of app you were building that combined with ruby's strong conventions makes ruby super easy to use and to scale but there hasn't been a good solution like this for javascript heavy front-end apps that use react until now so let's dive in and take a look at what we're going to build today so here it is our app is called task hero and it's a simple to-do list app so i can type in a task over here and when i hit enter we're going to add in logic to send that task to the backend and store it in our database and then we want to render out all of our tasks in this list over here pretty simple but if you had to build this all the way from scratch with create react app and a custom node api this would take quite a while but today with blitz this is going to be super quick so the file structure that you're seeing here on the left is a bog standard blitzjs app that you can create by running the command line tool blitz new and then typing in the name of your app and following the prompts but if you want to follow along with this specific example you can go ahead and clone the github repo linked down below so let's actually dive in and start building some functionality and as we do that we're going to get a good overview for how a blitz app is structured so the first thing that we need is some way to store our tasks on the back end right so we head into this db folder over here where you can see we have a schema.prisma so blitz has prisma built in for dealing with the database and if you've never used prisma before well you're in for a treat so we have our database provider which right now is sqlite but we could change this to postgres so let's create a new model which will basically be a table and let's call it task because we want to store a bunch of tasks right so the first thing that we need to add is a primary key or an id right so let's call our id id and we're going to say that it's going to be an integer and we just say by using this id decorator that this is going to be our unique id and by default we're just going to have it auto increment secondly we want to store the label of the task right so let's say label and that'll be a string and we also want to store whether or not the task has been completed so let's say completed and that'll be a boolean and you'll notice that we get some amazing autocomplete here thanks to the prisma vs code extension and then finally just to sort our tasks we can add a created at field and this will be a type of date time and again we can use prisma's syntax over here to say that the default is just going to be now now i don't know about you but this looks way better than writing a sql migration manually but how do we actually take this and get it into our sql schema well we simply run blitz prisma migrate div and you can see here that it asks us for the name of our migration so let's say add task table so let's do that and you can see that it's generated our migration for us and our database so now that we have this how do we actually interact with a db well let's go to our app folder over here and you can see that we have a pages folder now our pages folder contains all of our different pages and roots and if you have used something like next.js before you'll see that this file based routing is very similar over here in blitz but we're going to get to rooting in a later video so for now let's create a new folder in app called tasks and keeping all of our logic for tasks collected within this folder makes it easier to group different domains of our app so if we added some authentication we'd add an auth folder over here right so in here we're going to create a new folder called mutations so in blitz any folder named mutations or queries we can actually create files in there that can contain our backend logic and we'll look at the difference between the two in a bit so let's create a new file within mutations and we're going to call it insert task dot ts and in this file we're going to create a function that can insert tasks for us so let's say export default async function because it's going to be an async function and let's call it insert task and in here we're going to take in some sort of input now we can actually go ahead and type this input so let's just call it insert task input and what do we want to take in well all we actually want to take in is the label of the task which will be a string so let's type this input and now over here we can go ahead and insert our task so let's bring in db which we can import from db and when i go dot you'll see that we get a bunch of things auto completed over here but the most interesting one being task so you can see here that our database api over here is auto-generated based on our prisma schema so we can now go db.task.create and you can see here that when we specify the data to be created we get autocomplete for all the different fields in our database so we're going to say for label it's going to be input.label and for completed we're just going to say false by default and then because it's async we just need to await this and it's as simple as that we've just created basically an end point on the back end which we can now call from our front end but you might wonder how do we call this from the front end does blitz use rest does it use graphql well it doesn't actually use either of them so let's go back to our page over here and i'm just going to hide the sidebar and what we're going to do here is we're going to say const and i just do some destructuring and i'm going to bring in the use mutation hook from blitz and then all we're going to do here is import our insert task function from our back end how cool is that there's no api to deal with all we're doing is importing code from the back end into the front end and blitz is going to hook all of it up for us so now i can say insert task mutation over here and over here i'm getting the function that we can call that will end up calling our back end so we have this input down here with an on press enter and in the on press enter we want to call insert task mutation right to insert our task and over here we need to pass in our label so let's do a new object and you can see that we get auto-complete what's awesome about this is blitz gives us type safety so basically the types are shared between the back end and the front end meaning we don't need to rely on apollo cogen if we're using graphql or worry about swagger docs or anything like that it all just hooks up beautifully and you can be rest assured that nothing's going to break if you rename something for example so let's say label is going to be new task label because that's our piece of state over here that holds the value for our input we can remove the console log and then let's also just await it so that we clear the task only once it's been inserted successfully so let's see how this works so i'm going to say insert task hit enter and you can see that after a little bit of a delay the task was inserted and that's because our endpoint ran one other thing that we can do to make this a little bit nicer is add a loading state so i'm going to bring in is loading from our use mutation hook over here and then i'm going to pass it to our input so you can see that if is loading is true on our input it grays out like this so let's pass in is loading to it so now you can see that when i insert a task we get a loading state and then the task gets inserted how incredibly quick was it to do that all from scratch now next we actually want to display the tasks right well let's head back into our file structure over here and in this tasks folder we're going to create a new folder next to mutations called queries so you can compare queries and mutations to rest where a query is a get request where you can make that request over and over nothing's going to change on the server and you call a mutation imperatively like on a button click on a form submit not on page load like a query and it actually makes some sort of change to the database so because we now want to fetch data i make kind of a get request i'm going to create a new file in queries and here we can just say get tasks dot ts and in here we're going to create a another export default async function get tasks and what are we going to do in here well it's going to be pretty simple we're going to import our db again and we're going to say db.task dot find many which is going to find all of them and i can literally just return the result of it so now we have our server side logic set up let's head back to our index page and actually display out the tasks so i'm going to bring in after some destructuring use query from blitz and i'm going to pass in get tasks which again i'm going to import straight from my back end and then as a second argument we're going to pass in the parameters for the query but since we don't have any parameters it's just going to be undefined and over here for our and over here inside the d structure we're going to get this tasks variable which as you can see because of our enter in type safety is an array of tasks and we get a task over here and let's open up this function and now you can see that we're actually rendering out our three tasks that we've already inserted so now to actually fill it out so for the label we're gonna say task dot label and then for this checked value over here we're going to say task dot completed now one thing over here that's not ideal is we have different names for our checked prop over here and this completed value in the database but it would make much more sense if they were named the same thing right so let's rename it on the back end so just to show you how absolutely easy this is with blitz in schema.prisma we're going to rename completed to checked and just to make things easier i'm going to set the default value to check false so now i can go ahead and run blitz prisma migrate dev which is going to run our migration so now as soon as we go back to index.tsx you can see here that we get a type error and immediately you can see that our new type has come through how awesome is that and now finally in our insert task mutation you can see that we get a type area here as well but because we have a default value on this we can actually remove that but now you see we get the server error and it's telling us to add a suspense fallback well that's because use query over here from blitz works with suspense which is freaking awesome so what we can actually do is head into our page layout component down here so let's head into layout.tsx and i'm going to add a suspense boundary just around children because this is the contents of our page so let's do that and see what that looks like so let's add suspense which is imported from react and the fallback is just going to be for now a div which says loading so now if we refresh you'll see that we still show our heading because it's outside of the suspense boundary and then while the tasks are loading we get this loading div what i love about this is how easy it makes handling loading states and doing data fetching with suspense is something that not many frameworks can do right now so now we have our tasks rendered out one thing you'll notice though is when i insert a new task and hit enter and it saves the new task doesn't appear i actually have to reload for the new tasks to come in well what we can do is pass an object to this use mutation and we can say when it succeeds so on success we're going to run this async function where we're going to await a call to invalidate query which we'll import from blitz so what this is going to do is we're going to insert the task it's going to succeed and then we're going to tell blitz to rerun the get tasks query and only then is our loading state going to be set to false so i can go hello 5 and you can see that the loading stage shows all the way up to the point where the task has been inserted how cool is that so in this video we've managed to build a full stack app with blitz js complete with a database a type safe backend and an xjs frontend in under 10 minutes i hope this video has conveyed the power of blitz and i'm excited for you to check it out and let me know what you think this was obviously a super quick rather fast paced video but it was just to give you an overview and get you started but there's a lot more to cover on blitz so let me know down below in the comments if you want to see more blitzjs content and tutorials and be sure to subscribe here to my newsletter and to make sure you don't miss them when i upload new blitz tutorials finally if you did find this video useful please do give the video a like like i said it really helps me out and like i said subscribe if you want to see more blitz content and i'll see you in the next one cheers

Channel: Jacques Blom

Views: 3,421

Rating: 4.98524 out of 5

Keywords: react js, reactjs tutorial, blitz js tutorial, blitz js, javascript, javascript tutorial, ruby on rails, next js, next js tutorial, full stack, typescript, prisma, prisma2

Id: G587PTBeGyM

Length: 12min 40sec (760 seconds)

Published: Thu Apr 15 2021