 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 use a 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 and get her page which will be all linked in the description below and let me open Visage to the 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 .css file we'll 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're only going to have two pages the index page and about page 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 forward just to show you how we can use the EJS layout last but not least of course we have all app.js and we have all packages 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 not one 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 command line terminal, power shell whatever you're using I've zoomed in quite a lot hopefully you can see and what we have to do is npm install and we have to install express EJS layouts just like this press enter this will install the dependency for us and if you go back 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 will link in the description below but as you can see I have required express we have port number of 5000 and then we actually listening app listening on this port number and I have set the VR engine to be obviously EJS because this will be using today I'm a very simple router and I have some 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 all good the first thing that we need to do to start using the express EJS layout is to require const and then we can do express layout and this will be equals require and the require that we need to do is express EJS layout just like this now that we have express EJS layout we actually need to make sure that our app is using 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 get in 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 the 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 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 show this one later and what we can do is we can use the body EJS tag which will then bring the data from each individual page so this will be a template the layout EJS and let me show you and inside here we can do like this body just like this and if we refresh you will see that we are 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 that's safe 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're actually rendering the homepage 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 can 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 layout EJS 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 are 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 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 gonna go with inside view so I'm gonna create a folder called layouts and inside here let's move the layout EJS and let me say let's say this is the full width layout so I could do rename and let's say full dash with full dash with 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 and 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 layouts and then slash full width dot and that's it so let's save this and let's see if this works if I 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 the full 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 a run 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 sidebar.ejs but what I mean by this is having a big left column and a sidebar on side now first of all let's start creating some of the pages okay let's first of all start building the full width page and I'm just going to do some super simple css in here so let's do with the class of wrapper and the reason I didn't want to use bush trap for this is because it adds 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 gonna 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 our header we have the about and we have the footer 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 dot css but actually forgot to include the star sheet so let's do that super quickly I'm gonna do a link of CSS and this will be main dot CSS CSS just like this and this works because we have in app.js we have set this 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 body color on this page so let's go back and finish off some of the styles so as you can see I have 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 all page and to do this we have the wrapper so with so let's set width to be 700 pixels margin zero auto to center line let's do background color to be white let's add some padding and let's see what we have okay this is looking a little bit better 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 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 footer is highlighted and this is the main content area here for website so 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 part shows 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 part shows so views part shows and part shows are basically gonna 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 in 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 part shows maybe we can create a new file called header dot ejs and I would 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 part shows and then slash header save this and let's see what happens if I refresh we have an error and this is because I actually have to put ejs in here also I forgot to close the ejs tag 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 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 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 go back and actually we are pretty much done with this layout one thing that we could do is maybe display a different title here and to do this we can do it with ejs so let's open ejs it's kind of hard to open ejs and let's do title okay to pass the title you probably already know but we can do it inside here we can just do title and the title will be a homepage just like this save this and as you can see here it says document if I refresh now it says homepage 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 about page so we have to do cover 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 layout 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 sidebars let's save and we obviously have to navigate to the about page and as you can see we have this sidebar working specifically for the about 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 side a side bar 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 some and save now obviously I haven't done the CSS for this and it might be just easier to do a grid for this so let's do a dip with the class name of I don't know loud layout sidebar it doesn't matter to wrap them in this element and the only reason I'm doing this and the only reason I'm doing this is just so I can align them properly so let's save this go to the CSS and let's do display grid and then grid 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 paragraph here and also by the way I forgot to tell you that this is just a normal HTML page so you can be adding your div tags your paragraphs and so on it's literally a normal page that just renders inside each inside the layouts so sidebar or full width in our case or if it was the default one layouts.ejs so let me quickly add some content and this will be this page look it has two columns so let me just show you let's create a link here and this link will be href maybe to the home page just like this 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 to fix in there we can either go to the sidebar page here let me just close the rest obviously this title it hasn't been passed and that's why it's already 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 about page just like this and then comma and then layouts will follow save this 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 backgrounds color sync whatever and then let's just do padding 20 pixels and also we could do gap this matter but as you can see now we have the header the left side column for the about page we have the sidebar which is unique to this page and if we go back to the home page which I've linked you will see that we're getting the home page which is forward layout and so on let me quickly add some text for the home page so let's do this is the page let's add the link quickly to slash about 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 where I want to display the footer we have full control of the layouts now we can have different layouts for each page and so on I think that might be pretty much everything from 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 hitting the red button below I will post 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