Building an e-Commerce website with Node – Part 12 – Using boilerplate template for building web pages

Boilerplate is a very robust template for building websites. To get started, go to the views folder and create a file named boilerplate.ejs.

Within the boilerplate.ejs we start writing a basic HTML web page.


<!DOCTYPE html>

<head>
  <title>My Title</title>
</head>

<body>
  <h1>Boilerplate Page</h1>
  <%- body -%>
</body>

</html>

The magical line is <%- body -%>. You will see soon what it does! First you go to home.ejs file and at the very top add <% layout(‘boilerplate’) -%>.

Basically, it requires a layout which is boilerplate.ejs file.

Now, go to http://localhost:3000.

Boilerplate in action with node.js

It says on top “Boilerplate Page” which is exactly what we wrote in the boilerplate.ejs file.

We can go ahead and create a file named about.ejs (in the views folder).
We copy from home.ejs the <% layout(‘boilerplate’) -%> code, which means this page requires the boilerplate.ejs file (which is like a template), and paste it at the top of about.ejs file. Below this we are going to write something so the page won’t be completely empty.


<h1>This is the about.ejs page</h1>

We can’t view the page in the browser yet because we have to create a route for it. Go to the server.js file and create the route for about.ejs (just like you created the route for the home page).


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

Now, go to your browser and visit http://localhost:3000/about. Everything works just as it is supposed to.

Boilerplate in action with Node.js

Leave a Reply