Pug, a very sweet and cute name to a technology that helps in producing the HTML pages. Basically, PUG is a very high-performance server-side template engine for NodeJS applications. It works as a middleman between what has been inputted and what is needed to be produced (mostly the HTML pages).

In this blog I am going to take you through the world of PUG and how it helps in making NodeJS applications render pages without any front-end framework.

Important role of Pug in NodeJS:

As NodeJS is an awesome server-side platform, pug simply helps it add more functionalities to it alongside the usage of Express.js. HTML pages can be easily rendered from the backend only without using any front-end framework. This makes the NodeJS an extra fabulous technology to handle all the logic of any project.

Now before going any further, you must answer me a very relevant question at this point –

What is a template engine?

If you found it a little difficult to answer, then don’t worry, I am going to let you know what it is? A template engine is nothing but a medium which allows to add the data to a view and generate the HTML dynamically. In simple words, if I say, then, at runtime a template engine replaces the variables in the file with the actual values and then send the resultant HTML to the client i.e., to the browser.

This must have cleared your view about the template engine. Right? Interestingly the template engine PUG is very cool to learn and let me tell you here that PUG was always not known by the same name, it was initially known by the name of JADE.

Pug is Renamed from JADE:

The PUG project was formerly known by the name of JADE. But, then why it had to change the name to PUG? Well, that is also very interesting. According to the npm page of PUG, the team at the JADE project realized that JADE is already a registered trademark so they decided to rename it. This resulted in a new name known as PUG.

NOTE: For future projects use Pug and avoid using Jade as it is already deprecated.

Now, I must tell you how Pug is installed and included inside any project and how it looks like.

Installing Pug in a node application:

This template engine can be easily installed by running the following command in the terminal:

npm install pug 1 npm install pug

This command will install the Pug template engine. Now, after installing the Pug, it is necessary to include it in the project that you are using.

How to use Pug?

This can be achieved by including the following line of codes into the main file of the NodeJS server (let’s say server.js)

const path = require('path') const express = require('express') const app = express() app.set('view engine', 'pug') app.set('views', path.join(__dirname, 'views')) 1 2 3 4 5 const path = require ( 'path' ) const express = require ( 'express' ) const app = express ( ) app . set ( 'view engine' , 'pug' ) app . set ( 'views' , path . join ( __dirname , 'views' ) )

The above code tells that a module path is included inside the project which will help in getting the right path for the pug file. Similarly, Express is also included and an object of it is assigned to the app.

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

This line tells that view engine that is included in the project is pug (there are many others such as EJS ). The next line also has some great meaning –

app.set('views', path.join(__dirname, 'views')) 1 app . set ( 'views' , path . join ( __dirname , 'views' ) )

__dirname is always the directory in which the currently executing script resides. The whole line specifies that views will be available inside the views folder.

Now, there is a requirement to create a template, let’s say with the name of ‘firstTemplate’ inside the views folder. i.e., views/firstTemplate.pug

The template will contain the following code

doctype html html(lang="en") head title First Pug Template // Write the page title here body h1 Hello World – Pug first template 1 2 3 4 5 6 doctype html html ( lang = "en" ) head title First Pug Template // Write the page title here body h1 Hello World – Pug first template

Now to render the same template, the following code will be required inside the server.js file that was mentioned earlier:

app.get ('/firstTemplate', (req, res) => { res.render('firstTemplate') }) 1 2 3 app . get ( '/firstTemplate' , ( req , res ) =& gt ; { res . render ( 'firstTemplate' ) } )

This tells the server to render the firstTemplate pug file and to display its content on the browser.

The result in the browser will show the content which was written inside the firstTemplate.pug file. The browser screen looks like the image below:

For learning more basics of Pug and its syntaxes, you can consider going through their official website.

To learn more about some tremendous features of NodeJS, you may consider reading:

Why Most Of The Companies Use Node.Js? Facts And Reasons!

Now, it becomes necessary to know some of the main advantages of Pug in NodeJS application development.

Awesome advantages of Pug:

There are some fantastic technical advantages of Pug which are listed below.

1. Most of the times it uses less number of lines as compared to any other template engines.

2. Pug helps in improving code readability as it is written in the form of a paragraph. Here you can see the main difference between HTML and PUG style of writing.

HTML

<!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="/site.css" /> <title>Hello</title> </head> <body> <h1>Hello world!</h1> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 < ! doctype html > < html > < head > < link type = "text/css" rel = "stylesheet" href = "/site.css" / > < title > Hello < / title > < / head > < body > < h1 > Hello world ! < / h1 > < / body > < / html >

PUG

doctype html html head link(type='text/css',rel='stylesheet’,href='/site.css') | title Hello body h1 Hello world! 1 2 3 4 5 6 7 8 doctype html html head link ( type = 'text/css' , rel = 'stylesheet’,href=' / site . css ' ) | title Hello body h1 Hello world !

Note: The number of lines in got lesser in Pug as already mentioned in the first point.

3. Pug has a cleaner and more readable syntax which comes along with the filters and the helpers.

4. There are no closing tags when working with the pug. It has a mechanism to use the indentation pattern to determine the nesting of the tags.

5. Inside the pug, you can directly write the JavaScript which is not exactly the same in syntactical way but almost everything looks like the actual JavaScript.

6. There are shorthand writing styles available in Pug for classes (.) and IDs (#).

Although these advantages make Pug a very feature rich template engine, there are some limitations or disadvantages of Pug which you can see below.

Limitations of Pug:

Some of the major limitations of the Pug template engine are as follows:

It is unforgiving in case of indentation errors:

The entire structure of the Pug is determined by the proper indentations. This creates a space for big errors as any small indentation error will devastate your end results. These mistakes are very common that the developers always commit. So, while writing the structure of the Pug file a developer needs the extra potential to maintain the proper indentation.

Cannot copy/paste HTML from the web sources or internet:

Using Pug, you cannot copy the HTML from anywhere and paste it because Pug has a different syntax and you need to convert the code to Pug syntax before proceeding further. That makes the task of a developer very hefty.

You can consider converting your HTML code to Pug from here.

Bottom Line:

There is huge change observed in the technology stack in the recent past and template engines are amongst that only. Pug is a good template engine that is used with NodeJS to build the highly customizable and flexible applications.

Habilelabs is a premier software development company that provides professional NodeJS application development services along with template engines such as Pug/Jade or EJS. It is rich with the resources to develop the feature-rich applications. Give us a call to find out more about our awesome services!

I hope this blog has covered all that was needed for Pug and its importance in the NodeJS application development. Comment your thoughts and queries related to the blog in the comments section.