Published: Modified: V1.3
node.js

The pug template engine in node.js getting started

When it comes to node.js template engines I am a big fan of ejs, but a pretty nice alternative is pug (formerly known as jade). It uses a clean whitespace sensitive syntax similar to markdown, but a bit more powerful. I still like ejs a lot because it is pretty much just like html but allows for embedded javaScript, put pug is kind of like markdown in the sense that it helps keep things neat, clean, and maybe more readable.

1 - pug js by itself or with a framework like express

If you are interested in learning more about the language itself there is a good guild for that at the official pug website. In this post I am going to be focusing on the use of the node.js npm package without any additional framework being used like express. However I have wrote a post in which I write more about using pug js with express.js

2 - pug js setup

As with most projects like this I set up a test folder, and install the package with npm.

1
2
3
$ mkdir test_pug
$ cd test_pug
$ npm install pug

One that is done I made a basic.js file that will be a hello world sort type js file that uses the project, that looks like this:

1
2
3
var pug = require('pug');
 
console.log( pug.render('p This is some pug') );

In this basic example I am using pugs render method that accepts a string of pug text, and returns plain old html.

1
2
$ node basic
<p>This is some pug</p>

3 - Some basics of the language

With pug the first few characters are interpreted as a tag, and a return is considered an end of the tag. Tags can also be nested by placing a return right after writing the first tag.

1
2
3
4
5
p this is some pug
br
p
 
   span I can make nested tags

becomes

1
<p>this is some pug</p><br/><p><span>I can make nested tags</span></p>

For a more compleate overview of the laguage it might be a good idea to check out the site on pug.

4 - Read *.pug files

Storing pug as an external file should have the *.pug extension, in addition reading pug files is a pretty straightforward process of just using the pug.readFile method.

I made a readfile.js file that I placed in the root of my test_pug project folder like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var pug = require('pug'),
 
pf = process.argv[2];
 
// pug to html helper
pugToHTML = function (pf) {
 
    return new Promise(function (resolve, reject) {
 
        if (!pf) {
 
            reject(new Error('no pug file given'));
 
        }
 
        pug.renderFile(pf, function (err, html) {
 
            if (err) {
 
                reject(err);
 
            }
 
            resolve(html)
 
        });
 
    });
 
};
 
if (!pf) {
 
    console.log('please give a path to a pug file to read');
    console.log('example:');
    console.log('$ node readfile pugfiles/demo.pug');
 
} else {
 
    pugToHTML(pf).then(function (html) {
 
        console.log(html);
 
    }).catch (function (err) {
 
        console.log(err);
 
    });
 
}

I also made a pugfiles folder in the project, and made some *.pug files to read. One of the files I made is called full.pug which looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
doctype html
 
html
 
    head
 
        title This is a pug file
        meta(charset='UTF-8')
        style.
 
            .redtext { color: red;}
 
    body
 
        h1(class="redtext") My first full pug file
 
        div
 
            p
 
                | pug is pretty cool, 
                a(href='https://pugjs.org') check out the site! 
                | It allows for cleaner 
                | writing of templates but I can still do everything with it when 
                | needed because when it is called for I can just copy and past 
                | plain old html into the template as well, just like with ejs!
 
            <p>
                <span>yes I can still just use html as well if I want.</span>
            </p>

So then I can call my readfile script from the command line and get the rendered html of a pug file just like this:

1
$ node readfile pugfiles/full.pug

which will give me this html from full.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <title>This is a pug file</title>
    <meta charset="UTF-8">
    <style>
      .redtext {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="redtext">My first full pug file</h1>
    <div>
      <p>pug is pretty cool, <a href="https://pugjs.org">check out the site! </a>It allows for cleaner writing of templates but I can still do everything with it when needed because when it is called for I can just copy and past plain old html into the template
        as well, just like with ejs!</p>
      <p>
        <span>yes I can still just use html as well if I want.</span>
      </p>
    </div>
  </body>
</html>

5 - Conclusion

There is a great deal more to pug such has how to handle partials, I might write a few more posts on pug if I get to it but I have a lot on my plate when it comes to what more to write about in the wonderful world of javaScript and node.js programing.