Node.js & Express From Scratch [Part 3] – Pug Template Engine
- December 24, 2023
- Posted by: MainInstructor
- Category: BASIC C Go JavaScript Node
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703396575_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Node.js & Express From Scratch [Part 3] – Pug Template Engine
Alright guys in the last video we installed Express we set up our app GIS file and we have our server running and it’s just spitting out hello world alright I still have this running on port 3000 so what I want to do now is install a templating engine called pug
Now pug is formerly known as Jade and it’s a template engine that works a little different than most instead of using HTML tags it uses indentation alright and I’ll show you what I mean in a minute so let’s install that I’m going to stop the server with ctrl C and then we’re
Going to do NPM install and we want this to be saved in the package.json file and then we’ll save Todd alright so that should go ahead and install it and it should get added here alright and you can see over here we now have pug so to
Do this we’re going to go back to our app J s and since we’re using Express it’s actually really easy to set this up so let’s go right under here and actually we should probably comment this a little bit so let’s say init app this will be the home route
Start server and under here let’s say load view engine so we can take that app variable and we can just do dot set all right and we want to specify the the folder where our views will be kept or our templates so we’re going to pass in
Two here views as the first parameter and then we want to point to the views folder now I’m going to bring in another module called path and we didn’t have to do n p.m. install path because it’s actually a core module that’s included with with nodejs by default ok so let’s
Say require we bring it in the same way and then let’s do here we’ll say path dot joined and in here we’re going to use double underscored our names so the current directory that we’re in and then a folder called views alright and then we
Just need to set it to pugs so we can say app set and let’s say view engine and then we’re going to define it as pod all right so we’ll save that and then over here we’ll create a new folder called views and then here let’s see I
Guess we’ll create index dot pug okay so all your Pug views should have an extension of Pug and in here let’s just do an h1 and we’ll say hello world all right and I’ll get into the syntax in a minute but let’s save this and then
Go back to our app J s and for our home route instead of doing res dot send hello world let’s do res dot render and then the view which is going to be index all right and then we need to start the server again with NPM start and then go
Over here and reload and now we have hello world with an h1 it’s loading index dot tuck now let’s talk about bug for a minute as I said it works on indentation so I’m going to get rid of this and let’s just create a basic web
Page so we have a doctype so let’s say doctype HTML notice I’m not using any angle brackets okay there’s no tags in pug’ so on the same level as the doctype we want the HTML tags right so let’s do HTML and then inside the HTML tag we always have
You know a head and a body so what I’m going to do is tab over one now you can use tab or space to do your indents but it has to be consistent if you use tab once you need to use tab for everything don’t use both or you’ll get an error so
Let’s put our head tag now the reason I’m putting the indent here is because the head is going to go inside of the HTML now these two doctype and HTML are on the same level because you don’t want HTML within the doctype alright so in
The head what do we have we usually have a title so the title goes in the head so we’re going to indent and say title alright now if we want to put content inside here just regular text we can say let’s just say I don’t know what do we
Call this I called it node KB let’s just say knowledge base all right so title knowledge base then we’re going to go back and now we want the body tags but the body is not going to go inside the head so we need to go back to that level
And say body all right now in the body let’s tab over and put an h1 and we’ll say I’ll just say articles so if we save that and go over here and reload and then I’m going to hit f12 to open the the dev tools and let’s go to the
Inspect and click on that just make this bigger and if you take a look we have our HTML tags inside that we have our head tag and inside that we have our title and then in our body we have an h1 alright so you can see that this just
Basically gives you the standard HTML tag structure all right there are some quirks and some some extra things that you’ll need to learn but for the most part you just want to remember that if you want one tag or one element within another you want to put an indent okay
Now we can also pass values to our template or to our view so if we go back to AB js’ and we go down here what we have this red dot render let’s put a comma here and then some curly braces because we want to send this as an
Object and let’s say title and let’s say so just say hello all right so if we save that and go to index dot POG what we can do is we can go we can say number sign and then some curly raises and then the variable so if I
Save this and reload it’s not showing anything because since we change something in the JavaScript we need to restart the server so let’s go over here into a control C to stop it and then we’ll do NPM start and then we’ll go over and reload and now we get hello now
This is kind of a pain to have to keep restarting the server every time you edit here your code so what we can do is we can install a module called node Mon and we can install it globally so that we can run the command from anywhere so
To do that we’ll say NPM install and then you want to add dash G and that stands for global okay so it’ll be installed we’ll be able to run it from any directory and then we just want to do node mod ok and this will make it so
That we can run it and we don’t have to keep resetting the server because that can get that can start to become really annoying ok so now if we’re in our application root directory here we should just be able to say node mod and now you’ll see it’s running on port 3000
And then if I go over to app j/s and let’s say we change this to articles and save and then I go over here and reload you’ll see that it updates ok we don’t have to restart the server so node mod is definitely one of those tools that
You’re going to use a lot so what we’re going to do now is we’re going to create another route so let’s go to our fjs and we have our home route here but say we wanted a route to go to a page where we could add an article so let’s say add
Say add wrote and then we’re going to do apt-get and we want this to go to slash let’s say slash articles slash add and then we’ll put our function which will take the request request in response and then let’s render another template so I’m going to just grab this
When I say template in view I basically mean the same thing and then let’s render a template or a view called add alright and then the title will say add article so if we save that and we go over to views and we say new file let’s
Say add – let’s do add underscore article dot pug okay and then in here let’s grab this from index pug and we’ll save that and then we should be able to go over here and go to slash article slash add or was it was it articles that was articles
Okay so feel to what to look up you add oh this should be add article there we go so now we have another route we can go to this route which will have a form where we can add an article now one thing that you may have noticed is that
On both views we have some repeating code or repeating markup so we have the doctype the HTML the head all that so what you what you want to do is you want to create a layout and then you want to extend that layout you want your individual views to extend that layout
So that you don’t have to keep repeating yourself okay so what we can do here is create a new file and we’re going to call this layout bug and then we’re going to take all this okay down to the body here and paste it in there and then
Wherever we want to output the view which is right here we want to indent and then we want to do block content okay so that’s where the output will be all right and then let’s say we wanted to put a simple footer we’ll go down
Here and we’ll do let’s do a line break and then we’ll do an HR and then we’ll do a footer tag and then let’s tab over and we’ll put let’s put a paragraph and we’ll just put a copy right here okay we’ll say copyrights copy that’ll give us a little
Symbol 2017 so let’s save that and then we want to go to let’s go to the index and we want to extend that layout okay so we want that layout to to wrap around everything so we’ll get rid of this because that’s already in the layout and
Then we’ll just say extends layout all right and then let’s go right here and say block content and then do an indent and then whatever we want the content to be all right we’re going to do the same thing I’m going to copy that save this file let’s go to add article
And let’s do that same thing save and then let’s go back over here and reload and now this add article is actually extending the layout and you can see we now have that copyright if we go to our home page which is the index it’s also extending it layout this way we don’t
Have to repeat ourselves and we can just edit this one file if we want to change you know the title or something like that now we can also add control structures to pug’ we can have if statements we can have loops and so on
So what I want to do is go back to app jas and go to our home page which is just going to display the articles and let’s create for now just a static array or a static array of objects and we’ll pass it into our view and then loop
Through it ultimately the articles are going to come for a MongoDB from the database but for now let’s just make it static alright so we’ll say let’s articles and we’ll set that to an array and in here let’s put some curly braces we’ll give it an ID of one and then
Let’s give it a title so say article one we’ll give it let’s say an author and let’s do a body so we’ll just say this is article one alright and then I’m just going to put a comma here and we’ll copy this and we’ll paste it in two more times
And then let’s change this to two so the article to this will be three and we’ll change the author of article two all right and then we can pass this in now we can pass more than one thing in because we’re sending in an object so let’s just say articles and we’ll set
That to the articles variable so if we save it and then go to our index bug let’s go under the h1 and we’re going to loop through so we can say each say each article and then we put a comma and then we’ll say I in articles all right and
Then let’s tab over because we want to be inside of this loop and let’s put actually don’t we’ll do is we’ll put a ul here tab that inside of it and then we’ll do an Li now since we’re outputting a variable if we do let’s say
Article dot title and we save that it’s actually going to write article title and we don’t want that now to let get our pugno this is a variable we can simply put an equal sign like that and now you’ll see that it’s actually parsing the titles
Okay so we’re passing that in and parse of parsing it so what I’m going to do now is just install an extension real quick because this doesn’t look very good there’s no highlighting so I’m going to install the plug extension for our pug package for atom so to do that
I’m going to go to settings and we’re going to go to install and search for pug I believe there’s a pug extension it might be the Jade one right there language pug yeah hug was Jade syntax highlighting so let’s install that if you’re using sublime text or visual studio code I believe there’s
Also an extension for those as well those are really only two other editors that I use and that I would recommend for stuff like this all right so that’s installed now if we go back to the Pug file we have some nice highlighting all right so we’re going to go ahead and
Stop here and in the next video we’re going to start to work with the database we’re going to work with MongoDB I’m going to show you how to install our mutt install but add some articles to the database through the shell which is a command line interface and
For those of you that are a little intimidated by the clan line don’t be it’s not it’s not very difficult and then we’re going to implement Mongoose which is in Oro em it’s a node module to interact with the database and then we can pull the articles from it and
Display them and then we’ll go from there alright so thanks for watching guys I will see you in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
It's been years since I've seen Atom in action.
28 March 2023 Update:- app.set('views', __dirname+'/views') is not required and is automatically set behind the scenes (3:24)
short, straightforward. thats what i like to see. big up man
What an amazing tutorial, this tutorial helped me to solve my problem.
Traversy is a god amongst coders. I started my first dev job last week. My first ticket was to work on making a part of a paragraph tag in a Jade/PUG folder dynamic. I'd never used PUG before, and in less than 20 minutes I'm able to confidently complete the task. Thanks Brad!
Hey Brad 👋
I can't find video one and two. Please help me out 🙈
Thanks bro
#Error help me somebody ….
How can i use pug? in vscode i tried
npm start
> nodekb@1.0.0 start C:projectsnodekb
> node app
internal/modules/cjs/loader.js:888
throw err;
^
Error: Cannot find module 'express-validator'
Require stack:
– C:projectsnodekbapp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
at Function.Module._load (internal/modules/cjs/loader.js:730:27)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:projectsnodekbapp.js:3:26)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'C:\projects\nodekb\app.js' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nodekb@1.0.0 start: `node app`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nodekb@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersEASY TECHNOLOGYAppDataRoamingnpm-cache_logs2021-06-17T04_33_33_770Z-debug.log
getting an error at articles:articles.. why??
Very good
Thanks for this great tutorial, you nailed the 3 most important things: template inheritance, variables and loops. And in shortest possible time.
Hi, it's great tutorial series. I want to know how to send user data to pug views after validation fail? Otherwise it runs perfectly. Plz help me.
Very good, very good
muchas gracias
muchas gracias
Awesome video, thanks!
why not use express-handler?
Why not change the name of author 3
Why don't you use ejs?
how can i access your source codes?