Node JS with Express Handlebars (hbs) Tutorial Part 1

hi everyone welcome back to another node programming tutorial uh today i'll be covering node and express handlebars and i'll be using this netflix clone type of website that i created here it's just a very simple little website that i put together and it has a form right here so i'll show you how to do form submittal and also how to do paging and routing when you click on one of these to show you more descriptions on it so we're going to cover routing and all that and i'll show you my workspace right here so we'll be covering how to do routes views uh setting up components and helpers and so yeah this will be covering node and express handlebars now before i start i want to clear up some confusion that you might run into which i had the same problem and when we're talking about node and express handlebars there are two different versions there is one called hbs which is short for handlebars and that is the first one that came out about 11 years ago they have hbs and then just like a year later they have express handlebars now they are both very similar and you'll notice that express handlebars here it is taken over however they're both very similar it's just the initial setup that can be confusing because they are different on setting up but after that is very similar and so in this tutorial i'll be covering the hbs version on doing the setup because it has a boilerplate on how to set it up however i'll include an extra file in here called an example like node express handlebar example and i'll show you the setup on that one so you can look it over and decide which one you want to do but like i said they're very similar it's just the initial app setup and then after that it's all the same stuff and like always my code is also available on my github right here at kodakai so go there download this example and follow along even though i have this website set up you won't need to do the same type of design like i did right here it's just for looks uh just uses html and css but you can follow along and just look at how i program it out and you'll just get it you know you don't need this fancy whole design but i will include this design inside my github if you want to download it okay so let's get started right here like always i always create a folder inside a project file right here i have one called sandbox and these are all of my previous projects here if you look through it and so i created this folder called node hbs app so i'm just going to drag this into my visual studio code right here so i can open it up for me and then i'm going to open up my terminal by holding ctrl tilde you can go to view and open up terminal as well but if you're just starting out with node and you found this video i really suggest that you go to nodejs.org right here to download node install that but what i do is i use homebrew just go to brew.sh right here and i copy that and then i just go to my terminal right down here and i can paste it in and it'll install homebrew for me so i use homebrew and i do brew install node there's multiple ways to install node but make sure you install that first so what i always do is always do brew update if you're running brew then i do brew upgrade just to get everything updated so right here i'll show you my current node version no dash v so i'm running 17.4 which is the current version i'll also show you my npm right here hb i'm running 8.3.1 this is just for reference in case you run into this video like a year later so all right so for this node hbs version there is a boilerplate for it that gives you a pre-installed package so all you have to do is just do npm install express generator just like that okay so after that we just have to type in express dash dash view equals hbs now there are different views for express here there's also another engine called ejs which is very popular as well and um maybe i'll do a future tutorial on that one but today we are doing handlebars and then just type in the folder that you want to install this into i'm going to leave this empty because i want it to go into my current folder right here that i'm working with destination is not empty continue yes now before we do npm start look at this package right here it has all these dependencies that we need so we actually have to run npm install to install all those dependencies so npm install and then now we can do npm start and let's check it out right now to make sure that is running and there we go we are on localhost 3000 and it's just very simple express welcome to express that's all there is to it right now so let's stop this with control we're stopping the server so i'll show you how it works right here let's look through this thing right here here's our main app right here see it gave us all this pre-made code just to run the server for us and everything is included in here they gave us views right here and routes and i'll explain this right here how views and routes work so think of routes as the server side of it see it runs the coding of it if you remember or react tutorials the same exact thing this is just doing the routing and then it's going to render our front end front end is the views right here you'll notice right here it's rendering index if i go to index hbs you see it's just html page right here html code so that is how express handlebars work we have routing for the coding and views is just html layout so if you look at right here it gave us these three html pages right here that it just has basic default stuff now what is this doing right here so this layout is the main html page that gets generated everywhere on every routing and page view that we create it takes in a body right here which is our code it just populates that with our code and it does that for all of our layouts here you know it takes this index right here and puts it in here and how does it know to do that well our app here is just doing everything for us so this app right here it's running and it's telling it to run our server the difference that you'll see with this and the express dash handlebars is that when it runs the server it goes into this bin right here with the www now we look at this this handles the port and everything for it to run see it's running on port 3000 so it does all the server the setup here and runs run support for us you know on air right here and it's listening to the port so it does all that inside that that file right here when you take a look at my other example later on for the express handlebar coding example everything is set up in here for the port and all that so you'll see that code but just know that with this one hbs it is putting everything in here for us to run all right so the first thing i want to do is i want to go over this layouts right here and i'll show you how to use it now i'm going to show you how to add a header and a footer to this so that i can show you how to manipulate this page and pass things through it's kind of like html when you're doing an include file i'm going to show you that right here we need to create a folder called partials so let me create a folder right here and it's called partials like that and inside partials i'm going to have a header hbs and another one footer.hbs let me give this some code right here i'm going to say footer s equals footer i'll add in the css later and this is just going to be a simple p tag center oops and i'm going to say coder kai programming tutorials copyright 2022 here we go now i'll save that and then the header think of it as like if you'd like to add a menu or something like that so i'll just do something very simple right here and i'll just give it h1 tag a header just like that so we know we're going to go back to this layout right here layouts right here to call those files what we do is bracket bracket grader sign header just like that close it off and then i'm going to call the footer and that's how you include but we're not finished yet because i need to tell the the app here that we're using partials because these are called partials so let's go back to the app.js right here and i need to set up this partials so you notice right here in out inside our package dot json right here we have the hbs installed but we didn't require yet inside here so we need to require that so let's put it right here var hbs equals require hbs and i'm going to initialize it right here hbs dot register partials right here so now i need to direct it to the views partials folder so to do that i'm going to do a path.join and underscore underscore directory name views slash partials and on air i just return nothing just like that and there we go i've registered my partials if you don't want to do this path dot join you know there there is an easier way just go like this you know underscore and score a door name and then you can just add in the views slash partials so that works as well it's just two different ways of coding it so i'm going to save that and here we go we have everything set up already and so let's just run this and i'll show you how it looks like npm start now if i refresh this see it shows the header and then here is my footer kodak program tutorials now i want to touch base on this right here remember how i also said there is an express handlebars um if you want to include that with the other you'll see it in my example file how you require is it's going to look like this whereas handlebars so it looks like that but like i said we are using the hbs version and this is how we initialize the partials for this one okay so that's all i'm going to do for this layout right here and i'm going to close this footer like i said i'm trying to make this look a little pretty you know with my netflix clone type look so what i'm going to do is i'm going to include my html for my header right now and i've already created this right here my header is going to look like this it has a nav bar and then it has this netflix logo in the upper left and then you know just the right side stuff with the sign in button but this does nothing it's just for looks and this is just very basic where i'm going to run some style sheets right here in my inside the style css because this is the public folder for the style sheet and so i'm going to put that stuff in right now just to make it look pretty sorry i'm not going to step through this because this is just html kind of like design and it doesn't fall in with you know node and express program tutorial so if you follow along you'll just understand it when you see me do the forms and the routing and stuff and you can just print it up yourself and so inside my style sheet here i'm just going to paste all of my css see this is all just css and it's just doing a container right here with a netflix background it's very simple once you learn css and all that just to make everything look very nice so let me save this and then inside my index page right here i'm just going to have this code right here and so i'll just step through this real quick right here i just have like a little sign-in form right here i have a sign up form and i'm going to step through how to do these forms and stuff with a little input and a submit button i'm leaving a link to where i got this code from for the netflix little scroll and how to set this up but it just does like this simple carousel right here with you know different items that it scrolls through and then when you click on it you can view it so the the first thing i want to talk about here is if we go to index.js right and this index page is saying when we first go to the home page here was just a backslash just home page it's going to render we can tell it what to render and we're telling it to render index you know our index.js is going to render index hbs i can tell it to render any page in here but we're telling it to render index and the index has this html so that's what it's doing right here and then you'll notice right here we can also pass through variables so it's passing through this title right here with a title called express right here i'll just call this like netflix clone just like that and if it's passing through this title well how do i call this title i'll do it right here right before this unlimited movies i'll call it title with double brackets like that so whatever you pass through i can pass through another variable right here too you know or two like that and then give it whatever text just like that so you can pass things through let me just show you how this looks like right now when we run this it's going to say netflix clone unlimited movies right so let's start this up right here npm start now the server has started and let's refresh this and you'll see right here netflix clone unlimited movies right so that's how you call those variables in each page here so moving along you'll notice that we have a form right here so let's do a form submit how do we capture form information and route that and submit it so i have a form with an action of sign up we can call this anything we want but i'm going to call this sign up right because we're going to submit an email address to sign up right here i have an input and i have a name of email input so this is the name right here and then we have a button with a type submit so when they click on that button it's going to submit our input right here with this email input that we're going to enter in our email this is inside of the index still so i'm going to go to my index.js right here we're going to do a post on this because this is routing to the home page where it just gets the page now we're going to route we're going to do a router.post and we're gonna call the sign up that we just called and that takes in a request and a response and arrow function and so in here i'm going to response.render the index page because we're just calling the same page and i'm going to pass through the title still netflix clone this time i'm going to pass through the email now how do i get the email from this input right here we're calling it email input so to get that let me set up a email variable or email and we're gonna say request dot body dot email input so here you know we're taking into request we're getting from the body the email input and then we're gonna pass that through our variable right here so um this might be confusing because i'm calling the same name so let me just call this em short for email like that see i'm getting the email input and i'm just gonna pass it in here and this is the name that we're gonna call it and then if i go back to our handlebar page right here for index i can now use that email variable right here so what i'm going to do is right up here we're going to detect if an email will submit so with express handlebars right here there are built-in if-else statements but it's very different it's not the same if statement so it looks like this to call it you do bracket bracket if and i'm going to say if the email exists right we're gonna say right here let's give a h1 tag thank you for signing up with and then i'll i'll call out the email name right email and then i'm going to say else if an email does not exist we didn't submit any emails then we're going to show us the form right here and to end it it looks like this yet to do this for slash if and so that's how it looks like with this built-in if statement um if you wait for a couple minutes here i'm going to show you how to create our own conditional if statements using helpers i'll do that in a minute here but i just want to show you how the built-in if statement works right here so let's start up our server again npm start and let's go to our netflix here refresh so i'm going to submit my email here and kodakai gmail let's submit that and you see thank you for signing up with kodokai gmail so it captured that variable and it passed it through so you see how the post works you work inside the js file um you call from our index here i have a form action that directs it to sign up with a method of post and then i have an input right here of email input and when that submit it passes through right here and i can tell it hey look for anything that's posted through this routing right here called sign up and then i set my email right here with the email input then i pass it back through right here i'm going to render the index i can do anything i want with this if i have a database set up i can store this email and i can just pass it back through through a variable right here and then i can work with it and say hey all right you submitted something thank you and here's the email that you submitted so yeah that's how it works right here so if i go back to the regular page right here see it doesn't detect the email that was submitted and so it just goes back to this form right here so that's how a post works with this now you're probably wondering how does this if statement work can i call it and say if email equals you know like something with gmail inside or or maybe you want to say email does not equal to empty can you use that no this is a built-in very simple true or false function for this and this is the hurdle that i had to get over when i first worked with express handlebars i'm going to show you how to create some helpers right here that will create our own if statement for us but the if statement that's built in here already is just very simple and basic it's just if this email is true or false that's all it's saying if it's true or false and so let's create our own if statement and that's called helpers and so to create a helper i need to create a folder in here and i'm going to call this folder components like that whoops let me drag this component folder out there we go i want components inside our main root right here and inside components here i want to create a file called hbshelpers.js now if you want more information on helpers here is a link to it that i'll include up here what we're going to do is we're going to say var helper equals bracket like that and let me just do this before i forget module.exports equals helper so we're going to create some helper functions in here we're going to do a if condition statement and that's going to take in one variable the operand variable 2 and options arrow function so you can find this type of if statement on the web everyone has created this already so i'm just going to take it and show you right here you can copy it from my code too on my github but this is the standard that everyone has created already it just takes the operator right here and it just looks for the case you know um if you're gonna do a if not equal to then it's going to check this does variable 1 not equal to variable 2 if so then do this right so that's all it's doing and we're creating a helper function right here and to use this helper function we have to go back into our app.js and i'm going to show you how to set up all the helper functions because you can add on multiple helper functions you can go in here and you can do like comma right here and add another one short text which will take in a text with end length and i'm going to use this short text later so let me say show you how it works return text dot substring 0 n minus 1. um it's just another function to showing up whatever text i provided with the length that i want so that's how you can create multiple helper functions but we have to activate that so in here back in our app.js i'm going to set that up first off i need to include it so let's do a var helpers equals require and it's inside our components folder right here and hbs helpers right there so now that we have the helper i have to do a for loop for let helper in helpers and i'm going to say handlebars register helper right here register helper and i'm going to register each one of those helpers that we have in there so helper helpers helper so there we go this is going to register every one of these helper little functions right here so that's how you register it in here and now let's do our new if condition statement so it's going to be you know same like that hashtag if underscore condition and we're going to say if email right here and this has to be in single quotes does not equal to that's the operator and then the second variable does not equal to empty right and then we have to end that if condition right there so now we're using our own if statement that we created right here and that's how it works and also i need to modify this right here since we're passing through an email down here for a home page here i also need to pass in an email that is empty because we have to initialize this right here okay there we go so let's start up our server again npm start let's go to our page refresh and so right here it doesn't detect any emails and i put in our email here submit and thank you for signing up with so here is the bad part about this it it won't pass through a variable after you do a helper function like you can't return this type of variable here so so i want to say that is the only bad part with this is with these different if condition statements that we have to create with our helper functions with using express handlebars with this i do suggest that you do all of your checking over here and just pass through what you need to check if it's true or false otherwise you have to try to program out your own helper function to do that and like i said that is the hassle that i am seeing with express handlebars but if we save this right here start it up it does work with the helper functions when you do that and you see it does detect it and work for you so let me stop the server here and so i showed you how to do a form post right here by rendering any page that you want when you post it and how to route it when you're posting something through you know you can call it anything you want we have a sign up form and then we grab the input and then we're rendering through our index page still so now i want to show you how to set up a page to do routing so what i want to do is you notice our scroll bar right here as i hover over each one of these i wanted to route it to a certain page that when i click on this i wanted to show more information on this this video right here and how i'm going to route this is i'm going to create a page that's going to be called movies and with the movies i'm going to pass through an id i can give an idea one two anything like that so the id can be like slash movies for this one could be slash one and then this would be movie slash two movie slash three you know any id that i want and so let's create that page right now right here you'll see that i input right here for carousel for so this is the very first little item in that carousel and i'm giving it a url of slash movies one right with an id of one now just think through this if we were to connect to a database and i would loop through and display all my movies with a specific id and it would have images and all that and as you click on it it's going to go to that url with the id in it so you can call it one two you can call it anything uh it doesn't have to be like in order it can be have a string like abc2 so i just gave a different little url names right here with different ids so you'll see right here that with our border plate it created us a users.js file right this is just the basic how it's all set up so let me just rename this to movies show you how it looks like yes i want to rename that and movies right here you always need to require the express right here and then you need to set up the router express.router and then it's just the regularrouter.get and then you export that router right so how do we get an id from our url right here if i were to give it an idea one or abc2 anything like that that's the id how do i get that so let's go right here and i'm going to put colon id so let's grab that id let's do var id equals request dot params.id and then i'll just do an if statement down here if id equals abc2 okay we'll do like an else if not in here i'm going to render the page that i want response.render and we want to render a movies page that we're going to create and so we also need the movies hbs file right so let's go into our views here so let's create the movies dot handlebar and we won't do anything with that yet let's just uh work in here still we're gonna render the movies we're gonna pass all this through it and then i want to render it and pass in information like the title of the movie you know we want we want to give the image uh description of the movie so stuff like that and with this movie right here that i'm trying to render it's this russian doll one so we're gonna get all the information from that imagine if we connect to a database and i grab all that information and i put it right here we'll call it russian dolls if you stay tuned for my next tutorial i'm going to show you how to connect this through a database and i'll just grab all this for us but right now i'm just trying to do it's just static right now so that you can just learn from it and here's the image that i'm going to display see this is just grabbing it from the netflix api where i can just show that same image so i passed that through i can give it a description on this movie and i want you to pay attention to this description right here instead of giving it a two single quotes like that for the string i'm going to give it double quotes and i grab this whole description from imdb and i'm doing this double quote because i'm trying to input html right here and uh you can do single quotes too you just gotta escape things but i'm just doing double quotes and i'm adding in html and i'm going to show you how to work with that in a minute here i'm rendering this i'm passing through these stuff to this movie's handlebar page so here's our movies handlebar right so let's grab all those information uh i already set up some css for this so i just have a div container for my movies container then i have a div class with a box in here and with that you're watching i'm just going to end this box div and the movie container because i'm just trying to make it look pretty here i have a div photo right here this is just css so i want to show the photo right so i do image source equals now let's pass through that image right bracket bracket image because we created an image right here see that the way i want to format is is that i want to show the image first and i'm going to have this info right here and inside this info i'm gonna have a h1 with the title title of the movie and let's break this and then i'm gonna show the description now you're going to think that i'm going to do bracket bracket description right here but remember over here this description i'm passing through html and i wanted to show html coding in here so when you're passing through with just double brackets like this it's only passing through text if i want to display html i gotta do three brackets so that's how you display html through a variable so this is gonna show the p tag and h1 tag and whatever i can make a bold and pretty colors or whatever let's save that right here so we have our image title and description say image title description else i'm just gonna response dot end it very simple and i'll just say invalid request so that is our movies page right here i accepted an id i took in that id i'm checking the id to see which one i clicked on i'm gonna pass back info on that pass it back through our response right here for the movies page but before we start up this server let's go back to this app.js any new page that you route you have to include it right any new page that you create here's the movies one right here you have to include it and then you also have to tell it to use it so here you'll see that is using the index right there's the index and then here's our movie so remember our old page users so i'm just going to call this movies to let it use that page any new page you create remember you gotta initialize it require it and then you gotta tell to use it and let's run our server now npm start is running let's refresh this page here and so as i hover over this i didn't create anything for this yet it's going to break if i click on it see invalid request because i didn't i did an if statement to only detect this right now i click on russian doll and there we go it has our image has the title and then it has a description that i entered in with the p tag see how it just renders the html in here so let's go back here okay i'm going to show you how to run a helper function in here on this description so let's go to our helpers right here and let me fix this right here sub string there we go so we also have this short text function that i created and i i said i was going to get back to this we're going to call this here inside our movies because let's say i want to shorten up our description here so i'm going to call that function short text you can just call it just like that and it takes in a a text here right and then it we have to give it a length so short text description and i'll give it a length of just 200. save that and now if we go back to npm start let's start up our server again and refresh our page now let's click on this and you'll see right here see it shortened it up it only took in 200 characters you see how we can call our helper functions anywhere in our handlebar page here it's just calling short text right there and we created a helper for it that's how you run helper function here to make things easier for you you know you want to do some calculations and all that that's how helper functions help you out so in a real business scenario if we go back to movies.js here you know we entered everything statically and in a real business scenario we're gonna connect to a database you know like mongodb like i said i'll show you that in my next tutorial how to connect the database and do all that stuff but you know it's not gonna have this if statement what it's gonna do is that let's say we just go through and we're gonna connect to a database right we get get the info and then we store that inside a variable called data so let me say our data equals and i'm going to show you how to set this up here because i can pass through this whole thing let's say we connect to the database and i grab all that info i can just set it in here called title you know russian doll i can set everything in here i'll do the image right description so let me paste all that again right here here's the title image description like i said you know in a real life scenario we're going to connect to the database and we're going to do all this and we're going to have it in one variable and then all we have to do is just response.render the page that we want movies and then we pass through that data we're going to call it data data so we're going to pass that through and render it and look how easy that is you know let's say we connect to a database we get everything that we need using the id of course right here and then we just pass it through and then we can use it so look at how easy that is and then if we go back here i'll show you how to call this now using this new variable called data so since i passed that whole kind of array type thing we're going to put data right here just call like that data dot and you see everything is passed through easily and it makes it very dynamic so let me end this here npm start go back home here and as i click on that see the same type of info let's say i want to pass through some extra information like i'll create another variable up here called you know extra and i'm gonna put this inside an array type right here and i'm gonna give it like let's say year released right and that's released in like 2019. here we go and then i have another let's say i'm going to pass through film location and location is hollywood california just like that so you'll see that i have this right here and let's say i want to add on some more extra information right here extra and i can pass through that variable right there extra okay now i need a comma right here and i'm going to show you how to loop through this so let's go back to the movies.handlebar right here and so after the description let me just give some line breaks here now i'm going to call the each function now this is built in you can call each and we call the extra right for each extra we will end it i always like to just end things first like that okay so inside here it's going to loop through it and give it p tag here and released in and just call it year released let's do the next one filmed in film location just like that so it's going to loop through this that we have this list right here and let's just show everything using the each built-in function let's save that whoops you know what i forgot to do right here you see how we're using the data variable so i got to put data dot extra so let's resave that let's run it again npm start so let's go down here click on it and see released in oh it will not give it the correct release date and then i also misspelled this right here year released okay so that's there let's restart the server npm start and let's go back here let's go down here click on it and there we go see how it just went through each one of those lists and released in 2019 filmed in hollywood california so yeah those are the things that i want to cover in how to use node with express handlebars right here i'll leave some comments in here so that you can see the different ways that it has you know remember how we have double brackets here to output a string uh triple brackets to output html string and you can also do comments like this you know and then they have the built-in functions for if and each very basic and standard and if you want you can create your own helpers file right here so this tutorial just really step you through on how to do routing how it plays in with the server side here and then the front end with the handlebar itself rendering html but also how to use functions in here as well and like i said in the next tutorial i'll connect a database but if you can't wait for it you can always just watch my react tutorial because it's very similar i have a node and react tutorial that connects to mongodb as well as the sql database and i'll be doing the same thing where i connect to a database grabbing information just to show you how exactly it works without entering all the static information because we can grab all of this information from the database dynamically and just populate it through and then it'll just display on our page for us right here so that's just a basic tutorial on this on how to do express handlebars i hope you continue to learn about these different type of frameworks and which one you rather use i do want to say that express makes it a little bit easy on just running it because you saw how i just run this right npm start and it just runs the server and front end for us and with react we had to run both the server and front end on separate ports imagine when if you have a site like where the back end crashes and then the front end is not going to work right and you have to restart that server but with this it just runs it all at once it's just very different ways of doing things see which one works for you better both of them have their own quirks and good and bad ways of doing things right because like i said i didn't really like this part of it on how to create helper functions i really wish they would just have all the basic helper functions for you all the conditions and all that just pre-made and made it easy so hopefully they'll have that in the future but for now i hope you enjoyed this video and give it a thumbs up and subscribe to this page if you like i'll put everything inside my description if you want to see where to get all my code at github and with that i hope you enjoy the rest of your day i'll see you in the next tutorial kodakai out you

Channel: Codr Kai

Views: 20,484

Keywords: node express handlebars, node js hbs, how to program in node, node js programming, node js tutorial, node js handlebars tutorial, node hbs tutorial, node js website, node js handlebars setup, node js express tutorial, node express handlebars setup

Id: 4CXtw1CIauQ

Length: 40min 45sec (2445 seconds)

Published: Sun Jan 23 2022