Node.js Express EJS Layouts and Partials Tutorial

hello and welcome everybody hopefully this will be the last video with this crappy microphone because i have purchased a new one which should be coming in a few days and hopefully it will be much better than this but anyways this should do the job for now let's get started with this project i have already created a very basic project just so we don't waste any time and i will walk you through this project right now first of all i'm going to open the powershell on windows but of course if your mac user terminal and on linux i believe that you have to use terminal as well so i'm going to left shift right click on windows and open the powershell windows here and of course if your mac you have to cd to your project folder and this will be available to download on my blog post on my blog and get her page which will be all linked in this in the description below and let me open visual studio code quickly i've already got it open and yeah and let me show you some of the project so first of all let me expand everything so we have so we have this public folder with just css inside and this is a main dot css file i will be writing a very minimal minimal amount of css we have a views folder which will be basically where we'll be storing all pages so we are only going to have two pages the index page and about page uh the index page will be kind of like a blog where we have a big column and a small column with a sidebar and then the about page will be full with just to show you uh how we can use the ejs layouts last but not least of course we have ourapp.js and we have all package.json which i will go through i will go through both of them right now now first of all if we go to packages.json you will see that the only dependencies that we have are the ejs and express and also we have the node 1 for development purposes so we don't have to restart the server every single time now let's quickly install the express ejs layout and to do this we can go to uh command line terminal powershell whatever you're using i've zoomed in quite a lot hopefully you can see uh and what we have to do is npm install and we have to install express ejs layout just like this press enter this will install the dependency for us and if you go back you you should see that you have express ejs layout and now we can include this into our app project and start using it first of all let's actually start the server and see what we have to start the project we can do npm start and this should hopefully start nodemon and the app is listening on port 5000. i will also go through app.js in a second but if we go to the browser and go to localhost with the port of 5000 i only have hello world at the moment but we'll change this very soon now first of all let's go back to visual studio code and let's navigate to app.js so let me walk you through the project super quick now first of all we have a very simple express setup which i have talked about before i actually have a full video on this which i'll link in the description below but as you can see i have required express we have a port number of 5000 and then we actually in app listen on this port number and i have set the via engine to be obviously ejs because this one will be using today i'm a very simple writer and i have some uh static files and we actually won't be using those two so i can remove them but we will be using a little bit of css so i can leave the public css and again i have a video on this as well which will be all linked in the description below now this is so good the first thing that we need to do to start using the express ejs layout is to require cons and then we can do express layout and this will be equals required and the require that we need to do is express ejs layouts just like this now that we have express ejs layout we actually need to make sure that our app is isn't it and to do this we can do app.use and then inside we can pass this variable name here just like this and we should be ready to use the layout so now if i go back and refresh you will see that we actually getting an error and this is because as a default let me zoom in as default the express ejs layout uses this layout ejs file to be the default layout so let's create a file and see what happens let's create a new file and this file will be inside views here so new file layout and ejs so layout.ejs and let's save this if we go back to the browser and refresh we shouldn't get any more errors now and this is because the file is now available and the ejs layout is working now to prove you that this is working we can actually add something here let's say h1 hello ejs layouts just like this refresh and as you can see we get hello ejs layouts to be able to use this layout in all pages what we can do is first of all let's create a very simple html file that could be potentially reused on multiple pages so first of all let's create an html5 and we can leave the title as document for now we'll sort this one later and what we can do is we can use the body ejs tag which will then bring the data from uh each individual page so this will be your template the laos ejs and let me show you and inside here we can do like this body just like this and if we refresh you'll see that we're getting hello world and this is because now project is using layout and this is the main layout but this layout is taking the content here this body tag is taking the content from index dot ejs and what that allows us to do is reuse code on multiple pages so i can literally write any code here just like i would normally do hey hey there let's save and let's see what happens so if we go here you will see that we're getting hey there and if i refresh sorry if i see if i see the page source you will see that we're getting the html file and inside the html file we actually render in the home page which is brilliant we can do all sorts of stuff like this we can set up different layouts for different pages maybe you have a register page you might want to have a different layout you can have a full screen layout you can have layout with two columns and so on so we're going to be doing a layout with two columns and i will show you how that works and also i'm going to show you how to use partials just because i think that they fit quite well together so let's go back and let's have a look let's create the second page so this could be home for now and let's create a second page and this one will be called register no not ready and this will be called about dot ejs so this could be h1 just like this about okay so because as default the express layout is using a layout djs the about page automatically will be using that layout as well but we do need to make another route so let me copy this and do slash about and this will be about i think yeah that's fine so hopefully if we refresh and go to slash about we should get the about page and again if we inspect the source code you will see that we're getting the html and inside here we're rendering the about page which can be very useful when we're working on a bigger project let's go back so as a default we have layout ejs but what if you wanted for some reason to change the default uh name of the layout or you wanted to change the directory let me show you how we can do this so first of all instead of so first of all let me actually rename the layout and let me move it to another folder so for example let's create a new folder just for this example and of course feel free to structure your project the way you want the way you feel comfortable so i'm going to go with inside views i'm going to create a folder called layout and inside here let's move the layout ej yes and let me say let's say this is the full width layout so i could do rename and let's say four dash wait spool dash width dot ejs let's save this and let's see what happens obviously at the moment the default is set to layout and that's why it's looking up layout ejs but we don't have that anymore and let me show you how we can change the default first of all to change the default let's go back to app.js and maybe just under here we can add the new default page uh to do this we can do app.set then we have to do layout and then we have to pass the folder which in this case will be one backwards one directory backwards then slash layout and then slash for it [Applause] dot and that's it so let's save this and let's see if this works if we refresh as you can see this is working just as expected now the default page is full width dot ejs and of course we could have called this default and so on and let's actually leave the full width layout to be the default one and let's create another one which will be the one with the sidebar i was actually thinking to do all the way around but i think this makes more sense okay so let's duplicate this so let's create another page in here in layout and we'll call this one cyber dot ejs but what i mean by this is having a big left column and a sidebar on the side now first of all let's start creating some of the pages okay let's first of all start building the full page and i'm just going to do some super simple css in here so let's do a diff with the class of wrapper and the reason i didn't want to use bootstrap for this is because he has way too many divs and classes and it's just confusing if i'm completely honest with you so what i'm going to do is create a wrapper and inside the wrapper we're just going to have a main and inside the main will be our body text just like this and this would be actually okay but let's make this a little bit more interesting and let's add a header just like this and let's add a fake footer as well just like this just like this let's indent them a little bit so you can see better and i think this will be perfect let's save go back and as you can see we have or header we have the about and we have the uh footage obviously i'm gonna make this a little bit better looking but let's go back to the home page let's go back to the home page here and let's make this look a little bit better now i'm going to open the main.css but i actually forgot to include the stylesheet so let's do that super quickly i'm going to do a link of css and this will be main.css css just like this and this works because we have in app.js we have set this up static files folder which is quite helpful so let's save this go back and as you can see the i don't know if you saw but the color of the background changed and this is because i actually have added a body color on this page so let's go back and finish off some of the styles so as you can see i have a body background with eee as a color font size is like 26 pixels it doesn't really matter at this point so let's quickly center line or page and to do this we have the wrapper so wait so let's set width to be 700 pixels margin 0 auto to center line um let's do background color to be white let's add some padding and let's see what we have again this is looking a little bit better um so you can have a clear understanding of what's going on let's now start with the header and the footer so so we can see the separation a little bit better to do this i'm gonna do header footer let's do let's do background color ghost white let's do padding of 20 pixels save this okay and i hope that you can see this the header is kind of highlighted and the photo is highlighted and this is the main content area here for a website so um this is actually so we actually work in on our home page and let's do okay so this is absolutely fine and i think that now is a good time to show you how the partials work now first of all to do this let me let me create a new folder inside here inside the views and let's call this folder partial so views partials and partials are basically going to be chunks of all layout that we can reuse elsewhere just like what we're doing right now with the ejs layout but i'll show you what this does so for example we might have a header with a menu that we want to reuse on some pages or we want to hide on some pages and we have a footer which we might want to group on a separate file and so on so to do this normally you would cut this and inside patches maybe we can create a new file called header.ejs and i'll paste the header in here now to include this file now to include the header inside here what i can do is with ejs i can do percentage dash include and inside here we have to we have to include the file this will be double back then to get to the views then slash parties and then slash header save this and let's see what happens if i refresh we have an error and let's have a look and this is because i actually have to put ejs in here um also i forgot to close the ejs stack here so let's refresh again and now i believe that we have space yep let's remove this let's refresh and okay now it's working so as you can see now the header is actually in a separate partial file which is pretty cool so if you had a menu so it's pretty cool to organize your layout just like so and let's do the same for the footer so for the footer let's grab this create a new partial inside here and this will be twitter.ejs let's paste the footer save and remove and now we can include the footer again just like this and this should work as expected now if i wanted to remove the footer for some strange reason from here i can do just take it off save and as you can see the footer is now completely gone let's uh go back and actually we are pretty much done with this layout one thing that uh we could do is maybe display a different title here and to do this we can do it with ejs so let's open eggs it's kind of hard to open egs and let's do title okay to pass the title you probably already know uh but we can do it inside here we can just do title and the title will be uh home page just like this save this and as you can see here it says document if i refresh now it says home page which is perfect so we've passed the name this is brilliant and we can do the same for the about but now i want to show you how we can use a totally different layout specific layout for a different page now to do this we actually have to do it inside here where we render the above page so we have to do comma and inside here inside brackets we have to do layout and then we have to specify the layout that we want and this will be this will be i believe dot slash that and then and then sidebar i don't think that we have to type in js here so let's save this and let's inside here let's do uh let's save uh we obviously have to navigate to the above page and as you can see we have the sidebar working specifically for the above page so let's create all out super quickly in here and to speed up the process i'm just going to copy the full width layout from here and paste it into sidebar just like this and again to use the content from the about ejs i'm using the body tag but in this case i just want to create a site a site as well just to show you that they're two different layouts so what we can do is let's separate them a little bit and let's do side and let's just type something like sidebar like so and save now obviously i haven't done the css with this and it might be just easier to do a grid for this so let's do a div with the class name of i don't know layout layouts it doesn't matter too let's say this and wrap them in this element and the only reason i'm doing this and the other and the only reason i'm doing this is just so i can align them properly so let's say this and go to the css and let's do display grid and then um great template and we have two columns and let's do the first column to take two fractions of the available space and then the second column which is or sidebar to take one fraction of the available space let's save this save this and also inside the about page we okay we have a little bit of text but let's also let's just add a little bit i'm gonna do a paragraph here and also by the way i forgot to tell you that this is just a normal uh html page so you can be adding your div tags uh your paragraphs and so on it's literally a normal page that just renders inside each inside the layouts so sidebar or for it in our case or if it was the default one layouts.ejs so let me quickly add some content and this will be this is the page look it has to look it has two columns so let me just show you let's create the link here and this link will be href maybe to the home page just like this um let's save this go back refresh and we have a problem with the title and this is because we actually haven't passed the title and the two ways of fixing it we can either go to the uh sidebar page here let me just close the rest and obviously this title hasn't been passed and that's why it's certainly so we can either delete this or we can pass it from here so we can do title and then we can pass the name of uh about page just like this and then comma and then layout follow save this go back refresh and as you can see at the top here i don't know if you can see but we have about page this is the title we have the header included we have the text and we have the sidebar let's just quickly change the main area a little bit with css just so you can see a little bit better but i think you get the point anyway so i'm thinking of the main and then background color sync whatever and then let's just do padding 20 pixels and also we could do gap or pixels doesn't matter and as you can see now we have the header the left side column for the above page we have the sidebar which is unique to this page and if you go back to the home page which i've linked you will see that we're getting the home page which is full-width allowed and so on let me quickly add some text for the home page so that's the this is the page [Applause] let's add the link quickly to slash about go out just like this and save let's refresh and as you can see again everything is rendered nicely we have full we have full control of where we want to display the header we want to display the footer uh we have full control of the layouts now we can have different ads for each page and so on i think that might be pretty much everything for now i hope you like this tutorial i hope that i explained it well and if you like to see more tutorials just like this please follow me by by hitting the red button below i'll be posting a lot more node.js tutorials and don't forget to smash the like share the content with your friends and please comment below to let me know if you've enjoyed the project or if you have any problems or future suggestions and that's it i will see you in the next one thank you very much for watching

Channel: Raddy

Views: 79,319

Keywords: node, node js, node js tutorial, ejs template tutorial, ejs template, ejs template engine, express-ejs-layouts tutorial, express-ejs-layouts example, nodejs partials, partials, node partials, website partials, npm, raddy, raddythebrand, raddy the brand, learn nodejs, learning nodejs, ejs tutorial node js, ejs tutorial for beginners, dependencies, nodemon, build nodejs app, build node app, build node js website, build nodejs app for production, web development tutorial, tutorial

Id: lYVKbAn5Od0

Length: 27min 0sec (1620 seconds)

Published: Thu Aug 20 2020