EJS (Embedded JavaScript) with HTML
EJS (Embedded JavaScript) is a templating engine used with Node.js to generate dynamic HTML content. It allows you to embed JavaScript code within HTML, making it possible to render data dynamically on the server side before sending it to the client. This can be particularly useful for creating web pages that display data retrieved from a database or API.
How EJS Works
EJS lets you use JavaScript logic within your HTML templates. It provides special tags for embedding JavaScript code, rendering variables, and including other templates. Here's a breakdown of how to use EJS in HTML:
1. EJS Syntax
1.1 Outputting Data
To render dynamic data, you use the <%= %> tag. This tag outputs the value of an expression as HTML-encoded text.
Example:
<!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>Welcome, <%= user.name %>!</h1>
<p>Your email is: <%= user.email %></p>
</body>
</html>
In this example:
<%= title %>will render the value of thetitlevariable.<%= user.name %>and<%= user.email %>will render values from theuserobject.
1.2 Executing JavaScript Logic
You can embed JavaScript code within <% %> tags. This code is executed but not output directly.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Rendering Example</title>
</head>
<body>
<% if (user.isAdmin) { %>
<h1>Admin Dashboard</h1>
<% } else { %>
<h1>User Dashboard</h1>
<% } %>
</body>
</html>
In this example:
- The
<% if (user.isAdmin) { %>block conditionally renders content based on theisAdminproperty of theuserobject.
1.3 Including Other Templates
You can include other EJS templates using the <%- include('path/to/template') %> tag. This is useful for creating reusable components like headers or footers.
Example:
Main 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>
<%- include('partials/header') %>
<h1>Welcome to <%= title %></h1>
<%- include('partials/footer') %>
</body>
</html>
Header Partial (views/partials/header.ejs):
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
Footer Partial (views/partials/footer.ejs):
<footer>
<p>© 2024 My Website</p>
</footer>
2. Setting Up EJS with Express
Here’s a quick setup guide to use EJS with an Express.js application:
Install Express and EJS:
npm install express ejsSet Up Your Express Application:
app.js:const express = require('express'); const path = require('path'); const app = express(); // Set EJS as the view engine app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')); // Define a route app.get('/', (req, res) => { res.render('index', { title: 'Home Page', user: { name: 'John Doe', email: 'john@example.com', isAdmin: true } }); }); // Start the server app.listen(3000, () => { console.log('Server running on http://localhost:3000'); });In this setup:
app.set('view engine', 'ejs'): Configures Express to use EJS as the templating engine.app.set('views', path.join(__dirname, 'views')): Specifies the directory for EJS templates.res.render('index', { ... }): Renders theindex.ejstemplate with the provided data.
Summary
EJS allows you to embed JavaScript code directly within your HTML templates, providing a way to render dynamic content and reuse components. By using EJS with Express, you can generate HTML dynamically based on server-side data, enhancing your web application's interactivity and functionality.