A view engine is a software component that allows the rendering of dynamic content onto a web page. It acts as a bridge between the server side and the client side. When the user accesses any webpage then the server responds to them with dynamic pages which is possible only because of the view engine. In this article, we will be covering full details about the view engine and how it works.
Prerequisites
Why it is used?
- View engines are used in web development to generate dynamic HTML content.
- When a server receives a request, it uses the view engine to fill in these placeholders with actual data.
- View engines make it easier to manage and update web pages, especially when dealing with dynamic content.
Features
- Dynamic Content Rendering: The view engine enables the server-side rendering of dynamic pages.
- Template Reusability: It also supports template reusability, allowing you to reuse the components on multiple pages across your application
- Data Injection: View engines provide mechanisms for injecting data into templates. This enables you to pass dynamic data from your server-side code to your client-side views, making it easy to display dynamic content.
- Conditional Rendering: Most view engine also provide this feature where you can only render your dynamic pages when certain conditions are met, allowing you to efficiently use your server.
Steps to create app having EJS as a view engine
Step 1: Install Dependencies
First of all make sure node.js is installed on your system. Then, open your terminal and run the following command to install the necessary dependencies:
npm install express ejs
Json file structure:
{
"name": "add_css_to_ejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "\"GFG\"",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.19.2"
}
}
Step 2: Create the app
Then, create file name app.js where you will write your server code.
// app.js
const express = require('express');
const app = express();
Step 3: Set EJS as a view engine
Set EJS as the View Engine. In Express, you can set the default view engine by using the app.set() method. We'll set EJS as our view engine.
// Set EJS as the view engine
app.set('view engine', 'ejs');
Step 4: Define routes
Next step is to define a route that renders a dynamic HTML page using an EJS template.
// Define a route to render dynamic content
app.get('/', (req, res) => {
// Sample data
const user = { name: 'John', age: 30 };
// Render the 'index.ejs' template and pass data to it
res.render('index', { user });
});
Step 5: Create a Template File (index.ejs)
<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EJS Example</title>
</head>
<body>
<h1>Welcome <%= user.name %>!</h1>
<p>You are <%= user.age %> years old.</p>
</body>
</html>
Step 6: Start the server
These code will help you to start the server at 3000 port locally in your system.
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Step 7: Run the Application
You can do it by executing `node app.js` in your terminal. it will allow you to access that HTML file that you have created above on your local server.
node app.js
Step 8: Watch the app running
Now, open your web browser and navigate to http://localhost:3000.
Project structure:

Example: This example shows the use of EJS view engine.
HTML
<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksForGeeks EJS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #4caf50; /* Green background color */
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1, p {
color: #fff; /* White text color */
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to GeeksForGeeks <%= user.name %>!</h1>
<p>You are <%= user.age %> years old.</p>
</div>
</body>
</html>
JavaScript
// app.js
// Import required modules
const express = require('express');
const app = express();
// Set EJS as the view engine
app.set('view engine', 'ejs');
// Define a route to render dynamic content
app.get('/', (req, res) => {
// Sample data
const user = { name: 'John', age: 30 };
// Render the 'index.ejs' template
// and pass data to it
res.render('index', { user });
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Output:

Similar Reads
What is AI search Engine?
AI search engines use artificial intelligence (AI) to understand queries in a more intuitive, human-like manner, unlike traditional search engines that rely on keyword matching,. They aim to deliver highly relevant, personalized, and context-aware results by analyzing not just the words you type but
10 min read
What is a View in Backbone.js ?
Backbone view is a convention for setting up view interface for user interaction. In backbone.js, there are 7 modules HTTP request, Router, View, Events, Model, and Collection. Whenever a user makes a request it is directed to the router and in response to these requests, a user interface is display
4 min read
What is EJS Template Engine ?
EJS Template Engine or EJS is a popular template engine for web development. it is used in Nodejs. It allows you to generate dynamic content by embedding JavaScript to HTML content. EJS serves as a templating language, utilizing plan javascript to HTML. It allows the injection of data into the templ
3 min read
What is GAV (Global as View)?
There are many databases and data sources that need integration. Almost every application has many sources of data that can be used to work together. Data integration involves integrating data from various sources and it has a single view over the sources. It is done to answer queries using the info
4 min read
What is a Video Card?
Today's world has lots of high-quality videos, 3D games, and graphic design software that show complex and detailed digital images. Showing these images is very demanding and normal computer processors (CPUs) can't handle everything needed. So special video cards were invented to help with graphics
7 min read
Getting Started with View Engine
A view engine is a tool used in web development to create dynamic HTML content based on data from the server. It acts as a template processor, allowing developers to integrate data with predefined HTML templates easily. View engines are commonly used in frameworks like Express.js for Node.js, Django
4 min read
Why use View Engines with Express ?
Express.js is a popular and adaptable framework for developing web apps and APIs using Node.js. Its simplicity, versatility, and solid features make it a popular option among developers. The usage of view engines is an important component of Express.js that greatly helps to its efficacy. In this art
5 min read
What is Angular ?
Angular is an open-source web application framework maintained by Google and a community of developers. It is designed to build dynamic and interactive single-page applications (SPAs) efficiently. With Angular, developers can create robust, scalable, and maintainable web applications. Table of Conte
5 min read
Filters in Pug View Engine
Pug is a template engine that can be used to create HTML documents. It's used to write templates that are then compiled into functions that take in data and render HTML documents. We will discuss the different types of Filters in Pug Template and their Approaches: Table of Content 1. :markdown:2. :j
4 min read
What Is GNOME in Linux?
GNOME Linux, a pivotal desktop environment in the Linux landscape, stands as the epitome of user-centric design and functionality. Developed under the acronym GNOME, which stands for GNU Network Object Model Environment, this desktop environment has earned its stripes for delivering a seamless, eleg
7 min read