EJS: EJS or Embedded Javascript Templating is a templating engine used by Node.js. Template engine helps to create an HTML template with minimal code. Also, it can inject data into an HTML template on the client side and produce the final HTML. EJS is a simple templating language that is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript into HTML pages. To begin with, using EJS as templating engine we need to install EJS using the given command:
npm install ejs --save
Note: npm in the above commands stands for the node package manager, a place where install all the dependencies. –save flag is no longer needed after the Node 5.0.0 version, as all the modules that we now install will be added to dependencies.
Now, the first thing we need to do is to set EJS as our templating engine with Express which is a Node.js web application server framework, which is specifically designed for building single-page, multi-page, and hybrid web applications. It has become the standard server framework for node.js.
VPS servers offer base capabilities and environment to integrate Node.js apps with developer tools and APIs. Hostinger’s VPS gives you more control and flexibility over your hosting environment.It has template build for Node.js – Ubuntu 22.04 with Node.js. This makes it super easy and swift to start. It also comes with OpenLiteSpeed server.
Javascript
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
|
The default behavior of EJS is that it looks into the ‘views’ folder for the templates to render. So, let’s make a ‘views’ folder in our main node project folder and make a file named “home.ejs” which is to be served on some desired requests in our node project. The content of this page is:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css" media="screen">
body {
background-color: skyblue;
text-decoration-color: white;
font-size: 7em;
}
</style>
</head>
<body>
<center>This is our home page.</center>
</body>
</html>
|
Now, we will render this page on a certain request by the user:
Javascript
app.get('/', (req, res) => {
res.render('home');
});
|
Now, the page home.ejs will be displayed on requesting localhost. To add dynamic content this render method takes a second parameter which is an object. This is done as:
Javascript
app.get('/', (req, res) => {
res.render('home', { name: 'Akashdeep' });
});
const server = app.listen(4000, function () {
console.log('listening to port 4000')
});
|
Now, We will embed the name to the HTML page as:
html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css" media="screen">
body {
background-color: skyblue;
text-decoration-color: white;
font-size: 7em;
}
</style>
</head>
<body>
<center>
This is our home page.<br />
Welcome <%=name%>, to our home page.
</center>
</body>
</html>
|
It is used to embed dynamic content to the page and is used to embed normal JavaScript. Now embedding normal JavaScript:
Javascript
app.get('/', (req, res) => {
let data = {
name: 'Akashdeep',
hobbies: ['playing football', 'playing chess', 'cycling']
}
res.render('home', { data: data });
});
const server = app.listen(4000, function () {
console.log('listening to port 4000')
});
|
The final HTML content:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css" media="screen">
body {
background-color: skyblue;
text-decoration-color: white;
font-size: 5em;
}
</style>
</head>
<body>
Hobbies of <%=data.name%> are:<br />
<ul>
<% data.hobbies.forEach((item)=>{%>
<li>
<%=item%>
</li>
<%});%>
</ul>
</body>
</html>
|
Steps to run the program:
- After creating all the files go to the root directory of your project folder.
- Run the command prompt in this directory.
- Type the node file_name.js command to run your program and see the output as displayed.
Output:
If you have better suggestions about the products/services/tools/brands listed above or feel like something missing, please
Contact Us and share your suggestions.
Last Updated :
06 Sep, 2023
Like Article
Save Article