How to use pug with Express.js

Pug is an easy and simple template engine that could use with both NodeJs and web browsers. It allows us to write HTML using a simplified syntax that can improve code readability and boost productivity. With Pug, it's easy to create reusable HTML templates and to render data retrieved from databases or APIs dynamically.

Overall, this Pug code is similar to the HTML code but uses a more concise and streamlined syntax. The code uses indentation to indicate the nesting of elements, and it omits some of the closing tags required in HTML. The dynamic data for the title and message variables is again passed in from the server-side code using the Pug templating engine, which replaces the variables with their actual values before the HTML is sent to the client's web browser.

Note: Detailed explanation about pug syntax can be found here.

Implementing Pug with Express.js

First, we create a file app.js and folder views, which contain the initially empty template file index.pug. We also have to make a package.json file for our app using the following command:

npm init -y
Command to create JSON file for the project

After creating files and running a command, our project structure is as follows:

app.js
package.json
>views
    index.pug
Project's directory structure

Then, we install Express and Pug with the following command:

npm install express pug
Command to install express & pug

Code explanation

As previously mentioned, we have created an empty pug file, and we'll currently insert the following code into the index.pug file:

html
  head
    title = title
  body
    h2 = message

  • Line 3: We set the title of the HTML document to the value of the title variable, which is passed in from the Node.js/Express application. The = sign is used to indicate that the content of the title tag should be dynamically generated by the server-side code.

  • Line 5: We create an h2 heading element with the content of the message variable, which is also passed in from the Node.js/Express application.

Furthermore, we are now inserting the following code into the app.js file, which was previously empty.

const express = require("express");
const app = express();
const pug = require('pug');
app.set('view engine', 'pug');
app.get('/', (req, res)=>{
    res.render(
        'index',
        { title: 'PUG with Express', message: 'Hello from educative!'}
    )
});
app.listen(3000);

  • Line 4: We import the pug package, which is a templating engine for Node.js, and assigns it to a constant variable called pug.

  • Line 6: We set the default view engine for the app to pugso that when the app renders views, it will use the pug templating engine.

  • Lines 9–11: We render the index template using pug and passes in an object with two properties: title and message. These properties will be available to the index template and can be accessed using pug syntax.

Executable application

Let's click the "Run" button to observe the functionality of our application.

html
  head
    title= title
  body
    h2= message
A simple Pug with Express App

Conclusion

We have generated two files named index.pug and app.js. The index.pug file has the code that specifies the layout of the webpage, like the placement of various components on the webpage. On the other hand, the app.js file contains the functionalities and provides data to index.pug for rendering content on the webpage.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved