Explore EJS(Embedded JavaScript) - The JavaScript Templating Engine!

Sabeena Viklar
Aug 7, 2023
2 min read

Hello Everyone, In this Blog you will learn about Embedded JavaScript(EJS)

with me. So let's dive into the Topic.

Embedded JavaScript(EJS)

Embedded JavaScript (EJS) is a templating engine for JavaScript that allows developers to generate dynamic HTML markup by embedding JavaScript code within HTML templates. You can insert the Javascript code in HTML template easily. EJS is used with Node.js.

Ejs is used by this Tags

<% 'Scriptlet' tag, for control-flow, no output
<%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
<%= Outputs the value into the template (HTML escaped)
<%-

To use EJS in your project. Use this command in terminal to install it.

npm i ejs

And also use this code to use it as your templating engine...

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

NOTE: Ejs is used with Node.js and Express, so please remember to install it.

Example on how you can use Ejs as templating engine

The first step is to create a EJS file in the views folder. EJS files are typically created within the "views" folder of a Node.js application. Like this...

I will show you the simple way of using ejs with Node.

We will build a simple page in which each time when you click on 'Click me '

Button it will show hello in different Languages.

I hope you are already familiar with node!!

Let's build a basic node application first.

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home')
  const greeting = 'Hello from EJS!';
    res.render('home', { greeting });
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

res.render is rendering the home page. Please feel free to change the file Name.

Now, let's start building the Ejs file!!


<!DOCTYPE html>
<html>
<head>
    <title>Simple EJS App</title>
</head>
<body>
    <h1>Welcome to my EJS App</h1>
    <% if (greeting) { %>
        <p><%= greeting %></p>
    <% } %>
    <p>Create app using node with ejs!!</p>
</body>
</html>

Thank you for taking the time to read this blog!

I hope you learned EJS in detail.

If you have any questions or comments, please feel free to leave them below.

Explore EJS(Embedded JavaScript) - The JavaScript Templating Engine!

Recent Posts

Kommentare