How to Configure multiple View Engines in Express.js ?
Last Updated :
26 Mar, 2024
View engines present in web application framework are basically the template engines that allow us to embed dynamic content into the web pages, render them on the server, and send them to the client. With the help of these, we can serve dynamic data, and utilise the template inheritance properties to server our web pages, quickly and efficiently.
Multiple View Engines available in Express.js
We can use and configure multiple view engines are available to be used in nodeJS and expressJS application. Some of the view engines that we will use and configure in this project are ejs, and pug.
- With the help of ejs, we can embed JavaScript code directly inside HTML using "<%= %>" syntax.
- With the help of pug, we can embed JavaScript code directly inside HTML templates using "${}" syntax.
Steps to create the application
Step 1: Setting up the project
Let's create a nodeJS and expressJS project, and cd into the project using the below commands:
mkdir express-project
cd express-project
npm init -y
npm install express
Also, create sample.ejs, sample.pug, and server.js files which we will use the latter steps:
touch server.js
touch sample.ejs
touch sample.pug
Folder Structure:
The updated dependencies in package.json file will look like :-
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.3",
"pug": "^3.0.2"
}Step 2: Using ejs and Pug view engines
In this step, we will create a new file at root level, named server.js. And inside the server file, we will initialise our express application. We will also configure "ejs" and "pug" template engines in the same file, and we will use the configuration to serve the pug and ejs files to the client.
Filename: server.js
JavaScript
const express = require('express');
const app = express();
app.set('views', '.');
app.set('view engine', 'ejs');
app.engine('pug', require('pug').__express);
app.set('view engine', 'pug');
app.get('/ejs', (req, res) => {
res.render('sample.ejs', { name: 'Will Smith' });
})
app.get('/pug', (req, res) => {
res.render('sample.pug', { name: 'Will Smith' });
})
app.listen(3000, () => {
console.log('Server is running on port 3000');
})
Step 3: Creating ejs view
In this step, we will create a view template using ejs, that will contain a paragraph tag with some static content, and a dynamic variable "name".
Filename: sample.ejs
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>EJS View</title>
</head>
<body>
<p>Welcome from EJS, <%= name %>!</p>
</body>
</html>
Output:
Now, run the server using the below command, and go to the url "http://localhost:3000/ejs" to see the output.
node server.js
Step 4: Creating pug view
In this step, we will create a view template using ejs, that will contain a paragraph tag with some static content, and a dynamic variable "name".
Filename: sample.pug
HTML
doctype html
html(lang='en')
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title Pug View
body
p Welcome from PUG, #{name}!
Output:
Now, run the server using the below command, and go to the url "http://localhost:3000/pug" to see the output.
node server.js
Similar Reads
How to use Template Engines in Express JS ? Express.js is a popular web framework for Node.js that simplifies the process of building web applications. One of the key features of Express is its ability to integrate with template engines, allowing developers to dynamically generate HTML pages with data from their server. In this article, we'll
3 min read
How to add pug engine in Express.js ? Express is a small framework that sits on top of Node.js web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing; it adds helpful utilities to Node.js’s HTTP objects; it facilitates the re
2 min read
How to Create Multiple Routes in the Same Express.js Server ? Creating multiple routes in an Express.js server involves defining routes in separate modules. This modular approach allows for better organization and maintainability by managing different routes independently and mounting them in the main server file. ApproachTo create multiple routes in an Expres
2 min read
How to include CSS files in EJS View Engine? Including CSS files is important for styling web pages in web development with Node.js, Express, and EJS. In this article, we will explore the process of including CSS in such projects to enhance the visual appeal and user experience. Approach to include CSS file in EJS:We're building a Node.js web
3 min read
Explain the concept of template engines in Express Express JS utilizes template engines to seamlessly merge HTML with data, enabling dynamic web page creation. These engines leverage special tags to generate templates filled with data upon page request. Popular options like EJS, Pug, and Handlebars streamline this process, facilitating the efficient
2 min read
How to run pug View Engine using Express? Pug or Jade is the template engine for NodeJS and browsers that are used for the process of developing dynamic HTML content. This template engine uses the indentation-based syntax like Python to generate the HTML markup, which makes it simpler to write and also to maintain the code. If we want to ru
2 min read