Building an e-Commerce website with Node – Part 11 – Using ejs and ejs-mate for rendering webpages

EJS is a templating language that lets you generate HTML markup with JavaScript. EJS-MATE is an extension of EJS that supercharges EJS and allows you to build flexible webpages.

First we need to require ejs and ejs-mate in the server.js file. Just below var bodyParser = require('body-parser'); type the following code:


var ejs = require('ejs');
var engine = require('ejs-mate');

In the middleware section of server.js file we have to teach node.js how to use ejs and ejs-mate.


app.engine('ejs', engine);
app.set('view engine', 'ejs');

Now, using the terminal, we have to install ejs and ejs-mate. We do that using the command npm install ejs ejs-mate --save. In package.json file they will be listed now as dependencies.

In order to use ejs properly, we always need to create, in the project folder, a new folder named “views”. In the views folder we are going to create now a new file named home.ejs.

In the home.ejs file let’s start adding some content so the visitors of our web page will see something.


<h1>MyEshop - Shop everything you will ever wated</h1>
<p>SignUp and start your shopping adventure</p>
<p>We have the best prices in the world</p>

At this point we don’t have the route to the home.ejs file. We have to create this route first in the server.js file.


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

In your browser go to http://localhost:3000.

home.ejs test in browser

Everything we wrote in the home.ejs file is now displayed in the browser.

Leave a Reply