Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics (2015) Using Templates with Express What is Jade?

Allison Hanna
Allison Hanna
36,222 Points

Jade-->Pug

jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade

Devstatement https://github.com/pugjs/pug/issues/2184

Also people should note that the transition to the new name is not perfect. As of this writing, jade-lang.com is still working correctly and pug-lang.com is not. There are some other broken links on the github pages as well. These little hiccups will be happening for a while. Eventually jade-lang.com will either stop working or redirect to pug-lang.com or something similar.

10 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

I've started using Pug (instead of the Jade module):

npm install pug --save

Then I name all my files with the .pug extension like layout.pug. In my Express app, I use the Pug templating engine:

// view engine setup
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

This works just fine.

Tommy Gebru
Tommy Gebru
30,164 Points

When using Jade === Pug, how can I add an Icon using font awesome icons??

If you are using sublime text, adding support to view the pug mark up will be helpful. Just press Command + Shift + P (for Mac) or click on Sublime Text > Preferences > Package Control to open package control. Type "Install Package". Then, type in pug. You are good to go.

fredyrosales
fredyrosales
10,572 Points

Does npm install pug --save still work? I think it's just me for some odd reason i'm getting an error.

Edit ** Github, Twitter exc are currently down. Which is why i think i can't install.

Pretty sure that's because npm is down do to the DDoS attacks today as well. npmjs.com doesn't seem to resolve for me either right now.

FYI: The jadelang.net website states at the bottom: 'the domain name has expired.' When you click on 'Jade' it take me to a website where I can buy Jade (the gemstone)!

Removed the link thanks for pointing it out :)

Clark Winters
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Clark Winters
Full Stack JavaScript Techdegree Graduate 16,672 Points

This is a little late to the party but if anyone else finds this and needs a way to convert several jade files to pug, you can run the following in terminal:

for file in *.jade; do name=$(echo $file | cut -d '.' -f1); mv $file $name.pug; done
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points

Jade has still installed for me despite all the warnings. Would it still work?

In pug do we still use .jade files? :-)

I've found that it still works, but it's anything but safe. If you expect a project to last or are working on something now, I would definitely change over.

I thing we should use .pug files but syntax is same.

From what I read on the Pugjs github page, it says that they did obtain permission to continue to allow people to install the original Jade package, but only up to a certain version is it called jade. Any updates after that were under the pug package.

Is there a browser based translator, liked shown for JADE in the video, for pug?

hchris
hchris
Courses Plus Student 11,116 Points

The browser translator is still up and should work for testing pug. I have yet to find a difference between the two other than the name.

Waldo Alvarado
Waldo Alvarado
16,322 Points

Here is how you use pug.

1) Name your template: index.pug

2) npm install pug --save

3) the below should go in your app.js

app.set('view engine', 'pug');
app.set('views', __dirname + '/templates');


app.get('/', function(req, res){
    res.render('index');
});
Bryan LeBlanc
Bryan LeBlanc
2,482 Points

make sure you add "npm install" into terminal after "npm install pug --save"