In this example, we will see How To Use Template Engines With Express. A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client.
This approach makes it easier to design an HTML page. The significant benefit of such an approach when it comes to templates is explicitly being able to render HTML on the server side. So, we can do the SEO easily and are not rendering the JSON data. This article will look at some of the most popular JavaScript templating engines.
How to Use Template Engines With Express
First, we install the Express web framework, then implement different template engines in our node.js application.
Step 1: Create Node.js Express server
First, create a node.js project directory.
mkdir exptemplate
Now, go inside the folder and initialize the package.json file.
npm init -y
The next step is to install the express framework.
npm install express --save
Now, create a file inside the root called server.js and add the following code.
// server.js
const app = require('express')();
const PORT = process.env.PORT = 4000;
app.listen(PORT, () => {
console.log('The server is running on port',PORT);
});
We can use the nodemon server for development. So let us install it using the following command.
npm install nodemon --save
Now, start the server using the following command.
nodemon server
Step 2: Install and configure Pug templating engine
Now install our First templating engine, Pug, using the following command.
npm install pug --save
Create one folder inside the root called views.
Now that Pug is installed, set it as the templating engine for your app. You don’t need to ‘require’ it. Instead, add the following code to your server.js file.
// server.js
app.set('view engine', 'pug');
app.set('views',path.join(__dirname, 'views'));
Here, we have defined the template engine Pug.
Also, we have defined the directory from which these template files can load in our application.
So, when the request comes from the client, it will go to the router, and then the router redirects to one of the pages inside the views folder, and then that page will be rendered.
The next step is to create a file inside the views folder called template.pug and add the following code.
// template.pug
doctype html
html
head
title Hello From Pug Templating Engine
body
p.greetings#peopleHello Hello From Pug Templating Engine!
It is the pug syntax to write the HTML.
To run this page, add the following route to your server.js file.
// server.js
app.get('/template', function(req, res){
res.render('template');
});
So, our final server.js file looks like the below code.
// server.js
const app = require('express')();
const path = require('path');
const PORT = process.env.PORT = 4000;
app.set('view engine', 'pug');
app.set('views',path.join(__dirname, 'views'));
app.get('/template', function(req, res){
res.render('template');
});
app.listen(PORT, () => {
console.log('The server is running on port',PORT);
});
Save the file and see the console if we are running with errors, and then if not, make sure your nodemon server is running. If everything looks great, go to the browser and switch to the following URL.
http://localhost:4000/template
You can see that our HTML is rendering, and we have successfully integrated the Pug templating engine.
Step 3: Install and configure the Mustache template
We can use the Mustache templating engine in Express; you first install the mustache-express package.
npm i mustache-express
Now, require and configure the module. I have written the final server.js file for implementing the mustache-express module.
// server.js
const app = require('express')();
const path = require('path');
const PORT = process.env.PORT = 4000;
const mustacheExpress = require('mustache-express');
app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views',path.join(__dirname, 'views'));
app.get('/template', function(req, res){
res.render('index.html', {yourdata: 'Hello from Mustache Template'});
});
app.listen(PORT, () => {
console.log('The server is running on port',PORT);
});
Also, we need to create a file inside the views folder called index.html and write the following HTML code inside the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mustache Template Engine</title>
</head>
<body>
<div>
{{ yourdata}}
</div>
</body>
</html>
Save the file, go to the browser, and navigate to the following URL.
http://localhost:4000/template
You can see that we have successfully integrated the Mustache template in Express.
Step 4: Install and configure the EJS template
We can install the EJS(Embedded Javascript) template using the following command.
npm install ejs --save
Now, import the ejs template as well as configure the ejs template.
Write the final code inside the server.js file.
// server.js
const app = require('express')();
const path = require('path');
const PORT = process.env.PORT = 4000;
const ejs = require('ejs');
app.set('view engine', 'ejs');
app.set('views',path.join(__dirname, 'views'));
app.get('/template', function(req, res){
res.render('welcome.ejs', {yourdata: 'Hello from EJS Template'});
});
app.listen(PORT, () => {
console.log('The server is running on port',PORT);
});
So, here we have set the template engine to ejs. Now create a file called the welcome.ejs inside the views folder.
<!-- welcome.ejs --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>EJS Template</title> </head> <body> <%= yourdata %> </body> </html>
Save the file, go to the browser, and switch to the following URL.
http://localhost:4000/template
Now, we have successfully integrated the EJS template.
That’s it.
