Working with Template Engines (e.g., EJS, Pug) in Express.js

Express.js is a popular web application framework for Node.js that allows developers to build robust and scalable applications. One of the key features that sets Express.js apart is its support for template engines. Template engines help in generating dynamic HTML content by merging data with templates.

In this guide, we will explore two widely used template engines in Express.js – EJS and Pug (formerly known as Jade). We will discuss how to set up these template engines and use them effectively in your Express.js projects.

Installing EJS and Pug

To begin using either EJS or Pug with Express.js, you first need to install the respective packages. Open your terminal or command prompt window and navigate to your project directory. Then run the following commands:

npm install ejs
npm install pug

This will download the required packages and save them as dependencies in your package.json file.

Setting Up EJS

Once you have installed EJS, it's time to set it up in your Express.js project. Here are the steps:

1. Require the ejs module at the top of your main server file (app.js, for example):

   const ejs = require('ejs');

1. Set 'ejs' as the default view engine for Express by adding the following line after creating an instance of express():

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

1. Create a views folder inside your project directory if it doesn't already exist.

2. Create a .ejs file inside the views folder (e.g., home.ejs) which will serve as a template for rendering dynamic HTML content.

3. To render HTML content using this template from within a route handler function, use the res.render() function. Here's an example:
   

   app.get('/', (req, res) => {
     const data = {
       title: 'Welcome to My Awesome Website',
       message: 'This is a sample message!'
     };

     res.render('home', data);
   });

Now you can visit http://localhost:3000 in your browser and see the rendered HTML content using EJS!

Setting Up Pug (formerly Jade)

If you prefer Pug as your template engine, follow these steps to set it up in Express.js:

1. Require the pug module at the top of your main server file:
   

   const pug = require('pug');
   

2. Set 'pug' as the default view engine for Express by adding this line after creating an instance of express():
   

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

1. Create a views folder inside your project directory if it doesn't already exist.

2. Create a .pug file inside the views folder (e.g., home.pug) which will serve as a template for rendering dynamic HTML content.

3. Similar to EJS, use the res.render() function within a route handler function to render HTML content using this template. Here's an example:
   

  app.get('/', (req, res) => {
    const data = {
      title: "Welcome",
      message: "This is another sample message!"
    };

    res.render("home", data);
  });

With Pug now set up, visit http://localhost:3000 and witness the rendered HTML content!

Conclusion

Template engines like EJS and Pug provide powerful tools for generating dynamic HTML content with ease in Express.js projects. By following the steps outlined in this guide, you will be able to set up and utilize these template engines effectively, allowing for seamless integration of dynamic content into your web applications.

So go ahead and give it a try! Experiment with EJS and Pug in Express.js and unlock the potential of powerful template engines to enhance your web development workflow.