Embedded JavaScript

Embedded JavaScript #

EJS (Embedded JavaScript) is a templating language for Node.js that allows you to embed JavaScript code within HTML templates.

It provides a simple and effective way to generate dynamic content on the server side. Below is a basic overview of using EJS in a Node.js application:

Installation: #

Install EJS using npm:

npm install ejs

Setting Up EJS in Express: #

If you are using Express, you can set up EJS as the view engine:

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

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

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

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Creating an EJS Template: #

Create an EJS template file (e.g., 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>

The <%= title %> and <%= message %> are EJS tags that output the values of the corresponding variables.

Passing Data to EJS Template: #

In your Express route, use res.render to pass data to the EJS template:

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

Conditional Statements in EJS: #

Use JavaScript code inside EJS tags for conditional statements:

<% if (user) { %>
    <p>Welcome, <%= user.username %>!</p>
<% } else { %>
    <p>Please log in</p>
<% } %>

Iterating Over Arrays in EJS: #

Use JavaScript code inside EJS tags for iterating over arrays:

<ul>
    <% users.forEach(user => { %>
        <li><%= user.username %></li>
    <% }) %>
</ul>

Including Partials in EJS: #

Create EJS partials and include them in other templates:

<!-- views/header.ejs -->
<header>
    <h1><%= title %></h1>
</header>

<!-- views/index.ejs -->
<html>
<body>
    <% include('header') %>
    <p><%= message %></p>
</body>
</html>

Customizing EJS Delimiters: #

You can customize the EJS delimiters if needed:

const ejs = require('ejs');

ejs.delimiter = '$';

Now, you can use $ instead of <% and %>.

Using EJS for Email Templates: #

EJS is commonly used for generating dynamic content in email templates:

const ejs = require('ejs');
const fs = require('fs');

const template = fs.readFileSync('email-template.ejs', 'utf-8');
const compiledTemplate = ejs.compile(template);

const emailContent = compiledTemplate({ username: 'John', link: 'https://example.com' });

Middleware for EJS: #

Use EJS as middleware to render dynamic content in responses:

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

const app = express();
app.set('view engine', 'ejs');

app.use((req, res, next) => {
    res.locals.username = 'John';
    next();
});

app.get('/', (req, res) => {
    res.render('index');
});
EJS is a powerful and flexible templating engine for Node.js, widely used in web development to generate dynamic HTML content. Its simplicity, integration with Express, and support for JavaScript code within templates make it a popular choice for building dynamic web applications. The ability to pass data, use conditionals, and iterate over arrays provides developers with a versatile tool for rendering content on the server side.

Happy coding!
Published on