What is EJS template engine

EJS (Embedded JavaScript) is a templating engine for Node.js that allows you to generate HTML dynamically using JavaScript. It's designed to be simple and flexible, making it a popular choice for rendering views in Express.js applications. Here’s a detailed explanation of EJS and how it works:

Key Features of EJS

JavaScript Integration:
- EJS templates embed JavaScript directly into HTML, allowing you to use JavaScript logic and variables to dynamically generate HTML content.
Simple Syntax:
- The syntax is straightforward and easy to understand, with delimiters for JavaScript code, output, and control structures.
Reusable Components:
- EJS supports partials (reusable templates) that help you manage common elements like headers, footers, and navigation bars across multiple views.
Integration with Express.js:
- EJS works seamlessly with Express.js, making it easy to set up dynamic views in web applications.

Basic Syntax

EJS uses special delimiters to integrate JavaScript into HTML. The common delimiters are:

<% %>: Executes JavaScript code.
<%= %>: Outputs the result of JavaScript expressions (escaped).
<%- %>: Outputs the result of JavaScript expressions (unescaped).

Example Usage

Setup EJS in Express.js:

First, install EJS if you haven’t already:

npm install ejs

Then, set EJS as the view engine in your Express.js application:

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

// Set EJS as the view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.get('/', (req, res) => {
    res.render('index', { title: 'Home', message: 'Hello World!' });
});

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

Create an EJS Template:

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

In this template:

<%= title %>: Outputs the value of the title variable.
<%= message %>: Outputs the value of the message variable.

Using Control Structures:

You can use JavaScript logic inside EJS templates.

views/items.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items List</title>
</head>
<body>
    <h1>Items List</h1>
    <ul>
        <% if (items.length > 0) { %>
            <% items.forEach(item => { %>
                <li><%= item.name %>: <%= item.description %></li>
            <% }) %>
        <% } else { %>
            <li>No items found.</li>
        <% } %>
    </ul>
</body>
</html>

In this example:

<% if (items.length > 0) { %>: Executes a JavaScript if statement to check if there are items.
<% items.forEach(item => { %>: Iterates over the items array and outputs each item’s name and description.

Using Partials:

To avoid code duplication, you can use partials for common layout elements.

views/partials/header.ejs

<header>
    <h1><%= title %></h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

views/layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    <% include partials/header %>
    <main>
        <%= body %>
    </main>
</body>
</html>

views/index.ejs

<% layout('layout', { title: 'Home' }) %>
<p>Welcome to the homepage!</p>

Advantages of EJS

Simplicity:
- EJS is straightforward to use and learn, especially for those familiar with JavaScript and HTML.
Flexibility:
- You can include JavaScript code directly in templates, making it flexible for dynamic content.
Integration:
- Easily integrates with Express.js, making it a natural choice for many Node.js applications.
Performance:
- EJS is efficient and can handle a high volume of requests due to its simple and fast rendering process.

Summary

EJS is a powerful templating engine for Node.js that combines JavaScript and HTML to create dynamic web pages. It is easy to set up and use with Express.js, supports partials for reusable components, and allows for JavaScript logic within HTML. EJS provides a simple way to manage and render dynamic content in web applications.

Next Previous

EJS Tutorial