Add Pug Templating Engine in Express.js

Introduction to Pug Template Engine

When you want to quickly create web apps that are divided into separate components, template engines are used. Additionally, templates allow the server-side data that must be sent to the application to be rendered quickly. You might, for instance, want to include elements like the body, menu, footer, dashboard, etc. Ejs, Jade, Pug, Mustache, HandlebarsJS, Jinja2, and Blade are some of the well-known ones. In this article, we will be using Pug.

Pug is a template generator for Node and browsers. It has a more user-friendly syntax and converts to HTML, enhancing both your productivity and the readability of your code. Pug makes it easier to display data from a database or API and create reusable HTML.

Syntax of Using Pug:

Pug does not employ true HTML. It uses minimal HTML and a custom template language that is extensible but typically only provides a limited collection of operations. Iterations and if expressions are, however, included in this.

Pug syntax is:

It is an easy way to substitute placeholders in a template with corresponding JavaScript expressions.

Example p #{name}, here name will be replaced by the specific javascript expressions.

How to Add a Pug Engine in Express.js?

Installing node is required for using the templating engine, and after that, use the following command to make a package.json file in your project:

The package.json file will be created in your folder after executing this command. Additionally, this file alone will load all dependencies.

For installing Express, use

Install PUG in our Node application as a dependency:

The directory structure will look like this:

Create an index.pug file with the .pug suffix inside the views folder after installation. Write html in the code part of your pug file to get the HTML template in your pug file. This will give you the pug structure for the HTML template.

Add the below code:

The pug must simply be added to the app.js file as the new view engine.

Add the following code:

In other words, we are telling Express where to locate the templates and that you want to create dynamic content using the Pug templating engine. Save all of the data, then utilize the servers:

Now go to the browser and run the https://localhost:3000. You will observe the intended result.

Use the Pug Template Engine with Express

Now let us dive deep and look at the example of pug node js express. Here you will create a NodeJS, and ExpressJS integrated with the Pug engine application from scratch.

• Step - 1:
  Start the node application and open port 3000 in the browser.

  

• Step - 2:
  Install pug engine:

• Step - 3:
  Create a subdirectory called /views inside the main directory to store the .pug template files. Now create a simple index.pug file. Note that it has a .pug extension and save it inside the freshly created directory /views. Add the following code to it to show a one-line Welcome to Express.js + Pug template.

• Step - 4:
  We need to add two more lines of code to our Express.js main file, both of which use the app.set() function with the views and view engine properties. The view engine property specifies the template engine to use, while the views property refers to the directory where the templates are stored. The template is rendered by the app.get() method's res.render() function.

  The template gets rendered as:

  

Frequently Used Features in Pug

The advantages of using pug node js express include better separation of concerns, increased readability, better performance, simplicity, reusability, and dynamic templates.

• Better separation of concerns:
   Pug gives developers the ability to separate the presentation and functionality of their applications. As a result, it is simpler to manage and update an application's front end without affecting its back end.
• Improved performance:
   Performance has been improved because the server no longer needs to handle Pug templates for each request because they are compiled into HTML before even being served to the client. This may result in enhanced functionality and quicker website loads.
• Dynamic templates:
   Pug makes it simple for developers to build dynamic templates that can be rendered with different data by allowing them to use variables and looping constructs.
• greater clarity:
   Since Pug templates are much simpler to read than conventional HTML code, developers can work on complicated projects and communicate with others more easily.
• Reusability:
  Pug enables writers to make mixins and reusable templates that can be incorporated into other templates. This enables developers to reuse common components across various templates, resulting in a more modular and effective development process.
• Simplicity:
  Pug makes it easier for programmers to write HTML code by using indentation and whitespace to specify the hierarchy of components. This makes HTML code simpler to understand and maintain, particularly for more significant projects.