title
Node.js & Express From Scratch [Part 3] - Pug Template Engine

description
In this video we will install the Pug template engine and integrate it with Express. We will also install the Pug package for the Atom text editor. CODE: Full code for this series https://github.com/bradtraversy/nodekb COURSE: Full course this project is based on http://www.traversymedia.com/course/projects-in-mongodb-learn-mongodb-building-ten-projects/ SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/bradtraversy

detail
{'title': 'Node.js & Express From Scratch [Part 3] - Pug Template Engine', 'heatmap': [{'end': 875.728, 'start': 839.363, 'weight': 1}], 'summary': 'Tutorial series on node.js & express covers installing the pug templating engine, setting up pug for html rendering, passing values to a template, optimizing web layout with pug, and preparing to work with mongodb for an express app.', 'chapters': [{'end': 49.44, 'segs': [{'end': 49.44, 'src': 'embed', 'start': 0.618, 'weight': 0, 'content': [{'end': 3.02, 'text': 'alright, guys, in the last video we installed express,', 'start': 0.618, 'duration': 2.402}, {'end': 9.204, 'text': "we set up our our app.js file and we have our server running and it's just spitting out hello world.", 'start': 3.02, 'duration': 6.184}, {'end': 16.469, 'text': 'alright, I still have this running on port 3000, so what I want to do now is install a templating engine called pug.', 'start': 9.204, 'duration': 7.265}, {'end': 23.433, 'text': "now Pug is formerly known as Jade and it's a template engine that works a little different than most.", 'start': 16.469, 'duration': 6.964}, {'end': 27.817, 'text': 'Instead of using HTML tags, it uses indentation.', 'start': 23.933, 'duration': 3.884}, {'end': 30.399, 'text': "All right, and I'll show you what I mean in a minute.", 'start': 27.837, 'duration': 2.562}, {'end': 31.42, 'text': "So let's install that.", 'start': 30.459, 'duration': 0.961}, {'end': 41.628, 'text': "I'm going to stop the server with Control-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 say Pug.", 'start': 31.44, 'duration': 10.188}, {'end': 49.44, 'text': 'all right, so that should go ahead and install it and it should get added here.', 'start': 45.117, 'duration': 4.323}], 'summary': 'Installed express, set up app.js, running server on port 3000, installed pug templating engine', 'duration': 48.822, 'max_score': 0.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M618.jpg'}], 'start': 0.618, 'title': 'Installing pug templating engine', 'summary': 'Covers the installation of the pug templating engine, formerly known as jade, in an express app, demonstrating its usage and setup process.', 'chapters': [{'end': 49.44, 'start': 0.618, 'title': 'Installing pug templating engine', 'summary': 'Covers the installation of the pug templating engine, formerly known as jade, in an express app, demonstrating its usage and setup process.', 'duration': 48.822, 'highlights': ["Express app.js file set up with server running and spitting out 'hello world'", 'Installation of Pug templating engine, formerly known as Jade', "Explanation of Pug's usage and its difference from traditional template engines", 'Stop the server with Control-C before npm install Pug', 'Usage of indentation instead of HTML tags in Pug']}], 'duration': 48.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M618.jpg', 'highlights': ['Installation of Pug templating engine, formerly known as Jade', "Explanation of Pug's usage and its difference from traditional template engines", 'Usage of indentation instead of HTML tags in Pug', "Express app.js file set up with server running and spitting out 'hello world'", 'Stop the server with Control-C before npm install Pug']}, {'end': 364.566, 'segs': [{'end': 90.207, 'src': 'embed', 'start': 49.44, 'weight': 0, 'content': [{'end': 55.524, 'text': 'all right, and you can see over here, we now have pug.', 'start': 49.44, 'duration': 6.084}, {'end': 63.43, 'text': "so to do this we're going to go back to our app.js and since we're using express, it's actually really easy to set this up.", 'start': 55.524, 'duration': 7.906}, {'end': 69.454, 'text': "so let's go right under here and actually we should probably comment this a little bit.", 'start': 63.43, 'duration': 6.024}, {'end': 73.277, 'text': "so let's say init app.", 'start': 69.454, 'duration': 3.823}, {'end': 79.756, 'text': 'this will be the home route.', 'start': 73.277, 'duration': 6.479}, {'end': 90.207, 'text': "start server and under here let's say load view engine.", 'start': 79.756, 'duration': 10.451}], 'summary': 'Using express, set up pug in app.js for home route and view engine.', 'duration': 40.767, 'max_score': 49.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M49440.jpg'}, {'end': 173.881, 'src': 'embed', 'start': 141.37, 'weight': 1, 'content': [{'end': 143.091, 'text': 'And then we just need to set it to pug.', 'start': 141.37, 'duration': 1.721}, {'end': 144.851, 'text': 'So we can say app.set.', 'start': 143.151, 'duration': 1.7}, {'end': 148.053, 'text': "And let's say view engine.", 'start': 146.412, 'duration': 1.641}, {'end': 152.755, 'text': "And then we're going to define it as pug.", 'start': 150.894, 'duration': 1.861}, {'end': 158.674, 'text': "Alright, so we'll save that, and then over here we'll create a new folder called Views.", 'start': 154.352, 'duration': 4.322}, {'end': 167.138, 'text': "And in here, let's see, I guess we'll create index.pug.", 'start': 160.935, 'duration': 6.203}, {'end': 173.881, 'text': 'Okay, so all your pug views should have an extension of pug.', 'start': 167.158, 'duration': 6.723}], 'summary': 'Setting view engine to pug and creating index.pug in the views folder.', 'duration': 32.511, 'max_score': 141.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M141370.jpg'}, {'end': 258.341, 'src': 'embed', 'start': 203.928, 'weight': 2, 'content': [{'end': 207.31, 'text': 'and then go over here and reload.', 'start': 203.928, 'duration': 3.382}, {'end': 209.431, 'text': 'and now we have hello world with an h1.', 'start': 207.31, 'duration': 2.121}, {'end': 212.794, 'text': "it's loading index.pug.", 'start': 209.431, 'duration': 3.363}, {'end': 215.956, 'text': "now let's talk about pug for a minute.", 'start': 212.794, 'duration': 3.162}, {'end': 221.319, 'text': "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.", 'start': 215.956, 'duration': 5.363}, {'end': 223.06, 'text': 'so we have a doc type.', 'start': 221.319, 'duration': 1.741}, {'end': 226.561, 'text': "So let's say Doctype HTML.", 'start': 225, 'duration': 1.561}, {'end': 229.043, 'text': "Notice I'm not using any angle brackets.", 'start': 226.961, 'duration': 2.082}, {'end': 231.865, 'text': "There's no tags in Pug.", 'start': 229.443, 'duration': 2.422}, {'end': 237.108, 'text': 'So on the same level as the Doctype, we want the HTML tags.', 'start': 232.605, 'duration': 4.503}, {'end': 238.349, 'text': "So let's do HTML.", 'start': 237.168, 'duration': 1.181}, {'end': 243.412, 'text': 'And then inside the HTML tag, we always have a head and a body.', 'start': 239.009, 'duration': 4.403}, {'end': 245.514, 'text': "So what I'm going to do is tab over one.", 'start': 243.532, 'duration': 1.982}, {'end': 250.477, 'text': 'Now you can use tab or space to do your indents, but it has to be consistent.', 'start': 246.054, 'duration': 4.423}, {'end': 253.999, 'text': 'If you use tab once, you need to use tab for everything.', 'start': 250.597, 'duration': 3.402}, {'end': 254.76, 'text': "Don't use both.", 'start': 254.059, 'duration': 0.701}, {'end': 256.641, 'text': "or you'll get an error.", 'start': 255.22, 'duration': 1.421}, {'end': 258.341, 'text': "so let's put our head tag now.", 'start': 256.641, 'duration': 1.7}], 'summary': 'Introduction to pug for web development, with focus on indentation and structure.', 'duration': 54.413, 'max_score': 203.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M203928.jpg'}], 'start': 49.44, 'title': 'Setting up pug for html rendering in express', 'summary': 'Explains the process of setting up pug for html rendering in express, including configuring the view engine to pug, creating a pug file for the index page, and utilizing indentation to define html structure, ensuring consistent indentation throughout.', 'chapters': [{'end': 140.85, 'start': 49.44, 'title': 'Setting up pug in express', 'summary': 'Explains the process of setting up pug in express, including initializing the app, setting the home route, starting the server, and loading the view engine with specific folder paths.', 'duration': 91.41, 'highlights': ['The chapter covers the process of setting up Pug in Express, including initializing the app, setting the home route, starting the server, and loading the view engine with specific folder paths.', "It demonstrates the use of the 'dot set' method to specify the folder where views or templates will be kept in Express, utilizing the 'views' folder and the 'path' module.", "The tutorial also highlights the inclusion of the 'path' module, which is a core module included with Node.js by default, eliminating the need for npm installation."]}, {'end': 364.566, 'start': 141.37, 'title': 'Setting up pug for html rendering', 'summary': 'Demonstrates setting up pug for html rendering by configuring the view engine to pug, creating a pug file for the index page, and utilizing indentation to define html structure, ensuring consistent indentation throughout.', 'duration': 223.196, 'highlights': ["Configuring the view engine to Pug The chapter explains setting the view engine to Pug using 'app.set' and defining it as pug, demonstrating the configuration process.", "Creating index.pug for the web page It describes creating an index.pug file within a Views folder, adding an H1 tag with 'hello world' content and utilizing Pug syntax for HTML structure.", 'Utilizing indentation for HTML structure The chapter emphasizes using consistent indentation, either tab or space, for defining the HTML structure in Pug, ensuring elements are properly nested within each other.', 'Defining standard HTML tags and structure in Pug It demonstrates defining standard HTML structure in Pug using doc type, HTML, head, title, and body tags, and explains the indentation rules for proper nesting.']}], 'duration': 315.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M49440.jpg', 'highlights': ['The chapter covers the process of setting up Pug in Express, including initializing the app, setting the home route, starting the server, and loading the view engine with specific folder paths.', "Configuring the view engine to Pug using 'app.set' and defining it as pug, demonstrating the configuration process.", "Creating index.pug file within a Views folder, adding an H1 tag with 'hello world' content and utilizing Pug syntax for HTML structure.", 'Utilizing consistent indentation, either tab or space, for defining the HTML structure in Pug, ensuring elements are properly nested within each other.']}, {'end': 999.849, 'segs': [{'end': 389.702, 'src': 'embed', 'start': 364.566, 'weight': 3, 'content': [{'end': 370.204, 'text': 'okay, Now we can also pass values to our template or to our view.', 'start': 364.566, 'duration': 5.638}, {'end': 380.974, 'text': "So if we go back to app.js and we go down here where we have this res.render, let's put a comma here and then some curly braces,", 'start': 370.324, 'duration': 10.65}, {'end': 382.635, 'text': 'because we want to send this as an object.', 'start': 380.974, 'duration': 1.661}, {'end': 388.32, 'text': "And let's say title and let's say, we'll just say hello.", 'start': 383.136, 'duration': 5.184}, {'end': 389.702, 'text': 'All right.', 'start': 388.34, 'duration': 1.362}], 'summary': 'Pass values to view in app.js: title: hello', 'duration': 25.136, 'max_score': 364.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M364566.jpg'}, {'end': 478.532, 'src': 'embed', 'start': 439.89, 'weight': 0, 'content': [{'end': 441.592, 'text': "Okay, so it'll be installed.", 'start': 439.89, 'duration': 1.702}, {'end': 443.413, 'text': "We'll be able to run it from any directory.", 'start': 441.612, 'duration': 1.801}, {'end': 445.756, 'text': 'And then we just want to do nodemon.', 'start': 443.874, 'duration': 1.882}, {'end': 455.545, 'text': "Okay, and this will make it so that we can run it and we don't have to keep resetting the server because that can start to become really annoying.", 'start': 447.738, 'duration': 7.807}, {'end': 463.933, 'text': "Okay, so now if we're in our application root directory here, we should just be able to say nodemon.", 'start': 455.565, 'duration': 8.368}, {'end': 467.809, 'text': "And now you'll see it's running on port 3000.", 'start': 465.908, 'duration': 1.901}, {'end': 478.532, 'text': "And then if I go over to AppJS 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.", 'start': 467.809, 'duration': 10.723}], 'summary': 'Nodemon installed, allows running without resetting server, running on port 3000, updates on change', 'duration': 38.642, 'max_score': 439.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M439890.jpg'}, {'end': 526.185, 'src': 'embed', 'start': 490.271, 'weight': 5, 'content': [{'end': 491.571, 'text': "So let's go to our app.js.", 'start': 490.271, 'duration': 1.3}, {'end': 493.052, 'text': 'And we have our home route here.', 'start': 491.831, 'duration': 1.221}, {'end': 497.353, 'text': "Let's say we wanted a route to go to a page where we could add an article.", 'start': 493.432, 'duration': 3.921}, {'end': 501.654, 'text': "So let's say add route.", 'start': 498.493, 'duration': 3.161}, {'end': 504.615, 'text': "And then we're going to do app.get.", 'start': 503.115, 'duration': 1.5}, {'end': 511.757, 'text': 'And we want this to go to slash articles slash add.', 'start': 507.156, 'duration': 4.601}, {'end': 523.003, 'text': "And then we'll put our function, which will take the request and response.", 'start': 515.498, 'duration': 7.505}, {'end': 526.185, 'text': "And then let's render another template.", 'start': 524.224, 'duration': 1.961}], 'summary': 'In app.js, a route is added to go to a page for adding an article.', 'duration': 35.914, 'max_score': 490.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M490271.jpg'}, {'end': 621.159, 'src': 'embed', 'start': 598.044, 'weight': 1, 'content': [{'end': 606.029, 'text': 'Now one thing that you may have noticed is that on both views we have some repeating code or repeating markup.', 'start': 598.044, 'duration': 7.985}, {'end': 609.472, 'text': 'So we have the doc type, the HTML, the head, all that.', 'start': 606.61, 'duration': 2.862}, {'end': 616.016, 'text': 'So what you want to do is you want to create a layout and then you want to extend that layout.', 'start': 610.032, 'duration': 5.984}, {'end': 621.159, 'text': "You want your individual views to extend that layout so that you don't have to keep repeating yourself.", 'start': 616.176, 'duration': 4.983}], 'summary': 'Creating a layout to avoid repeating code in views.', 'duration': 23.115, 'max_score': 598.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M598044.jpg'}, {'end': 756.452, 'src': 'embed', 'start': 731.832, 'weight': 4, 'content': [{'end': 739.018, 'text': "This way we don't have to repeat ourselves and we can just edit this one file if we want to change the title or something like that.", 'start': 731.832, 'duration': 7.186}, {'end': 743.281, 'text': 'Now we can also add control structures to Pug.', 'start': 739.998, 'duration': 3.283}, {'end': 746.143, 'text': 'We can have if statements, we can have loops and so on.', 'start': 743.321, 'duration': 2.822}, {'end': 752.469, 'text': 'So what I want to do is go back to AppJS and go to our home page, which is just going to display the articles.', 'start': 746.183, 'duration': 6.286}, {'end': 756.452, 'text': "And let's create for now just a static array.", 'start': 753.169, 'duration': 3.283}], 'summary': 'Implementing control structures in pug, adding if statements, and loops to appjs for displaying articles.', 'duration': 24.62, 'max_score': 731.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M731832.jpg'}, {'end': 875.728, 'src': 'heatmap', 'start': 839.363, 'weight': 1, 'content': [{'end': 844.788, 'text': "So let's just say articles and we'll set that to the articles variable.", 'start': 839.363, 'duration': 5.425}, {'end': 854.037, 'text': "So if we save it and then go to our index dot pug, let's go under the H1 and we're going to loop through so we can say each.", 'start': 845.669, 'duration': 8.368}, {'end': 866.862, 'text': "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,", 'start': 856.215, 'duration': 10.647}, {'end': 875.728, 'text': "because we want to be inside of this loop and let's put actually know what we'll do is, we'll put a ul here,", 'start': 866.862, 'duration': 8.866}], 'summary': 'Loop through articles variable to create a list in index.pug.', 'duration': 36.365, 'max_score': 839.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M839363.jpg'}, {'end': 992.021, 'src': 'embed', 'start': 969.663, 'weight': 2, 'content': [{'end': 978.228, 'text': "I'm going to show you how to add some articles to the database through the Mongo shell, which is a command line interface.", 'start': 969.663, 'duration': 8.565}, {'end': 982.131, 'text': "And for those of you that are a little intimidated by the command line, don't be.", 'start': 978.288, 'duration': 3.843}, {'end': 983.612, 'text': "It's not very difficult.", 'start': 982.191, 'duration': 1.421}, {'end': 989.278, 'text': "And then we're going to implement Mongoose, which is an ORM.", 'start': 984.332, 'duration': 4.946}, {'end': 992.021, 'text': "It's a node module to interact with the database.", 'start': 989.378, 'duration': 2.643}], 'summary': 'Demonstrating how to add articles to the mongo database via the command line and implementing mongoose orm for database interaction.', 'duration': 22.358, 'max_score': 969.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M969663.jpg'}], 'start': 364.566, 'title': 'Passing values and optimizing web layout', 'summary': 'Discusses passing values to a template, using nodemon for server restart, creating a new route, optimizing web layout with pug, creating a layout file, implementing control structures, and preparing to work with mongodb.', 'chapters': [{'end': 596.815, 'start': 364.566, 'title': 'Passing values to template and using nodemon', 'summary': 'Discusses passing values to a template, using nodemon to automatically restart the server, and creating a new route to add an article to the application.', 'duration': 232.249, 'highlights': ["The chapter discusses how to pass values to a template by using res.render and sending data as an object with a specified title, such as 'hello'. Passing values to a template is demonstrated by sending data as an object with a specified title, such as 'hello'.", 'The tutorial explains the installation and usage of nodemon, a tool that automatically restarts the server upon code changes, thus eliminating the need to manually restart the server. Nodemon is introduced as a tool that automatically restarts the server upon code changes, eliminating the need for manual server restarts.', "The process of creating a new route to add an article to the application is outlined, including setting up the route using app.get and rendering a template or view called 'add' with the title 'add article'. Creating a new route to add an article is demonstrated by setting up the route using app.get and rendering a template with the title 'add article'."]}, {'end': 999.849, 'start': 598.044, 'title': 'Optimizing web layout with pug', 'summary': 'Discusses optimizing web layout with pug, creating a layout file to eliminate repetitive markup, implementing control structures, and preparing to work with mongodb to retrieve and display articles.', 'duration': 401.805, 'highlights': ['Creating a layout file to eliminate repetitive markup The chapter emphasizes creating a layout file in Pug to avoid repeating code or markup, which streamlines the development process and reduces redundancy.', 'Implementing control structures and static array in Pug It explains adding control structures like if statements and loops to Pug, and creating a static array of objects to be passed into the view, showcasing the flexibility and capability of Pug in handling dynamic content.', 'Preparing to work with MongoDB to retrieve and display articles The chapter sets the stage for retrieving and displaying articles from MongoDB, highlighting the upcoming integration with MongoDB using Mongoose, an ORM, to interact with the database.']}], 'duration': 635.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ad2ngx6CT0M/pics/Ad2ngx6CT0M364566.jpg', 'highlights': ['The tutorial explains the installation and usage of nodemon, a tool that automatically restarts the server upon code changes, thus eliminating the need to manually restart the server.', 'Creating a layout file to eliminate repetitive markup.', 'Preparing to work with MongoDB to retrieve and display articles.', "The chapter discusses how to pass values to a template by using res.render and sending data as an object with a specified title, such as 'hello'.", 'Implementing control structures and static array in Pug.', "The process of creating a new route to add an article to the application is outlined, including setting up the route using app.get and rendering a template or view called 'add' with the title 'add article'."]}], 'highlights': ['Creating a layout file to eliminate repetitive markup.', "The process of creating a new route to add an article to the application is outlined, including setting up the route using app.get and rendering a template or view called 'add' with the title 'add article'.", 'The tutorial explains the installation and usage of nodemon, a tool that automatically restarts the server upon code changes, thus eliminating the need to manually restart the server.', 'Preparing to work with MongoDB to retrieve and display articles.', 'The chapter covers the process of setting up Pug in Express, including initializing the app, setting the home route, starting the server, and loading the view engine with specific folder paths.']}