Setting up a templating engine in express framework.

A template engine enables you to use static template files in your application. JavaScript templating engines enable you to add dynamic logic to static HTML pages.If you are a heavy front-end JavaScript developer, using a templating engine will save you countless hours of unnecessary work.

We are going to set up a templating engine to handle your layout pages in express framework and for that we will be using express3-handlebars.

Express3-handlebars is a commonly used templating for express and node.

First we will install express3-handlebars using npm.

npm i --save express3-handlebars

Since we had created our express server,we will set our templating engine now. For those who had missed the server,here it is below.

//import the express module
const express = require("express");
const app = express();

//set the port number to listen on
app.set('port',process.env.PORT || 8080);

//create a callback for listening on the server 
app.listen('port',()=>{
    console.log(`
Listening on port ${app.get('port')}.Press CTRL Z to cancel.
`);
}):

Lets's set it up now.

//import the express module
const express = require("express");
const app = express();

//set up handlebars
const handlebars = require('express3- handlebars')
              .create({defaultLayout:'main'});
app.engine('handlebars',handlebars.engine);
app.set('view engine','handlebars');

//set the port number to listen on
app.set('port',process.env.PORT || 8080);

//create a callback for listening on the server
app.listen('port',()=>{
    console.log(`
Listening on port ${app.get('port')}.Press CTRL Z to cancel.
`);
}):

Now that we set express3-handlebars as the default templating engine,we now need to create a views directory to store our layouts.

Create a directory called views. Head inside that directory and create another directory called layouts.Inside the layouts directory, create a file called main.handlebars.

The main.handlebars file is where the HTML page wrapper which can be reused for the different views of the app will be.Let's create it.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Welcome to our webpage</title>
</head>
<body>
 
    {{{body}}}
 
</body>
</html>

Now let's create views for our web pages.We will create views/home.handlebars and views/about.handlebars

views/home.handlebars

<!--views/home.handlebars for homepage-->
<h1>This is the home page</h1>

views/about.handlebars

<!--views/about.handlebars for about page-->
<h1>This is the about page</h1>

Since we have our views,we will tell our app to render them once their routes are called upon.The '/' always represents the route to our homepage.

//our slash route will render the home view
app.get('/',(req,res)=>{
    res.render('home');
});

//our about route will render the about view
app.get('/about',(req,res)=>{
    res.render('about');
});

Here is the full code:

//import the express module
const express = require("express");
const app = express();

//set up handlebars
const handlebars = require('express3- handlebars')
              .create({defaultLayout:'main'});
app.engine('handlebars',handlebars.engine);
app.set('view engine','handlebars');

//set the port number to listen on
app.set('port',process.env.PORT || 8080);

//our slash route will render the home view
app.get('/',(req,res)=>{
    res.render('home');
});

//our about route will render the about view
app.get('/about',(req,res)=>{
    res.render('about');
});

//create a callback for listening on the server
app.listen('port',()=>{
    console.log(`
Listening on port ${app.get('port')}.Press CTRL Z to cancel.
`);
}):

Now run the code and open the two links: localhost:8080/ and localhost:8080/about

In my next post,I will talk about middlewares and set up the body-parser middleware. Thank you for your time.Have a great day.

Have bug-free day!

This post is also available on DEV.