Harnessing the Power of Express.js with Template Engines: EJS and Pug

Introduction

Express.js, a popular web application framework for Node.js, provides a robust foundation for building dynamic web applications and APIs. One of the key features that sets Express.js apart is its flexibility when it comes to rendering views. While Express can serve static HTML files, it truly shines when used in conjunction with template engines like EJS and Pug. In this article, we will explore how to use these template engines with Express.js to create dynamic and maintainable web applications.

What are Template Engines?

Template engines are tools that allow you to generate dynamic HTML content by embedding data into templates. They simplify the process of rendering web pages with data from your server. Express.js supports a variety of template engines, but two of the most popular are EJS (Embedded JavaScript) and Pug (formerly known as Jade).

EJS (Embedded JavaScript)

EJS is a simple and effective template engine for Node.js. It allows you to embed JavaScript code within your HTML templates, making it a breeze to inject dynamic content into your web pages. Here’s how to set up EJS in an Express.js application:

1. Install the EJS package:

   npm install ejs

2. Configure Express.js to use EJS as the template engine:

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

   app.set('view engine', 'ejs');

With EJS, you can embed JavaScript code inside your templates using <% %> tags. For example, you can loop through an array and display its contents like this:

<ul>
  <% items.forEach(item => { %>
    <li><%= item %></li>
  <% }); %>
</ul>

EJS is highly approachable for developers who are already familiar with HTML and JavaScript.

Pug (formerly Jade)

Pug is another template engine that aims to make writing HTML more concise and expressive. It uses indentation-based syntax to define the structure of the HTML, making the templates look cleaner and more organized. To set up Pug in an Express.js application, follow these steps:

1. Install the Pug package:

   npm install pug

2. Configure Express.js to use Pug as the template engine:

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

   app.set('view engine', 'pug');

Pug templates are more concise than traditional HTML. For instance, to create a list of items, you can use the following code:

ul
  each item in items
    li= item

The indentation-based syntax can make your templates easier to read and maintain, especially for complex layouts.

Rendering Views with Express.js

Now that we’ve configured Express.js to use EJS or Pug, let’s look at how to render views in your routes and pass data to them.

Rendering with EJS

To render a view with EJS, you can use the res.render function in your route handler:

app.get('/products', (req, res) => {
  const products = ['Product 1', 'Product 2', 'Product 3'];
  res.render('products', { products });
});

In this example, we render the ‘products’ template and pass an object containing the ‘products’ array to the template. Inside your EJS template, you can access this data and generate dynamic HTML.

Rendering with Pug

Rendering views with Pug follows a similar pattern. Use the res.render function and pass data to your template:

app.get('/products', (req, res) => {
  const products = ['Product 1', 'Product 2', 'Product 3'];
  res.render('products', { products });
});

Pug templates will use the passed data to create dynamic content.

Conclusion

Express.js, when paired with template engines like EJS and Pug, becomes a powerful tool for building dynamic web applications. These template engines make it easier to create dynamic, data-driven web pages, and they offer flexibility for developers with different preferences. Whether you opt for the simplicity of EJS or the conciseness of Pug, Express.js makes it seamless to render views and send data to your templates. So, start using template engines in your Express.js projects and experience the enhanced development and maintainability they offer.