Hi, guys.
In this lesson, we're going to be learning about how to create Partials using EJS. And this whole world
of layouts, partials, templating,
what exactly is the difference between all of these different things?
That is what you're going to find out by the end of this lesson.
Now, one of the things that we haven't considered so far in our backend and server-side development
is styling and all the great things we learned about the frontend, all of the adding stylesheets, adding
Bootstrap, using Flexbox, basically adding all the stuff that makes our website look beautiful.
And if we want to build a website where there's animations, where there's beautiful styling, where
we have navbars from Bootstrap and Flexbox layouts, and all of those great things that we learned in the
frontend section of the course,
what do we need to do?
Well, we would have to add quite a lot of code into the head section of our HTML files, adding in
all the stylesheets, we'd probably need to add a navbar and it's miles away from simply just doing
res.send and then sending over some sort of unstyled h1.
But if we simply go ahead and just add a whole bunch of stylesheets into the head section of our EJS
files, you'll notice that it doesn't actually work.
And the reason for this is because these files are what's known as static files.
The CSS or the images that you want to include on your website don't ever change,
unlike the files that are being generated dynamically from your backend.
For example, your HTML files in the form of EJS, which has to be interpreted and then rendered and
then converted into HTML to be sent to the browser.
Now, similarly, the JavaScript in your index.js needs to be run and it's used to determine the functionality
of your website.
Normally what happens with Node-based backends is we create a public folder where we add in all of our
static files, so maybe we can put our images in there, our styles in there, our favicons, basically
any file that doesn't change.
And then in order to tell Express that that is where our static files are located, we can use the middleware
express.static and then define the location or the name of our public folder.
Remember, this is the top level of the project.
At the top level, we've got our public folder and this is normally how these files are structured in
Node and Express projects.
If your public folder happened to be inside, I don't know, something else,
src/public, then of course you would change this path to correspond to the location.
But basically once we've told Express where our public folder is, it will treat everything inside as
a static file.
That means when we create our stylesheet links, the href will be relative to the location of the public
folder.
In this case, notice how the path to my stylesheet is /styles/layout.
css.
And this is because this layout.css is located in a folder called styles and it's inside this folder
where we've got our layout.css and then the styles folder is then located in the actual public folder.
So this is how our file is structured. Because we've already pointed towards the public folder as the
location of our static files,
then in order to define the location of any static files you want to use, say in your index.ejs, you
have to start the path from public and then you continue to the location.
And that's how we end up with /styles/layout.css. And the reason why we need
to tell Express the location of our public folder and to set these files as static is because the way
that file paths work in Node and Express for dynamic pages is a little bit different from static pages.
For example, if on our website we have some navigation links, just as I've got here, it's going to
different pages in my website and it's rendering different
EJS files.
But the way that I'm getting to these locations, is actually by sending GET requests to a particular
route.
These dynamic parts of our website are routed and their locations are generated dynamically, whereas
the static parts of our website, such as where our images are or where our CSS lives, doesn't need
to be generated dynamically,
and so we can simply specify the static folder that they live in.
Essentially, what all of this means for us is when you want to use a static file such as an image or
a CSS file, you place them inside a public folder which is at the topmost level of your project.
So directly in your project folder, you link to them in the EJS files relative to the location of your
public folder, and then inside your server you can use app.use() to use the Express middleware that's
express.static() to specify the location of all of your static files.
So now that we know how we can add back all of our styling and frontend code to style our websites,
then you'll realize that in your EJS files, you end up with a lot of repeated code if you are going to
have a multi-page website because this part, the head and the header, especially if you have a navbar
or if you have a footer, they're going to be exactly the same across all of your pages.
The only part that really changes is the content.
So in order to not have a ton of repeated code like what we've got here in our index.ejs across all of
our different EJS files, maybe our about.ejs, our contacts.ejs, so that we don't have to repeat all of this
code and clutter up what's essentially our content pages,
what we can use is some of the features of EJS.
So we already know that we can use EJS for templating where we replace parts of our code using these EJS
tags in order to insert bits of dynamic content into the actual body of our code.
So maybe this part can have a dynamically generated year and maybe this part can have some sort of array
being sent over from the back-end.
So we're already aware that we can use EJS for templating.
But in this lesson I want to talk a bit more about how we can use EJS in order to reduce a whole bunch
of repeated code in our website.
And we can do that using Partials.
We can use the EJS tag that is angle bracket, percentage sign, minus (<%-), and then the keyword, "include."
So notice it's include not includes and then the name of the file that we want to include at this location.
Let's say we have a website where we have the main body of content, but at the beginning we want to
add a header and at the end we want to add a footer which is going to repeat across our entire website
and all of the different pages,
then what we can do is we can add the "include" header at the beginning of our file, say index.ejs,
and then at the end of our file, after all of the content, we can include our footer. So that just
slots those bits into the right positions
and all you have to focus on is what is going to change in terms of the content.
Let's go ahead and try an exercise and cement our knowledge by writing some code ourselves.
Download the 4.3 EJS Partials zip file.
As always, with all our node projects, the first thing you'll need to do is to run "npm i" to install
the node modules in the package.json and then once you've done that I want you to use Nodemon to start
up the solution.js so that you can see what it is that you're aiming for.
So go ahead and open up localhost:3000.
You should be able to see that you have a header with a navbar, you have a footer that has animations
and everything on the home page has beautiful styling.
Now when you go to the about pages or the contact pages, then that's when things start to break down
and it's your job to take a look inside the index.js go through the steps I've listed here for you to
write some code and fix all of the parts
of the website.
Step 1. is to be able to render this home page, which is your index.ejs.
You know how to set up the GET route for the home route and make sure that this home page shows up.
Now, the home page is not going to show up with any styling until you write some code to make sure
that your static files, like your images and your CSS, actually show up.
And then step 3. is to add the routes to handle the render of the About and Contact pages.
If you take a look inside the header.ejs, you can see the href of each of these navigation links.
So this one is going to hit up /about.
Essentially, remember, a link is kind of just like a GET request, right?
And it's going to hit up this route and the contact page is going to hit up this route.
So have a think about how you might be able to detect that in your index.ejs and be able to render the
correct EJS pages.
The final step is to add the Partials to the About and Contact pages to show the header and footer and
of course the styling which comes in the header to those pages.
So instead of getting these broken pages, you have the same styling on the About and Contact pages.
This is your goal.
Pause the video and give this challenge a go.
All right.
Hopefully, that was easy enough, and you managed to go through all four of the steps achieving the end
goal.
Let's run through the solution code together.
Step 1 is to render the home page, the root route, which should render our index.ejs.
If we take a look inside the solution.js you can see all I've got is an app.get() hitting up the root
route so that when a browser or the client side makes a get request to that route, I'm going to res.render()
the index.ejs.
If we take a look inside the index.ejs, it already has the partial code in the beginning and the end,
so it's rendering the partials/header and the partials/footer.
Notice that these files are always relative to the views folder.
Just as when we render EJS files, we use the path relative to the views folder.
So for example, if index.ejs was inside another folder, let's say we had a folder called main and
that's where our index.ejs was located,
then we would have to render main/index.ejs.
So it's always relative to the location of the views folder when we do our res.render.
So let's go ahead and restore that and make sure that we get back to the same structure as before.
And so similarly, when we use the, include, EJS tag, we also are providing the location of the file
we want to include, the partial, in a file path that's relative to the views folder.
In our case, the header is located in the views folder inside the partials folder and the name of the
file is header.ejs.
So hopefully you've already spotted how that works, but if you haven't, this is a quick point just
to so you noticed that. Step 2. is to make sure that the static files are linked to and the CSS shows
up.
As I mentioned in the lesson previously, we need to use the Express Middleware, express.static() to specify
the location of our public folder so that Express knows where our static files are located.
If you look inside the header.ejs where we've got our links to our CSS files, you can see the href's here
are all relative to the public folder.
So it's public/styles/layout or /content.
By adding in this line of code, we tell Express where our static files are located and we can start
using them, using the links that have a relative file path, relative to the location that we specified
here.
And once you've added this line and you go to your home page, you should be able to see your home page
rendered with the header, with the footer and all of the styling.
The next step is to add the routes that handle the render of the About and Contact pages.
Now this is the first time that we've actually made a multi-page website with our backend server, but
the concept of all of this is very simple.
If you hover over the About link in the navbar, you can see right at the bottom left that it's trying
to hit up a route called /about.
If we inspect this, you can see this is a nav-link and it has the href of /about.
What that means is when I click on this, my browser is going to make a GET request to our localhost:
3000/about and we know all about routes and GET and POST requests,
so all we need to do is to make sure that our server knows how to handle that request.
When a GET request comes through to our server hitting up this route, we should be rendering the about.ejs
page. And when a GET request comes through to the contact route we should render the contact.ejs.
So a multi-page website with navigation links is as easy as a bunch of different GET requests.
Once you have added those get route handlers, then we should be able to navigate to the about page
and the contact page.
So the final thing we need to do in step4. is to add the partials to the about and contact pages
so that the header and footer shows up and the styling shows up just like on the home page.
All we need to do is to go in here and then add our header injecting it using the EJS angle bracket, percentage
sign, minus (<%-), and then "include" and then the "name of the file" that you want to include.
Again, the file is relative to the views folder.
So it will be partials/header.ejs and then let's close off our EJS bracket.
And then similarly at the bottom, we add in the partials/footer.ejs.
If I hit Save, go back, now I go to my About page,
you can see all my styling header, footer, navigation bar,
it's all in place without me having to add any really real code to my EJS files. And look at how simple
it is to do this and also how succinct it makes our files instead of cluttering it up with a whole bunch
of code and these parts, the header, the footer or other parts can be reused and simply injected using
partials.
Now all we have to do is add this to the Contact page and then we are pretty much done and we have completed
the entire project.
Hopefully, that was an easy win, but reinforced some of the things that we learned in this lesson about
partials and how you can use partials in EJS and also how you can use static files to render CSS and
styling in your Express Node Web Apps.
In the next lesson, we've got our final project of the module coming up where we're going to be building
a Band Name Generator.
So for all of that and more, I'll see you there.