Node.js Crash Course Tutorial #7 - View Engines

alright the gang so in our app so far currently we're just serving static HTML files back to the browser and by static I mean all of the content is predefined and it doesn't change now sometimes we want to inject some kind of dynamic data into our resulting Eastvale for example that could be data from a database like blog posts or it could be user data that we want to show on a profile page so how would we output dynamic content or data in these kind of templates well to do that we can use something called a view engine or a template engine and this is something that express ups can use really really easily so it's another massive advantage of using Express to build node websites so view engines let us write HTML templates are very similar to this in an HTML syntax but also allow us to inject dynamic data and logic into them like variables it checks loops and then we can serve the resulting HTML page with that data to the browser so there's a few different options that we can go for when we're choosing a templating engine we could use something like express handlebars which is quite popular also something like pug which is really quite different from HTML actually so we're not going to go with that or something like ajs which comes with a lot of nice features and it's really simple so this is the one that we're going to be using going forward in this tutorial some of my friends the first thing we need to do is install ejs so that we can use it so I'm going to cancel out of this process then say npm install ejs and that should save it to our dependencies over in package.json or right here ejs we can see that okay and now we have to say we want to use EJ s as our view engine of choice for this application so we do that at the top after we've created the Express up so I'm going to do a little comment here that says register view engine and to do that we use app sets and app set well lets us configure some application settings and one of those settings is the view engine that it uses and we're going to use the EJ s view engine so now it knows that EJ s is going to be used to create our templates now that we need a place to create our different ejs views now automatically Express and EJ s is going to look in the views folder for those so that's the default value of where it's going to look so if we place all of our EJ s files in here we don't need to do any more configuration however if you want to create a different folder called something else then you can tell Express what that folder is going to be called by going down here in same app sets and using a different configuration setting called views and then the second argument is going to be the name of the folder where you will keep your views for example my views and now Express would know to find your views in here and it would look in here instead of just views so I'm not going to do that I'm going to place all of my views inside this folder right here so how do we create these views they're very similar to HTML but they have a different extension so the first thing I'm going to do is actually delete all of these three files I don't want plain HTML anymore and instead I'm going to create an index ejs view like this so all I'm gonna do inside this view is just paste some HTML and this is pure HTML there is no ejs specific code here it's just like having a nature I'll file exactly the same so you can see we've got a head right here with a title and inside the body we have enough and that nav has two parts it has the site title on the left and it has a ul which is the nav on the right now the reason I've given these classes is because later on we're going to style these a little bit so inside this site title we have an anchor tag which goes to the home page and there's an h1 inside that and this is blog ninja now we also have a paragraph tag under that that says this is a net ninja site I realize that's very egotistical of me but nonetheless below that we have enough right here and there's three links there's one to the home page which is ultimately where we're going to show all of our blogs there's one to the about page and there's one to a new page which we have not yet seen and we've not yet created or configured and that's going to be to a forum page to create a new blog so that will be forward slash blogs forward slash create okay so that's the nav done right there and then under that we have this div right here with the class of blogs and also a class of content again so we can style this later on and then finally an h2 inside that that says all blogs so ultimately all of our blocks are going to go underneath here and that's going to be the dynamic stuff that we do in this template file later on for now let me just save this and show you how we actually serve this up to a browser as a response so if we go back to apt is no longer inside the home routes handle it right here do we want to send this file instead we want to do what's known as a render a view so I need to replace that with the render method this is how we take of you render it and send it back to the browser and all we need to do is say what this view is called - the extension well this one is called index so that's all I need to do I need to just say response render index and now Express is going to look inside this folder does it reviews folder automatically it's going to find this it's going to use the ejs view engine to render that and send it back to the browser so let's see if this works I'm going to first of all open up my terminal and say no daman up to run this and then I'm going to go to the browser and go to the home page and we should get that template which we do now then let's do the other files we need one for about and also one for the 404 and then we'll create that create page as well where we're going to have a form to create a new blog so then well let's first of all do about dr. ejs and in here again I'm just gonna copy this code and paste it in because I know you probably don't want to see me type out HTML this is not an HTML course but again it has the same head with a same title and it also has exactly the same nav here with links to the home phone slash about and then forward slash blogs create and then final it for the content of this page it's just ad for the class of about and content and h2 and some lorem ipsum or right here so that's the about page and everything that's identical to whoops the index page all of this is identical the only thing different is the actual content at the bottom so let's save that we also need our 404 page so let's do 4 or 4 ej s and again I'm going to paste this in again this is pretty much identical to the other two pages all of this is the same but we have this div at the bottom with a class of not found and contents and we have this message in the middle now notice all of these divs they all have a class of content this one does this one does and oops this one does right here and that's just so we can style them all the same way with one single CSS selector later on alright so we have those three pages done and let's go and render those right here so instead of this we can say response dot our render and we're going to render it this time the about view and then down here at the bottom instead of all this we want to take that off we're going to keep the status because we still want to set that to 404 but then we can say dot render and we want to render the 404 view so let me just test this out come over here to the browser and let's try clicking these links if we go to about then it takes us to the about page if we go to another URL that doesn't exist then we get the oops page not found this one still doesn't either the forward slash blogs forward slash create URL because first of all we've not created a handle a function for that and secondly we don't have a view for it either so let's create a handle of function for it first of all and I'll do that just above the redirects so in fact you know what I'm gonna get rid of this redirect because we really don't need it in our application anymore and let's say instead app gets the URL is forward slash blogs forward slash create and this is going to fire a function we're taking the request and the response object and inside here all we want to do is render something so we say response dot render now we need to create the ejs file to render so let's do that new file and we're going to call this create ejs and then once more I'm just going to copy and paste this into this file dead simple form again all of this is the same we have the head the title the nav at the top exactly the same as the other pages the only thing different is this over here we still have a class of content but also create blog then we have a form and it's dead simple we have a label for title and an input for the title of the blog we have a label for a blog snippet which is just kind of like a preview of the blog if you like a sentence or something and we have an input for the snippet and then we have a label for the body and a text area for the body as well the actual content of the blog and then at the bottom we have a button to submit the form so there's no kind of functionality to this form at the minute we're just purely outputting it through the screen and nothing's going to work with it but we have at this form ready for later so we can add functionality to it then for now let's just worry about hooking this up so that when we go to forward slash blog forward slash create we render this and we can do that over here by saying inside the render method we want to send back the create view all right so let's give this a whirl so forward slash blog forward slash create click on that and now we get this form so now all of these links work and how simple was that this is how simple it is to create EGS files which is it's just HTML at the minute and then render those right here and that's easier than using that send file method and specifying a routes this way we don't have to do any of that because it automatically it looks in this views for the forest now I know you might be sitting there thinking well actually it's pretty pointless because we're not actually doing anything different yet this is just raw HTML but the power of ejs and other templating engines come to life when we start to inject dynamic content variables and logic into these views so then now that we're using ejs templates how do we actually create dynamic content inside these templates so it's not just all static stuff like this well we use ejs tags and they look something like this they're a bit like PHP tags so we can do an open angle bracket and then we can do a percentage sign and then we close them with a percentage sign and a closed angle brackets and then inside here now we could do some dynamic code so for example I can do any kind of JavaScript I could say Const and then name is equal to Mario like so now this right here is gonna run as JavaScript but it's not going to run as JavaScript on the front end it does that on the server right but now inside this template we could output the name somewhere if we wanted to so how do we output a value well let's say for example I want to output it right at the top inside this div right here well I could do a paragraph tag first of all and if I want to add the value again I need my ejs tags so angle bracket and then percentage and then percentage angle bracket to close them but when we're outputting a single value we need to add an equal sign at the opening bracket just after the percentage sign so when we're just doing code like this that's not being output to the screen it doesn't matter we don't need that but when we're outputting the value to the screen we need this equal sign right here and then I could just output the name which is this dynamic value right here so let me save this and see if it works I'm going to save and a refresh over here and now we can see this name okay so we do dynamic code this way and we output a value this way now we don't want to actually do that instead what we probably want to do is pass data from our app over here because ultimately we probably communicate with database get some data and then we want to pass that data inside this view right here so we can then output it so how do we do that kind of thing well we'll skip the database bit for now because we've not covered that yet instead I'll just show you how to pass data from our handler into a view so say for example I want to output a dynamic value inside the title tag and that's going to be the title of the page well I could do that by passing through data as a second parameter inside this render method and that parameter is just an object now this object is ultimately going to get sent into this ejs file that we render right here and we can access therefore any of the properties directly from this object inside this file and output them so say for example I want a title property and you can call it what you want it doesn't have to be called title but say I want a title property which is going to be home then this object is being passed into this file right here so then we can access that property title inside this file and I'm going to output it right here so let me do a pipe symbol first of all and then output a variable remember we do angle bracket percentage equals and then the variable name well in our case it's the title we don't have to reference the object first we just reference this directly and then we close our percentage and angle bracket and that is it it's going to grab whatever value we pass through and output it or right here instead so let's just preview that and the title by the way is this thing at the top so if i refresh now we can see now that title at the top and that's been output cool so let's do this for each page let me open up these other pages for or for abouts and also create and then if we go down here we need a title for each one of these where we render so let's just paste these in and then come back to them paste and paste okay so the title for this is not going to be home it's going to be about the next one is going to be create a new block and this last one is just going to be 4 or 4 so 4 a 4 now we need to output the title in each one of these so let me copy that and paste it right here save it and I'll write here and save it tedious I know what we're getting there all right done now if I preview this in the browser we should see the correct titles at the top of every single page and if we go to 404 then we should get that as well awesome so there we go that's the basics of how we can pass data into a view and how we can then access that data inside the view but we can do more things inside ejs for example say on the home page over here if I want to pass through some blocks some dynamic data it could be an array of blocks then inside the index page I want to cycle through that array and output a bit of HTML template for each item in that array to display those blogs on a page well I can do that in ejs as well so let me close off these dudes right now and over here let's now create some blocks now I'm just going to copy and paste this from my github repo paste it in right there and this constant blocks is just an array and inside we have three elements each one is an object and it is a separate block not very interesting blogs blogs nonetheless so they only have at the minute a title and a snippet and that's all we're going to output for now but later on we will output the body as well so let's first of all pass this into this object so I could say blogs is going to be equal to the blocks above now because this and this are called the same thing I can shorten this just to blogs and it automatically assigns this value to this property then okay so now we can access this blogs property inside the index let's go ahead and do that so we can output them so we're going to output them down here underneath the h2 and the first thing I actually want to do is check is the length of the blogs over zero are there any blogs available to us because I only want to try and cycle through them if there are blogs available if this was empty like that I wouldn't want to try and cycle through them it makes sense so we need to do and if check in here and we do that just the same way we do it in JavaScript so first of all remember we open up our angle brackets percentage we don't need the equals sign right here because just doing some generic JavaScript logic not output in a variable yet inside here I'm gonna say if and belongs dots length remember we can access blocks because we pass it through and the length property is a property on an array if that is greater than 0 then we're going to do something now we need to close off our ejs brackets right here because now we're going to output some template so I'm going to output an h3 and also a P tag so the title is going to go in here and the snippet is going to go in here but before I do that I want to close off this if block so I can do it at the bottom over here so I'm go break its percentage and then close off the if block and then close off the ejs tags right so we do our opening if right here and then we close it off at the bottom in between we have our template so now only if the length of blogs is over 0 is it going to output this template if it's empty it's not going to do that now in actual fact we don't want to just output one h3 and one paragraph site right because we might have three so in actual fact inside this if block right here we want to cycle through the blocks first of all and output this for each blog so I'm going to actually cut that and instead I'm now going to do some more code and that is going to be inside the ejs tags first of all and I'm going to say blogs dot for each that's a method we can use on a race and it's going to cycle through them so far each blog it's going to fire a callback function and we take that blog in to the function now this right here I need to get rid of and I need to close my ejs tags because this is where I'm going to output the template right here and then I'm going to close off the for each by doing closing angle bracket and then closing parentheses like so close off our ejs tags as well so I hope this makes sense it might look a little complex at first but you will get the hang of it just know that we open up our JavaScript statements at the top and if they need close enough we do that again at the some in ejs tags both times so first of all we're checking if the length of blogs is over zero if it is then we're cycling through the blogs and we're firing the callback function for each blog and we take in that individual blog at a time so the first time around it's gonna be this one at the top then this one then this one so it's going to cycle through those and we're gonna output an h3 and the paragraph tag in each case for each blog and we have access now to that variable down here we can output that so and first of all I'm going to give this a class of title so we can style it later on so class equals title and then this a class equal to snippet and then inside the title I'm going to output a variable so we want to do an equal sign inside our ejs tags this time that's what we do when we output in a dynamic variable and then I'm going to say I want to take the blog that we have access to and get the title property from that remember they have a title property and a snippet so underneath that I want to output the snippet so I'm going to copy and paste this dude right here and I'm gonna change title to snip it and now this should work so well let's test this out I'm going to go over here and refresh I'm going to cross my fingers as well to help this works and it does we have now these three blocks so that's the title snippet title snippet and if we inspect this we should see whoops not that we want to inspect it in the console we should see that we get an h3 for each one and a paragraph tag h3 paragraph right so for each block were outputting this bit of template and that's really cool we couldn't as easily have done that in HTML instead we would have had to send back raw HTML and then on the front end maybe access the data and then dynamically render content that way but this is a bit easier doing it this way right so now we're cycling through the blocks if there are in it and outputting those but what if there aren't any well let's now make this empty and save it come back over here and refresh and we don't see anything so maybe what we should do is add an else case to this if statement right here and if there's no blogs we can output eh like there's no blogs to display so where we close off the if-statement I'm gonna say else and then open that up and then down here I'm going to close the else block inside ejs tags like so and then I'll just do a paragraph tag inside which says there are no blogs to display all right so let me save that and I'll really flesh over here and now we can see there are no blogs to display but as soon as we have data inside the blogs again then it's gonna get rid of that and show the blogs instead awesome so that's pretty simple right that's how we can pass data through into a view and how we can output that data and also just use vanilla JavaScript inside these EGS tags to add additional logic as well like if statements loops etc so we're now creating dynamic ejs templates with variables and logic inside them but how does this all work well our view files live on the server and where we want to render one through the browser that view file is passed into the view engine the EJ SVU engine to be processed now the engine looks for any kind of dynamic content variables loops conditionals etc then whenever it finds those it figures out the resulting HTML code for those parts and in the end it spits out a valid HTML page based on the template we wrote and then the HTML page with the resulting data inside it will be returned to the browser so this whole process is called server-side rendering okay then so if we look at our different views at the minute all four of them have a lot of the same content they all have this nav example which is identical on every single one of these views now that's not really efficient because if we then changed the nav in the future to add different links or change the links then we'd have to go through every single view we had and that could be above 10 it could be 20 it could be even 30 and we'd have to change that now in each and every single view so it would be nice to be able to create a file which held just this part of the template which is the same and then we can import this into our views where we need to because then if we need to update that part of the template in the future we just have that one file to update instead of all the individual views now fortunately we can do this with Express and ejs and those files that we make are called partials or partial templates they're basically parts of a template that can be reused in different views so what I'm going to do is create a folder over here and I'm going to call that partials and then we'll create all of our partial files in here now we're going to have one father now we're also going to have one for the head and we're going to create a foot as well that we can place at the bottom of every file too so let me first of all create a new file and I'm going to call this navigate AS they have the same extension there's still just ejs files I'm also going to create a new one called head dots ejs we're going to put the head content in that and create a new one called footer ejs to okay so first of all the nav let's go to the index page and grab that enough cuts it from there and then go to the nav file if we can find it and paste it in here and that's all there is to it so this nerve pasture right here now contains this HTML and all we want to do is use that right here in this possession in this view file so the way we do that is by using an include function and we have to do this inside ejs tanks so open up your angle bracket centage and then close that off as well and then this time we need to do a minus sign or - at the end so I'll explain that in a second but then we say include which is a function and then we need to pass through a relative path to this function and that relative path is to the file we want to include right here which is this enough so dot /to say the same directory then into partials then we want the nav dots ejs file so without putting a value right here yeah and why didn't I use the equal sign instead well when we use the equal sign it escapes special characters and we end up with a string value instead of raw HTML now this minus sign doesn't do that so whenever we use include we use this minus sign to output that value instead so now if we save that and go to the home page over here if we refresh there shouldn't be a change but it looks like there's gonna be an error let me go over here and open up this terminal now we don't seem to be running the app so I'm gonna say no daman up like so and hopefully this should work now so if we refresh over here now we get it and this nav is still there everything still works so what we can do now is just copy this and go through our difference view files and where we see the nav get rid of that and instead replace it with this include statement or like so and this way now if we are updating this nav at any point we don't need to update in four different files we only need to update it once right here so let me save that again and refresh to make sure everything is still working on all of these pages which it is the nav is still there awesome so I also want to flush out the head as well as the nav so what I'm going to do is go to the index and I'm going to grab this whole head right here and cut it and I'm going to paste it inside the head file like so now we just need to include it so let me grab this and paste it up here inside the HTML file now we want to include the head instead of the nav I'm going to copy that and I'm going to go to the other files at the top and replace the head with this include statement instead save that and the same for 404 and we'll save that one and then finally we want to do the same way that create and save that okay so that's the head done and then finally we want to do this footer now we haven't actually created the footer yet so let's flesh this out from scratch it's going to be dead simple I'm just gonna do a footer tag which is a valid HTML tag and then inside I just want some kind of HTML copyright notice so I'm going to say copyrights and then I'm going to use the code for the copyright symbol so ampersand first of all then copy and then the semicolon and then I'm going to say blog ninja 2020 so all this does is put out the copyright symbol in the browser so I'm going to save that and then we need to include it so let me grab this copy it and paste it at the bottom because I'm super lazy and change this to footer like so and then I'm going to copy this dude and go to the 404 and paste it in there save it and go to abouts we'll do it in there as well and then finally on the index page at the bottom to save that and now if we come over here and refresh we should see the footer as well which we do and it's going to be on all of the other pages too and even the 404 should work yep we can see that footer at the bottom and the nav and the head is still there as well awesome so that is how we create partial templates with ejs okay they're my friends so there's only one more thing I really want to do inside this lesson and that's just to add a little bit of CSS so that our web pages don't look so crappy so what I'm going to do is first of all get rid of these ejs files because all of the CSS is going to go inside of the head because we're going to use it on every page make sense to do it here so I'm going to do a style tag first of all and then I'm just gonna paste in these Styles they can all be found on my github repo remember the link to that is down below and it's on the lesson 7 branch you're gonna find this CSS inside this file the head EGS file so I'm gonna paste this in I will quickly go through it because there's a little bit here the first thing I've done is an input right here and that is importing a font that I wanted to use called nut o on Noto serif and I got that from google fonts right here so when you select a font in google fonts you can then get this import or right here and it gives you that URL okay so for example if I want to select this style right here and this one and then I go to M but you can get the import right here by clicking on import and then just grab in that that's all I've done and I've pasted it right here so we can use that font in our project now the body right here we've given it a max width of 1200 pixels margin 20 pixels top and bottom auto left to right meaning that this 1200 pixel column is going to sit in the middle and margin is automatically going to be applied left and right to equal that out it senses the content bit of padding then a font family which is this thing and then a max width as well which we don't need because we already did that right here so let me get rid of that then we do a bit of a reset on these different things right here P H 1 X 2 etc we strip away the margin and padding and the text decoration and give them a color of a dark grey we use a bit of flex on the nav so that the content spaces between so that one will sit on the left the title and the down will sit on the rights we give it a bit of margin a border and text transform the UL itself which is inside a now if we display that as flex so that the different links sit next to each other and we justify the content space between so there's a gap between each different link and we align the items to flex end meaning they're gonna sit way over on the right incidentally if you want to learn about flex box and what all this means this is not the tutorial series to do that I've got a whole series on flex box so I'll leave the link to that down below so you can see it anyway carrying on we have the Li where we strip out the list-style-type and give it a bit of margin the h1 we increase the font size the nav P and the nav a we just give it a color and the font weight the footer again color align the text to the center bit a margin and at the h2 again a bit of a margin h3 just some simple styles here the content this is the stuff right here so if we go to a page and we see this this is the content div and it's on every single page where the content is so all we're doing is giving that a bit of a margin to the left and then for each individual page we've created these classes so for the index we don't have any unique styles we need to apply yet all the details we don't have that page yet the create styles are right here that's the form so all we do any standing the form up a little bit to give it a max width of 400 pixels applying this margin so it sits in the middle we're standing the inputs on the text area to give them a bit of margin padding and the width the labels display:block but a margin text area 120 pixels in height because automatically they're a bit smaller than that bit shallower and then finally at the button we're making this a kind of ready color crimson text color of white bit of padding a border font size of 1.2 m/s which is slightly bigger than the default and then the cursor:pointer which is a little finger when you hover over the button so uses know to click it well okay so that is the CSS again apologies if I've rush through this but this is really not a CSS course and I did not want to bore you with it so let's go over here and see how this looks inside the browser let me refresh and Dada this looks automatically better let me just zoom out a little bit okay so it looks pretty true to size and there we go there's the title remember if we click on that then it goes to the home page this is the home page and that's where we cycle through the different blogs remember inside the index or right here we have a link for that right here about this is the about page and new blog and there is the form and now everything looks a little bit nicer so feel free to work on this CSS add your own styles and if you create a design which is better than mine which is probably not hard to do it's all then definitely you know leave your Styles down below and other people can use those as well so there we go now we have this Xpress up setup and we're now using views and injecting dynamic content into those views now ultimately I want to get all of these styles right here and I want to place them in a separate stylesheet but right now we can't really do that we will do that later on but in order to do that we need to talk about serving static files like CSS files and images and using middleware so we're going to take a deep dive into that in the next lesson

Channel: The Net Ninja

Views: 105,145

Keywords: node.js, node, node js, node.js tutorial, node tutorial, node js tutorial, node crash course, node.js crash couse, node js crash course, crash course, tutorial, install node js, install, node.js introduction, what is node.js, what is node js, what is node, node vs deno, ejs, view engines, views, node views, node ejs, node view engines, ejs templates, ejs vs handlebars

Id: yXEesONd_54

Length: 35min 58sec (2158 seconds)

Published: Mon Jun 22 2020