Building an e-Commerce website with Node – Part 13 – Creating partials for your web site

A partial is a part of your page. The footer would be a partial, the navigation bar would be a partial etc.

So, in the views folder, we have to create a new folder named “main”. This folder will contain all our website pages. The file home.ejs have to be moved to the “main” folder. We do the same with about.ejs file. Now, home.ejs and about.ejs are in the ./views/main folder.

The route to these two file has to be changed as well. So, go to the server.js file and change the routes to these two files. You can see the modified routes below:


app.get('/', function(req, res) {
  res.render('main/home');
});

app.get('/about', function(req, res) {
  res.render('main/about');
});

Next, inside the views folder create a new folder and name it “partials”. Inside this folder let’s create navbar.ejs and footer.ejs. Inside the navbar.ejs I added <p>navbar</p> and inside footer.ejs I added <p>footer</p>, so they are not empty.

Next, we need to add the navbar.ejs and the footer.ejs to our boilerplate.ejs file so they will appear in all our pages. Go to boilerplate.ejs file and inside the body tag (where you want the navigation bar to appear) add <% include ./partials/navbar %> and before the body tag ends add <% include ./partials/footer %>.

So our boilerplate.ejs file should look like this:


<!DOCTYPE html>
<head>
 <title>My Title</title>
</head>

<body>
  <% include ./partials/navbar %>
  <h1>Boilerplate Page</h1>
  <%- body -%>
  <% include ./partials/footer %>
</body>
</html>

Now, if you visit http://localhost:3000 you should see the navbar and the footer.

Partials to organize your web page with node.js

Leave a Reply