Build A Node.js & Redis App From Scratch

hey guys in this video we're going to be creating a user management application using nodejs Express and Redis okay Redis is an open source database slash caching system if you haven't watched it already I would suggest watching my Redis crash course which is the video before this just to get familiar with what Redis is and also talk about some of the data types and some of the commands all right it's not required that you watch that before watching this but I think it would give you a better understanding to what Redis is alright I'll also show you how to install it because I already have it installed if you're using Linux Ubuntu you can use your apt-get packager if you're using Mac or Windows you can go to register Oh click on download and you can download the tar file here but if you're on Windows and you want the Installer you need to go down to where it says windows and click learn more and then from the github page you want to go to this release page link and then you can download the MSI file right here alright so just get that installed setup and you should be good to go alright and obviously you need to have no chess installed as well alright so what I'm going to do is I'm in my projects folder I'm just going to create a new directory for this project and I'm just going to call this red users Redis users and we're going to CD into red users and then we want to create a package.json file and we can do that with NPM in it all right so let's just enter through these description I'll just say simple user user management app entry point is going to be app dot J s okay I'm going to put my name here feel free to put your own and that should create it alright so I'm going to open that folder in Adam I'm using Adam but obviously you can use whatever you like see read users alright so let's open that up and there's the package.json file and what I'm going to do here is just create a start script and we want to change this to node app okay so that will allow us to run NPM start to start the application all right so let's save that and we're going to install our dependencies so we're going to need a couple things here we're going to need Express we're going to need body parser we're going to need reddit so we're also going to use method override and what that does is it allows us to make a delete request from a form okay because normally you can't do that you can only make get or post and then what else we also want Express handlebars that's what we're going to use for a template engine and I think that's it so let's do - - save and get that stuff set up and they should be added to our package JSON file as dependencies okay so now if we look in dependencies we have all those modules we just installed alright so now we're going to create our app dot JX file this is the main entry point we're going to bring everything in let's say Express and we want to require Express we're also going to bring in the Express handlebars a template engine so let's say exp HBS and that's going to be expressed - handlebars we also want the path module which is a no js' core module and we want to bring in body posture city party car sir and let's see method override let's do method override and set that to require method override okay and then finally we want to bring in Redis all right so now we brought in everything now let's just go ahead and set our port so it's a consort and we'll set it to 3,000 all right and then let's Nick the app variable so we'll say Const app set that to Express okay then we also need to set up our view engine so we'll say app dot engine and we're going to pass in here handlebars and then we want to call that exp HBS and tap in some curly braces and the default layout which is going to be main okay so this means that the layout we're going to use is has to be called main dot handlebars and then we simply need to do an app app dot set and let's set view engine and let's slip that to handlebars all right and then let's set up the body parser okay this is just standard middleware same stuff you'll find on that documentation so it's a body parser dot Jason and [Music] one more line is going to be body parser dot URL what is it URL encoded and then we'll just pass in here extended and false okay this is just your standard middleware and we also want to add a line for method override so let's say app dot app dot used and we're going to pass in method override and then we just want to add in here underscore method this is the parameter we need to use when we're making our request so that we can make a delete request with a form okay so that should do it for the the module middleware now we're going to create our route to the home page so app dot is going to be a get request to slash and then we want to run a function which is going to take in the request the response and next and then we just want to load a template so we can say res render and the home page is going to render a template called search users okay then we just need to listen on our port so we're going to pass in the port number which we defined above and then we'll have a function run when we're connected and we're just going to console dot log and I'll say server started on port and then we'll just concatenate that port number all right so let's save that and then we're going to create a view folder and in here we're going to create a layouts folder and in the layouts we're going to create a file called main dot handlebars okay and this is going to be our main layout so let's put some HTML in here and let's say read users management and we're going to use bootstrap I'm actually going to use boots swatch which is just a custom version so today we're going to grab one of these themes you can you can use whatever you want I'm going to use this flatly and click download and then I'm just going to copy the CSS link up here and then we'll put that over here stylesheet H ref and let's paste that in alright so that should do it for the head now for the body all we're going to do is right now is do this triple curly brace and then body that's the Express handlebar syntax to load the view so whatever view were we're looking at is going to be loaded right here and everything else will be on every single page all right so let's save that and then we're going to create our search users view search users dot handlebars what should be handlebars okay and in here for now I'm just going to say search users and save alright so we should be all set to run it let's go to our terminal and we're going to run NPM start what do they do all I already don't have something running looks like I have something running on oh okay I got to stop that all right let's try it again okay port 3000 so let's go to localhost 3000 and we get search users so it's loading that template up which is exactly what we want all right so we're going to have a navbar so I'm going to go to get bootstrap calm and go to getting started and go to examples and then the starter template click on that and then we're going to do a control U and just grab this grab this nav here the snap tag copy it and then we're going to go to main dot handlebars and put it right above the body okay because we want this on every page I'm going to change a couple things I'm going to get rid of this fixed top class and we're going to use navbar default and change the project name we'll say read users management and let's see we're going to have a home link which will go to slash and then we're also going to have add user which is going to go to slash user slash add ok we'll create that later and get rid of the contact ok and then the body down here I just want to wrap that in a container container class and the ending div alright so that should be all set let's save that and take a look reload and there we go so we have a navbar now what we want to do is create the search form here which is just going to be the ID we're going to search be able to search users by their ID so let's go into search users dot handlebars which is right here alright and let's see what I want to do here let's put an h1 will just say search users and see we're going to put form I'm going to give it a class of form inlined which is a bootstrap class and we're going to give this a method of post because we're making a post request and then action it's going to go to slash users slash search ok and then in here let's put a div give it a class of form group all right and we're going to put we're going to put a input and type 'text the name is going to be ID and then get rid of this value we're going to have a placeholder and let's say search users by ID okay and I think oh and let's put a class as well I'm going to give it a class of form control which will make it look good all right and then under this div let's put our submit so we'll say type submit and give it a class of BTN and BTN primary and value is going to be searched okay so that's our form let's save it okay there it is pretty simple so what we want to do now is catch the request we're making it to use your slash search a post request so we'll go back to app KS and let's go under the home row we just put a comment here search page and then this is going to be search processing so let's say app dot post the post request and it's going to slash user slash search okay then we'll have our function with request response and next and then what we want to do here is grab the ID from the form so we're going to put that in a variable called ID and we can get it with requests body dot ID all right once we have the ID we're going to start to use Redis so we need to create a client okay so all we have to do here is create a variable and we're going to set it to red s dot all right and then we're just going to take that client and we're going to say dot on and we want to say dot on connect okay so when we connect to Redis we're going to run as function and let's just do a console dot log and we'll say Redis or we'll say connected to Redis all right so let's just save that and make sure that that works so if we reload the server now we see we have connected to Redis okay so we can now use that client to run commands now when we submit this we're going to run a function call our command rather called H get all so let's look that up and this is going to return all fields and values of a hash stored at a certain key or an ID okay so let's say client dot H get all okay and we're going to pass in that ID and then we're going to have function and that function is going to have an error if there is one and then give us an object okay then we're going to check to see if that object is not there so if not obj and let's put an else so if it's not there what we want to do is just rerender the search form so rez dot render and we're going to render search users again and we're also going to pass along an error so let's put an object here and say error and set it to user does not exist okay so that's what will happen if there is no user with that ID if there is then we're going to what are we going to do we're going to take that object and we're going to assign it we're going to assign an ID property to ID okay and then we're going to res dot render a details page so details we haven't created this yet we will and let's pass along the user which will be that object all right so that will search for the user if it's not found it will just rerender search users with this error message and then if it does then it's going to render details with that user data okay so for this error to show up we need to put that in our search users template so we're going to go right up here and let's see we're going to put an if statement here so let's say hash if error then we want to put out just do a span and we're going to say put our error here and then close that span and then close that if all right save that and then let's reload our server and that should at least work if we if there's no user so we'll just put anything in there and you'll see user does not exist okay so if it does exist it's going to render details so let's create that view details dot handlebars and let's see in here we're going to put in h1 and I want to put the users first name and last name so we should be able to say user dot first name user dot last name and then let's put the ID in a set of brackets ok so that will be the h1 then we're going to have a ul with a class of list group and in here put Li and let's put strong tag and this will be the email user dot email and let's do the same thing for the phone number okay and then let's also put a back button so a class BTN BTN just fault and then we put an href which we'll just go to slash okay so let's save that and now we don't have any users in our database so what I'm going to do I'm going to exit out of our server for a minute and we're going to go into reddit CLI and from here we're going to add some users so we're going to use the hm set command and what we can do is hm set and then the hash which is going to be the ID and then we'll have our field so email phone and so on all right so I'm going to say hm set user zero zero one that's the ID format we're going to have and then let's set the first name so first name we'll set to actually know what that needs to be no quotes first name and then the value should be in quotes so John and then let's say last name so email and phone all right so let's go ahead and do that we get okay let's add another one so I'm just going to change this stuff up let's say this is Tom Smith last name Smith and Tom okay so now we have two users so let's start our application back up we got to get out of Redis first control-c alright so let's go back to our app and let's go ahead and search for user 0 0 1 oh you know what I didn't change the ID for the other one so so Tom over wrote John but it you can see it is working I actually want to put a class on these li is enough so this is going to be list group item there we go all right so so we have one user of Tom Smith so we're going to now add the functionality to create a user through the application all right because we don't want to keep having to use reddit see a lot so let's create a new view so we'll say just call this add user dot handlebars alright and then let's copy the search form here okay we can get rid of this if actually no we'll keep it that way if we need to output an error we can and then let's say add user and this is going to go to user slash ad all right and then let's put a label with this for first name and then we'll change actually you know what we're going to keep the ID field so let's actually make this ID and then placeholder we'll just say add ID and let's copy this form group a few times so this one will be first name say over here we'll just say first name sorry about that texting I would say first name last name I keep doing their last names I can't type placeholder and then we'll have email change the name to email and then phone okay then we have our submit let's change the search change that to save alright save that and then we need to add a route so that we can show the form so let's go back to app KS and we'll just copy this paste that in and this is going to be add user page and this will be slash user slash ad I believe that's what I did in the nav bar we just check yeah user slash ad and all that's going to do is render the ad user view okay let's save that and we'll have to restart this server and let's go to add user why is that look like that oh I think I have the in line yeah we want to remove the in line class there we go so there's our add user form now this is going to be posted to slash user slash ad so let's go back to Abby is and we're just going to copy this and let's say process ad process add user page so we want to change this to a post because it's a post request get rid of that and then we want to grab all the form field so let's create variables for those requests dot body dot ID and then we'll just copy this ok we'll also have first-name you guys can add more fields if you want and let's see email and we want one more oh no we don't just do that I'll get rid of that so in this one we'll be phone okay so there's our variables now we want to call the HM set command for Redis alright just like we did in the CLI okay so many of these commands are available with the drivers so we just have to do client dot hm set and we're going to set the ID and then pass in in these brackets which we need to put out comma there let's see in these brackets let's do first name and we're going to set that we put a comma here and we set that to the first name variable alright and then last name email phone okay so there's our fields now we're going to have another parameter after this bracket so let's put a comma and then we're going to have our function okay and that function is going to have an error if there is one and then a reply so we want to first check for the error okay so if there is one then we're just going to console dot log it alright and then if there isn't actually we don't even need to put an else then we're going to just console dot log the reply and we're just going to redirect so res dot redirect we want to go back to the home page so it's just slash alright so let's save that and let's go back to our application let's reset restart the server ok and we'll reload let's get that active class off of the home link right there so inside main handlebars I'm just going to remove that active ok so let's add another user we know we have one at user 0 0 1 let's say user 0 0 2 ok there's no user there so we're going to add that user 0 0 to first name let's say Kevin and last name we'll say Smithers I guess and say Kay Smithers at yahoo.com and then phone number and let's save ok and then let's search for user 0 0 2 and there is Kevin Smithers ID email phone number so we can now add users through the application so now what I want to do is I want to be able to delete these users as well so let's put a delete button over here now we're using method overdrive so we can actually just create a form with a button and we can delete it that way okay instead of having to do like an ajax request through jquery or something like that all right so let's go to details dot handlebars and we're going to go right under the back button let's actually add a class to this back button called toe pull left because we want that to float to the left and then we're going to put a form here so let's say form and give this a method of post but it's actually going to be a delete and the action the action is going to be slash user slash delete slash and then we need to put the user ID okay now in order to use method override we need to add a parameter here so we're going to put a question mark underscore method and set that to delete okay and this underscore method should be defined in your app j/s right here okay so we're using that underscore method and then let's see we can close that and then we're just going to have one input which is going to be a submit and let's see we're going to add a class of BTN and BTN danger make it read and then also pull right all right and then the value so the text on the button is going to say delete all right let's save that and let's reload this okay so now we have a delete now I'm going to click that oh we didn't we didn't add the route so we need to go to app J s and add that row getting a little ahead of myself all right so we can say app got to leet and that's going to be a / user / delete / : ID so the request all right and what we want to do is call client dot del okay we're using the Redis del command which right here so remove this with us specified keys a key is ignore if it does not exist so let's say del and then we want to pass in the ID which we can get from request dot body dot I'm sorry not body params dot ID okay we're using params because the ID is actually getting sent in the URL not as a post body or form body alright and once we do that we're just going to redirect to the home page alright let's save that okay I'm just going to reload the server okay so let's go let's search for a user 0 0 2 we get Kevin we delete him and let's search again for user 0 0 2 and the user doesn't exist okay so I think that's going to be it guys this is a really simple application but it shows you how to get started with nodejs and Redis working with simple together hopefully you enjoyed this if you liked this video please subscribe please leave it a like and that's it I will see you next time

Channel: Traversy Media

Views: 118,912

Rating: 4.9569674 out of 5

Keywords: redis, redis node, redis node js, nodejs redis, node.js, node, nodejs, node js

Id: 9S-mphgE5fA

Length: 34min 11sec (2051 seconds)

Published: Mon Mar 20 2017