Working with Template Engines (e.g., EJS, Pug) in Express.js
Published: 2024-04-17 15:10:03

# 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:

```bash
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):

   ```javascript
   const ejs = require('ejs');
   ```

2. Set 'ejs' as the default view engine for Express by adding the following line after creating an instance of `express()`:
   
   ```javascript
   app.set('view engine', 'ejs');
   ```

3. Create a views folder inside your project directory if it doesn't already exist.
  
4. Create a `.ejs` file inside the views folder (e.g., home.ejs) which will serve as a template for rendering dynamic HTML content.

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

   ```javascript
   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:
   
    ```javascript
    const pug = require('pug');
    ```

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

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

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

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

  ```javascript
  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.