Setting up a templating engine in express
Tags: javascript, node, npm, html
Published: 2020-02-09 16:00:26

### <u>Setting up a templating engine in express framework</u>.
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.

```javascript
//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.

```javascript
//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`
```html
<!--views/home.handlebars for homepage-->
<h1>This is the home page</h1>
```


`views/about.handlebars`
```html
<!--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.

```javascript
//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:

```javascript
//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!