Previous

Express.js Setting Up EJS

EJS (Embedded JavaScript) is a popular templating engine that allows you to generate dynamic HTML pages by embedding JavaScript code within HTML templates. It is easy to use and integrates well with Express.js applications, enabling you to render views dynamically.

 

Key Features of EJS

  • Embedded JavaScript Syntax: EJS allows you to embed JavaScript logic directly in your HTML templates using special tags.
  • Template Inheritance: EJS supports partials, which let you reuse templates, making your code cleaner and more maintainable.
  • Dynamic Content: You can pass data from your Express routes into EJS templates and render it dynamically.

 

Steps to Set Up EJS in Express.js

Install EJS
The first step is to install EJS using npm. Run the following command in your project directory:

npm install ejs

Set EJS as the View Engine
Once EJS is installed, you need to configure Express to use EJS as the view engine. This tells Express how to render views.

In your app.js or server.js file, add the following configuration:

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

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

// Optionally, specify the views folder if it's different from the default
app.set('views', './views');

Create Views Folder
Create a views folder in your project directory where you will store your EJS templates.

Create EJS Templates
Inside the views folder, create EJS template files (e.g., index.ejs).

Example views/index.ejs:

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %>!</h1>
</body>
</html>

Render Views in Express Routes
In your Express routes, you can now render the EJS templates and pass dynamic data into them.

Example route:

app.get('/', (req, res) => {
    res.render('index', { title: 'My Express Application' });
});

When a request is made to the root URL (/), Express will render the index.ejs template and replace the <%= title %> placeholder with the value 'My Express Application'.

Run the Application
Now, run the Express application using the following command:

node app.js

When you navigate to http://localhost:3000 in your browser, you should see the rendered HTML page with the dynamic content.

Using EJS Partials

EJS allows you to use partials to reuse templates across different views. For example, you can create a common header or footer and include it in multiple templates.

Create a Partial Template
Create a partial template file, such as header.ejs inside the views/partials folder:

<header>
    <h1>Header Content</h1>
</header>

Include the Partial in Other Templates
In your index.ejs template, include the header partial:

<%- include('partials/header') %>
<h2>Main Content</h2>

The <%- include('partials/header') %> tag includes the header.ejs partial in the main template.

 

Passing Data to EJS Templates

You can pass various types of data (strings, objects, arrays) from your Express routes to EJS templates.

Example of passing an object:

app.get('/', (req, res) => {
    const user = { name: 'John Doe', age: 30 };
    res.render('index', { user });
});

In views/index.ejs, access the properties of the user object:

<h1>Name: <%= user.name %></h1>
<p>Age: <%= user.age %></p>

 

Summary

Setting up EJS in an Express.js application is straightforward. After installing EJS and configuring Express to use it, you can create dynamic HTML pages by embedding JavaScript logic inside your templates. EJS also allows for partials, which help in reusing common code such as headers and footers. This setup makes it easy to generate dynamic content based on data passed from your Express routes.

Previous