Hi, guys. 1
In this lesson, we're going to be learning about how to create Partials using EJS. And this whole world 2
of layouts, partials, templating. 3
What exactly is the difference between all of these different things? 4
That is what you're going to find out by the end of this lesson. 5
Now, one of the things that we haven't considered so far in our back end and server side development 6
is styling and all the great things we learn about the frontend, all of the adding stylesheets, adding 7
Bootstrap using Flexbox, basically adding all the stuff that makes our website look beautiful. 8
And if we want to build a website where there's animations, where there's beautiful styling, where 9
we have navbars from Bootstrap and Flexbox layouts and all of those great things that we learned in the 10
frontend section of the course, 11
what do we need to do? 12
Well, we would have to add quite a lot of code into the head section of our HTML files, adding in 13
all the stylesheets, we'd probably need to add a navbar and it's miles away from simply just doing 14
res.send and then sending over some sort of unstyled h1. 15
But if we simply go ahead and just add a whole bunch of stylesheets into the head section of our EJS 16
files, you'll notice that it doesn't actually work. 17
And the reason for this is because these files are what's known as static files. 18
The CSS or the images that you want to include on your website don't ever change, 19
unlike the files that are being generated dynamically from your backend. 20
For example, your HTML files in the form of EJS, which has to be interpreted and then rendered and 21
then converted into HTML to be sent to the browser. 22
Now, similarly, the JavaScript in your index.js needs to be run and it's used to determine the functionality 23
of your website. 24
Normally what happens with Node-based backends is we create a public folder where we add in all of our 25
static files, so maybe we can put our images in there, our styles in there, our favicons, basically 26
any file that doesn't change. 27
And then in order to tell Express that that is where our static files are located, we can use the middleware 28
express.static and then define the location or the name of our public folder. 29
Remember, this is the top level of the project. 30
At the top level, we've got our public folder and this is normally how these files are structured in 31
Node and Express projects. 32
If your public folder happened to be inside, I don't know, something else, 33
src/public, then of course you would change this path to correspond to the location. 34
But basically once we've told Express where our public folder is, it will treat everything inside as 35
a static file. 36
That means when we create our stylesheet links, the href will be relative to the location of the public 37
folder. 38
In this case, notice how the path to my stylesheet is /styles/layout. 39
css. 40
And this is because this layout.css is located in a folder called styles and it's inside this folder 41
where we've got our layout.css and then the styles folder is then located in the actual public folder. 42
So this is how our file is structured. Because we've already pointed towards the public folder as the 43
location of our static files, 44
then in order to define the location of any static files you want to use, say in your index.ejs, you 45
have to start the path from public and then you continue to the location. 46
And that's how we end up with /styles/layout.css. And the reason why we need 47
to tell Express the location of our public folder and to set these files as static is because the way 48
that file paths work in Node and Express for dynamic pages is a little bit different from static pages. 49
For example, if on our website we have some navigation links, just as I've got here, it's going to 50
different pages in my website and it's rendering different 51
EJS files. 52
But the way that I'm getting to these locations, is actually by sending GET requests to a particular 53
route. 54
These dynamic parts of our website are routed and their locations are generated dynamically, whereas 55
the static parts of our website, such as where our images are or where our CSS lives, doesn't need 56
to be generated dynamically, 57
and so we can simply specify the static folder that they live in. 58
Essentially, what all of this means for us is when you want to use a static file such as an image or 59
a CSS file, you place them inside a public folder which is at the topmost level of your project. 60
So directly in your project folder, you link to them in the EJS files relative to the location of your 61
public folder and then inside your server you can use app.use() to use the Express middleware that's 62
express.static() to specify the location of all of your static files. 63
So now that we know how we can add back all of our styling and frontend code to style our websites, 64
then you'll realize that in your EJS files, you end up with a lot of repeated code if you are going to 65
have a multi-page website because this part, the head and the header, especially if you have a navbar 66
or if you have a footer, they're going to be exactly the same across all of your pages. 67
The only part that really changes is the content. 68
So in order to not have a ton of repeated code like what we've got here in our index.ejs across all of 69
our different EJS files, maybe our about.ejs, our contacts.ejs, so that we don't have to repeat all of this 70
code and clutter up what's essentially our content pages, 71
what we can use is some of the features of EJS. 72
So we already know that we can use EJS for templating where we replace parts of our code using these EJS 73
tags in order to insert bits of dynamic content into the actual body of our code. 74
So maybe this part can have a dynamically generated year and maybe this part can have some sort of array 75
being sent over from the back-end. 76
So we're already aware that we can use EJS for templating. 77
But in this lesson I want to talk a bit more about how we can use EJS in order to reduce a whole bunch 78
of repeated code in our website. 79
And we can do that using Partials. 80
We can use the EJS tag that is angle bracket percentage sign minus (<%-) and then the keyword, "include." 81
So notice it's include not includes and then the name of the file that we want to include at this location. 82
Let's say we have a website where we have the main body of content, but at the beginning we want to 83
add a header and at the end we want to add a footer which is going to repeat across our entire website 84
and all of the different pages, 85
then what we can do is we can add the include header at the beginning of our file, say index.ejs, 86
and then at the end of our file, after all of the content, we can include our footer. So that just 87
slots those bits into the right positions 88
and all you have to focus on is what is going to change in terms of the content. 89
Let's go ahead and try an exercise and cement our knowledge by writing some code ourselves. 90
Download the 4.3 Partials zipped file. 91
As always, with all our node projects, the first thing you'll need to do is to run npm i to install 92
the node modules in the package.json and then once you've done that I want you to use Nodemon to start 93
up the solution.js so that you can see what it is that you're aiming for. 94
So go ahead and open up localhost:3000. 95
You should be able to see that you have a header with a navbar, you have a footer that has animations 96
and everything on the home page has beautiful styling. 97
Now when you go to the about pages or the contact pages, then that's when things start to break down 98
and it's your job to take a look inside the Index.js go through the steps I've listed here for you to 99
write some code and fix all of the parts 100
of the website. 101
Step 1. is to be able to render this home page, which is your index.ejs. 102
You know how to set up the GET route for the home route and make sure that this home page shows up. 103
Now, the home page is not going to show up with any styling until you write some code to make sure 104
that your static files, like your images and your CSS, actually show up. 105
And then step 3. is to add the routes to handle the render of the About and Contact pages. 106
If you take a look inside the header.ejs, you can see the href of each of these navigation links. 107
So this one is going to hit up /about. 108
Essentially, remember, a link is kind of just like a GET request, right? 109
And it's going to hit up this route and the contact page is going to hit up this route. 110
So have a think about how you might be able to detect that in your index.ejs and be able to render the 111
correct EJS pages. 112
The final step is to add the Partials to the About and Contact pages to show the header and footer and 113
of course the styling which comes in the header to those pages. 114
So instead of getting these broken pages, you have the same styling on the About and Contact pages. 115
This is your goal. 116
Pause the video and give this challenge a go. 117
All right. 118
Hopefully that was easy enough and you managed to go through all four of the steps achieving the end 119
goal. 120
Let's run through the solution code together. 121
Step one is to render the home page, the root route, which should render our index.ejs. 122
If we take a look inside the solution.js you can see all I've got is an app.get() hitting up the root 123
route so that when a browser or the client side makes a get request to that route, I'm going to res.render() 124
the index.ejs. 125
If we take a look inside the index.ejs, it already has the partial code in the beginning and the end, 126
so it's rendering the partials/header and the partials/footer. 127
Notice that these files are always relative to the views folder. 128
Just as when we render EJS files, we use the path relative to the views folder. 129
So for example, if index.ejs was inside another folder, let's say we had a folder called main and 130
that's where our index.ejs was located, 131
then we would have to render main/index.ejs. 132
So it's always relative to the location of the views folder when we do our res.render. 133
So let's go ahead and restore that and make sure that we get back to the same structure as before. 134
And so similarly, when we use the, include, EJS tag, we also are providing the location of the file 135
we want to include, the partial, in a file path that's relative to the views folder. 136
In our case, the header is located in the views folder inside the partials folder and the name of the 137
file is header.ejs. 138
So hopefully you've already spotted how that works, but if you haven't, this is a quick point just 139
to so you noticed that. Step 2. is to make sure that the static files are linked to and the CSS shows 140
up. 141
As I mentioned in the lesson previously, we need to use the Express Middleware, express.static() to specify 142
the location of our public folder so that Express knows where our static files are located. 143
If you look inside the header.ejs where we've got our links to our CSS files, you can see the href's here 144
are all relative to the public folder. 145
So it's public/styles/layout or /content. 146
By adding in this line of code, we tell Express where our static files are located and we can start 147
using them, using the links that have a relative file path, relative to the location that we specified 148
here. 149
And once you've added this line and you go to your home page, you should be able to see your home page 150
rendered with the header, with the footer and all of the styling. 151
The next step is to add the routes that handle the render of the About and Contact pages. 152
Now this is the first time that we've actually made a multi-page website with our backend server, but 153
the concept of all of this is very simple. 154
If you hover over the About link in the navbar, you can see right at the bottom left that it's trying 155
to hit up a route called /about. 156
If we inspect this, you can see this is a nav-link and it has the href of /about. 157
What that means is when I click on this, my browser is going to make a GET request to our localhost: 158
3000/about and we know all about routes and GET and POST requests, 159
so all we need to do is to make sure that our server knows how to handle that request. 160
When a GET request comes through to our server hitting up this route, we should be rendering the about.ejs 161
page. And when a GET request comes through to the contact route we should render the contact.ejs. 162
So a multi-page website with navigation links is as easy as a bunch of different GET requests. 163
Once you have added those get route handlers, then we should be able to navigate to the about page 164
and the contact page. 165
So the final thing we need to do in step4. is to add the partials to the about and contact pages 166
so that the header and footer shows up and the styling shows up just like on the home page. 167
All we need to do is to go in here and then add our header injecting it using the EJS angle bracket percentage 168
sign minus (<%-) and then "include" and then the "name of the file" that you want to include. 169
Again, the file is relative to the views folder. 170
So it will be partials/header.ejs and then let's close off our EJS bracket. 171
And then similarly at the bottom, we add in the partials/footer.ejs 172
If I hit Save, go back, now I go to my About page, 173
you can see all my styling header, footer, navigation bar, 174
it's all in place without me having to add any really real code to my EJS files. And look at how simple 175
it is to do this and also how succinct it makes our files instead of cluttering it up with a whole bunch 176
of code and these parts, the header, the footer or other parts can be reused and simply injected using 177
partials. 178
Now all we have to do is add this to the Contact page and then we are pretty much done and we have completed 179
the entire project. 180
Hopefully, that was an easy win but reinforced some of the things that we learned in this lesson about 181
Partials and how you can use partials in EJS and also how you can use static files to render CSS and 182
styling in your Express Node Web Apps. 183
In the next lesson, we've got our final project of the module coming up where we're going to be building 184
a Band Name Generator. 185
So for all of that and more, I'll see you there.