Skip to main content

EJS (Embedded JavaScript)

We had a lot of discussion about the view engine in the previous blog. In this blog, we will learn about the EJS (Embedded JavaScript) view engine. So, let's get started.

What is EJS?​

EJS (Embedded JavaScript) is a template engine that allows you to embed JavaScript code within HTML code. To use EJS in Express.js, you need to install the ejs package first:

Installation​

npm install ejs

Setting up EJS​

Then, you need to set the view engine to EJS in your Express application. Add the following code to your index.js file:

Set view engine to ejs
app.set("view engine", "ejs");

This sets the view engine to EJS and tells Express to look for EJS templates in the views folder.

Creating views​

Views are the HTML templates that you render in your Express application. Create a new folder in your project called views and add an EJS template file with a .ejs extension. For example, you can create an index.ejs file that looks like this:

views/index.ejs
<h1>Hello World!</h1>

Rendering views​

To render an EJS view, you use the res.render method in your Express route handler. The following code shows an example of how to render the index.ejs view with a name parameter:

Render index.ejs view as a response
app.get("/", (req, res) => {
  res.render("index");
});

Here index is the name of the view file in the views folder. In the previous step, I created an index.ejs file in the views folder. This res.render("index") method will render the index.ejs file and send it to the client.

We can also pass data to the views. Let's see in the next section.

Passing data to views AKA Template Variables​

EJS allows you to pass data from your Express application to your views using template variables. You can access these variables in your EJS templates using the <%= variable %> syntax. In the example down, name is a template variable that is passed to the index.ejs view.

Pass data to views
app.get("/", (req, res) => {
  res.render("index", { name: "World" });
});

Then, you can access this variable in the index.ejs file:

views/index.ejs
<h1>Hello <%= name %></h1>

I passed World as a value of the name variable, so the output will be:

Output
<h1>Hello World</h1>

Loops and Conditions​

EJS also supports loops and conditions in your templates, allowing you to dynamically generate content based on data from your application. The following code shows an example of how to use a loop and a condition in an EJS template:

views/index.ejs
<% if (users.length > 0) { %>
<ul>
  <% for(var i=0; i< users.length; i++) { %>
  <li><%= users[i].name %></li>
  <% } %>
</ul>
<% } %>

Using partials​

You can use partials to reuse the same HTML code in multiple files. For example, you can create a file named header.ejs inside the views folder and write the header code in it:

views/partials/header.ejs
<header>
  <h1>My Website</h1>
</header>

I am also creating a footer.ejs file inside the views/partials folder:

views/partials/footer.ejs
<footer>
  <p>My Website &copy; 2021</p>
</footer>

Now, you can include these files in other files using the <%- include('partials/header') %> tag:

views/index.ejs
<%- include('partials/header') %>
<h1>Hello World!</h1>
<%- include('partials/footer') %>

Using layouts​

You can use layouts to reuse the same HTML code in multiple files. For example, you can create a file named layout.ejs inside the views folder and write the layout code in it:

views/layout.ejs
<!doctype html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <%- include ('partials/header.ejs') %> <%- body %> <%- include
    ('partials/footer.ejs') %>
  </body>
</html>

Now, let's set this layout as the default layout for all the views. To do this, need to install the express-ejs-layouts package:

npm install express-ejs-layouts

express-ejs-layouts is a middleware that allows you to use layouts in your EJS templates.

Now, first, you need to import the express-ejs-layouts package in your index.js file:

index.js
import expressLayouts from "express-ejs-layouts";

Then, you need to use the expressLayouts middleware:

index.js
app.use(expressLayouts);

Now, you need to set the default layout for all the views:

index.js
app.set("layout", "layout");

Here, layout is the name of the layout file. Now, you can use the <%- body %> tag in your views to render the content of the view:

views/index.ejs
<h1>Hello World!</h1>

Conclusion​

In this blog, we learned about EJS (Embedded JavaScript) view engine. We also learned about passing data to views, using partials, and using layouts. In the next blog, we will learn about Pug (formerly known as Jade) view engine.

Code​

You can find the code for this doc here