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!
Top comments (1)
I wish I find your article earlier. After a while I decide to write down my express configuration.
We can use either EJS, Nunjucks, Pug or Handlebars.
epsi-rns.gitlab.io/frontend/2020/0...