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
How to Setup Handlebars View Engine in Node.js ?
Handlebars is a template engine that is widely used and easy to use. The pages contain .hbs extension and there are many other template engines in the market like EJS, Mustache, etc. Installation of hbs module: You can visit the link Install hbs module. You can install this package by using this com
2 min read
How to Setup View Engine in Node.js ?
View engines are useful for rendering web pages. There are many view engines available in the market like Mustache, Handlebars, EJS, etc but the most popular among them is EJS which simply stands for Embedded JavaScript. It is a simple templating language/engine that lets its user generate HTML with
2 min read
How to Use Embedded JavaScript (EJS) as a Template Engine in Express JS ?
Embedded JavaScript (EJS) is a simple templating language that helps us to generate HTML markup with plain JavaScript. It's commonly used with Node.js to create dynamic web pages. It also helps to incorporate JavaScript into HTML pages. Approach to use EJS as Template Engine in Express JS:Install EJ
2 min read
How to Structure my Application in Express.js ?
A clean and well-organized folder structure is crucial for building maintainable and scalable Express.js applications. This article explores best practices for structuring your application, organizing components, and maintaining a modular architecture.Why Structure an Express Application?A well-stru
6 min read