title
Node.js Crash Course Tutorial #6 - Express Apps

description
Hey gang, in this node.js tutorial we'll move on to another 3rd party package called Express. Express is a framework which helps us to easily create node.js web applications. 0:00 -- what is express? 2:28 -- creating an express app 7:21 -- routing & html pages 11:27 -- redirects & 404 pages 🐱‍👤🐱‍👤 JOIN THE GANG - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join ---------------------------------------- 🐱‍💻 🐱‍💻 My Udemy Courses: + Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript + Vue JS & Firebase - http://www.thenetninja.co.uk/udemy/vue-and-firebase + D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase 🐱‍💻 🐱‍💻 Course Files: https://github.com/iamshaunjp/node-crash-course 🐱‍💻 🐱‍💻 Other Related Free Courses: + Modern JavaScript Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc + HTML & CSS Crash Course - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G 🐱‍💻 🐱‍💻 Node.js links + Download here - https://nodejs.org/en/download/

detail
{'title': 'Node.js Crash Course Tutorial #6 - Express Apps', 'heatmap': [{'end': 695.814, 'start': 651.194, 'weight': 0.814}], 'summary': 'In this tutorial, the video covers using express framework for efficient management of routing requests, server-side logic, and responses, including setting up the server to listen for requests at port 3000, and handling multiple routes, redirects, and 404 pages efficiently compared to traditional server.js code.', 'chapters': [{'end': 108.023, 'segs': [{'end': 70.611, 'src': 'embed', 'start': 25.99, 'weight': 0, 'content': [{'end': 33.578, 'text': 'But if we start adding more complex routes or handling post requests from forms and generally adding more server side logic,', 'start': 25.99, 'duration': 7.588}, {'end': 36.361, 'text': 'then it will get quite messy and quite hard to organize.', 'start': 33.578, 'duration': 2.783}, {'end': 47.286, 'text': 'Now. Express is a framework that helps us to easily manage our routing requests, server-side logic and responses in a much, much more elegant way,', 'start': 36.882, 'duration': 10.404}, {'end': 50.727, 'text': 'and it makes our code easier to read and update and extend.', 'start': 47.286, 'duration': 3.441}, {'end': 53.288, 'text': "now you don't have to use express.", 'start': 50.727, 'duration': 2.561}, {'end': 57.488, 'text': 'you can do everything using raw node, as we have been doing so far.', 'start': 53.288, 'duration': 4.2}, {'end': 59.309, 'text': 'but express is really good.', 'start': 57.488, 'duration': 1.821}, {'end': 65.129, 'text': 'it saves us time, allows us to write clean code and it comes with some extra features that really really help us out.', 'start': 59.309, 'duration': 5.82}, {'end': 70.611, 'text': "so i'm just here on the express page on the npm website,", 'start': 66.13, 'duration': 4.481}], 'summary': 'Express framework simplifies server-side logic, saving time and enabling clean, extensible code.', 'duration': 44.621, 'max_score': 25.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA825990.jpg'}], 'start': 2.148, 'title': 'Using express framework', 'summary': 'Introduces express framework for managing routing requests, server-side logic, and responses, with extra features that save time and allow writing clean code.', 'chapters': [{'end': 108.023, 'start': 2.148, 'title': 'Installing express framework', 'summary': 'Introduces express framework as a tool for managing routing requests, server-side logic, and responses in a more elegant way, making the code easier to read and update, and it comes with extra features that save time and allows writing clean code.', 'duration': 105.875, 'highlights': ['Express is a framework that helps manage routing requests, server-side logic, and responses in a much more elegant way, making the code easier to read and update. It comes with extra features that save time and allows writing clean code.', 'Using Express saves time, allows writing clean code and comes with extra features that really help out.', 'Express framework is introduced as a tool for managing routing requests, server-side logic, and responses in a more elegant way, making the code easier to read and update.']}], 'duration': 105.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA82148.jpg', 'highlights': ['Express is a framework that helps manage routing requests, server-side logic, and responses in a much more elegant way, making the code easier to read and update.', 'Using Express saves time, allows writing clean code and comes with extra features that really help out.', 'Express framework is introduced as a tool for managing routing requests, server-side logic, and responses in a more elegant way, making the code easier to read and update.']}, {'end': 292.976, 'segs': [{'end': 157.709, 'src': 'embed', 'start': 108.023, 'weight': 0, 'content': [{'end': 115.468, 'text': "so it's quite similar, but as we add more routes, you're going to see that this becomes much easier than handling routes this way.", 'start': 108.023, 'duration': 7.445}, {'end': 118.068, 'text': "okay, so let's install it.", 'start': 115.828, 'duration': 2.24}, {'end': 120.529, 'text': 'first of all, npm install express.', 'start': 118.068, 'duration': 2.461}, {'end': 121.809, 'text': "that's what we need to do.", 'start': 120.529, 'duration': 1.28}, {'end': 125.37, 'text': "so, open up your terminal and i'm going to cancel out of this process.", 'start': 121.809, 'duration': 3.561}, {'end': 132.531, 'text': 'then say npm install express like so, and that should add it to your dependencies.', 'start': 125.37, 'duration': 7.161}, {'end': 139.733, 'text': "remember, if you're using an old version of node, use the save flag, which is double dash save at the end of that,", 'start': 132.531, 'duration': 7.202}, {'end': 142.253, 'text': "and it's going to save it to your dependencies.", 'start': 139.733, 'duration': 2.52}, {'end': 144.954, 'text': 'right here we can see express has been added.', 'start': 142.253, 'duration': 2.701}, {'end': 152.448, 'text': 'Okay, then so now we have Express installed.', 'start': 149.887, 'duration': 2.561}, {'end': 155.068, 'text': "let's go ahead and create an Express app.", 'start': 152.448, 'duration': 2.62}, {'end': 157.709, 'text': "Now to do this, I'm going to create a new file.", 'start': 155.549, 'duration': 2.16}], 'summary': 'Installing express via npm and creating an express app with new routes.', 'duration': 49.686, 'max_score': 108.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8108023.jpg'}, {'end': 208.006, 'src': 'embed', 'start': 182.796, 'weight': 1, 'content': [{'end': 187.738, 'text': 'we need to set up an express app, and that is really simple to do.', 'start': 182.796, 'duration': 4.942}, {'end': 194.061, 'text': 'all we need to say is const app and set it equal to express and then invoke that.', 'start': 187.738, 'duration': 6.323}, {'end': 198.082, 'text': "so this right here returns us a function and we're storing that in express,", 'start': 194.061, 'duration': 4.021}, {'end': 204.745, 'text': "and all we're doing is invoking that function to create an instance of an express app which we're storing in this constant.", 'start': 198.082, 'duration': 6.663}, {'end': 208.006, 'text': 'you can call this constant what you want, but you know, commonly people call it app.', 'start': 204.745, 'duration': 3.261}], 'summary': 'Setting up an express app is simple: const app = express() creates an instance.', 'duration': 25.21, 'max_score': 182.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8182796.jpg'}, {'end': 276.953, 'src': 'embed', 'start': 250.948, 'weight': 2, 'content': [{'end': 256.192, 'text': "but you don't need to, and i'm not going to do that for the sake of this tutorial either, all right.", 'start': 250.948, 'duration': 5.244}, {'end': 261.583, 'text': "so we've set up an express app and we're now listening for requests at port 3000.", 'start': 256.192, 'duration': 5.391}, {'end': 263.748, 'text': 'now, how do we actually respond to those requests?', 'start': 261.583, 'duration': 2.165}, {'end': 273.391, 'text': 'well, all we need to do is say app, and then, if you want to listen for a get request, we can use the dot get method, and this takes in two arguments.', 'start': 264.386, 'duration': 9.005}, {'end': 276.953, 'text': 'the first argument is what path or URL you want to listen to.', 'start': 273.391, 'duration': 3.562}], 'summary': 'Setting up an express app to listen for requests at port 3000 and respond to get requests with the dot get method.', 'duration': 26.005, 'max_score': 250.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8250948.jpg'}], 'start': 108.023, 'title': 'Setting up and using express app', 'summary': "Covers the process of installing express using npm, creating an express app, setting up the server to listen for requests at port 3000, and responding to a get request at the root domain. it emphasizes using 'npm install express' and the 'save' flag for older versions of node, requiring the express module, and creating an instance of an express app.", 'chapters': [{'end': 157.709, 'start': 108.023, 'title': 'Installing and creating express app', 'summary': "Details the process of installing express using npm and creating an express app, emphasizing the command 'npm install express' and the importance of using the 'save' flag for older versions of node.", 'duration': 49.686, 'highlights': ["The chapter emphasizes the command 'npm install express' for installing Express, followed by the importance of using the 'save' flag for older versions of node, which ensures it is saved to dependencies.", 'It mentions the ease of handling routes as more routes are added when using Express, contrasting it with other methods.', "The chapter instructs to open the terminal and use the command 'npm install express' to add Express to dependencies, highlighting the process of installation.", 'It details the process of creating an Express app, including creating a new file and carrying out the installation.']}, {'end': 204.745, 'start': 158.109, 'title': 'Setting up express app', 'summary': 'Discusses setting up an express app, including requiring the express module, creating an instance of an express app, and storing it in a constant.', 'duration': 46.636, 'highlights': ["Creating an instance of an Express app is done by invoking the function returned by calling 'express', which is stored in the constant 'app'.", "Requiring the Express module is achieved using the 'require' keyword to import the 'express' module.", "Storing the instance of the Express app in the constant 'app' simplifies access and management of the app."]}, {'end': 292.976, 'start': 204.745, 'title': 'Setting up express server and listening for requests', 'summary': 'Covers setting up an express app to listen for requests at port 3000, without the need to store the server instance for reuse, and responding to a get request at the root domain.', 'duration': 88.231, 'highlights': ['Setting up an Express app to listen for requests at port 3000', 'Responding to a get request at the root domain', 'No need to store the server instance for reuse']}], 'duration': 184.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8108023.jpg', 'highlights': ["The chapter emphasizes the command 'npm install express' for installing Express, followed by the importance of using the 'save' flag for older versions of node, which ensures it is saved to dependencies.", "Creating an instance of an Express app is done by invoking the function returned by calling 'express', which is stored in the constant 'app'.", 'Setting up an Express app to listen for requests at port 3000', 'It mentions the ease of handling routes as more routes are added when using Express, contrasting it with other methods.']}, {'end': 1147.342, 'segs': [{'end': 363.384, 'src': 'embed', 'start': 336.145, 'weight': 0, 'content': [{'end': 343.15, 'text': "it infers the type of content that we're trying to send to the browser and it automatically sets the content type header.", 'start': 336.145, 'duration': 7.005}, {'end': 349.735, 'text': "so this line of code over here we don't need to do anymore, because express automatically works that out for us,", 'start': 343.15, 'duration': 6.585}, {'end': 352.497, 'text': 'dependent on the type of content we send back.', 'start': 349.735, 'duration': 2.762}, {'end': 358.862, 'text': "another benefit of this is that it also infers the status code, so we don't need to manually set that.", 'start': 352.497, 'duration': 6.365}, {'end': 363.384, 'text': "there will be cases where we do want to manually set that, but a lot of the time it's going to set it for us.", 'start': 358.862, 'duration': 4.522}], 'summary': 'Express automatically sets content type and infers status code, reducing manual effort.', 'duration': 27.239, 'max_score': 336.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8336145.jpg'}, {'end': 432.426, 'src': 'embed', 'start': 408.374, 'weight': 5, 'content': [{'end': 415.258, 'text': 'we can see that the status code is 200 and also the content type has been automatically set to text html,', 'start': 408.374, 'duration': 6.884}, {'end': 419, 'text': "because it figured out that that's what we're sending right here.", 'start': 415.258, 'duration': 3.742}, {'end': 425.403, 'text': 'so that my friends is how easy it is to respond to a specific URL.', 'start': 419.64, 'duration': 5.763}, {'end': 432.426, 'text': 'now we do actually want to respond to several different URLs, like we did over here, like forward slash about, for example,', 'start': 425.403, 'duration': 7.023}], 'summary': 'The status code is 200 and the content type is set to text/html. demonstrates how to respond to a specific url and multiple different urls.', 'duration': 24.052, 'max_score': 408.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8408374.jpg'}, {'end': 505.419, 'src': 'embed', 'start': 460.353, 'weight': 2, 'content': [{'end': 465.016, 'text': 'so we can do that by just adding multiple of these different get handlers.', 'start': 460.353, 'duration': 4.663}, {'end': 469.399, 'text': "so I'm going to do that by copying this dude and pasting it right down here,", 'start': 465.016, 'duration': 4.383}, {'end': 479.385, 'text': 'and this time we want to respond to a get request at the URL forward slash About, and then we could just change this to About page.', 'start': 469.399, 'duration': 9.986}, {'end': 479.945, 'text': 'and there we have it.', 'start': 479.385, 'duration': 0.56}, {'end': 481.146, 'text': "That's how simple it is.", 'start': 480.005, 'duration': 1.141}, {'end': 483.827, 'text': "We've responded to two different routes now.", 'start': 481.226, 'duration': 2.601}, {'end': 491.612, 'text': 'So if I go to the browser again and go to forward slash about, I should see about page, and if I just go to forward slash, I see home page.', 'start': 483.827, 'duration': 7.785}, {'end': 493.052, 'text': "now that's okay.", 'start': 492.412, 'duration': 0.64}, {'end': 497.275, 'text': "but again, this isn't a great way to send html to the browser.", 'start': 493.052, 'duration': 4.223}, {'end': 503.038, 'text': 'ideally we want to send an html file so we can keep all of our html in separate files.', 'start': 497.275, 'duration': 5.763}, {'end': 505.419, 'text': 'now we already made all of those files over here.', 'start': 503.038, 'duration': 2.381}], 'summary': 'Creating multiple get handlers, responding to different routes, and sending html files for better organization.', 'duration': 45.066, 'max_score': 460.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8460353.jpg'}, {'end': 695.814, 'src': 'heatmap', 'start': 651.194, 'weight': 0.814, 'content': [{'end': 656.537, 'text': "so I'm going to do that underneath the h2 over here do a nav and inside two links.", 'start': 651.194, 'duration': 5.343}, {'end': 661.039, 'text': 'so one for the home page, which is just forward slash, and one for forward slash about.', 'start': 656.537, 'duration': 4.502}, {'end': 666.722, 'text': "and I'm going to do the same thing for the about file over here,", 'start': 661.039, 'duration': 5.683}, {'end': 674.891, 'text': "just so that we don't have to keep on typing out the address up in the address bar at the top and we can just click on one of these links on either of those pages.", 'start': 666.722, 'duration': 8.169}, {'end': 680.797, 'text': 'so let me cross that off and the refresh over here and now we can see home page and about page,', 'start': 674.891, 'duration': 5.906}, {'end': 684.541, 'text': 'and now we can just click on those just makes it a bit easier to test those two different routes.', 'start': 680.797, 'duration': 3.744}, {'end': 695.814, 'text': 'So previously we saw how to do a redirect without Express over here in the server.js code.', 'start': 689.79, 'duration': 6.024}], 'summary': 'Created navigation links for home and about pages to simplify testing routes.', 'duration': 44.62, 'max_score': 651.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8651194.jpg'}, {'end': 744.057, 'src': 'embed', 'start': 715.165, 'weight': 3, 'content': [{'end': 717.827, 'text': 'So how do we do something similar in Express??', 'start': 715.165, 'duration': 2.662}, {'end': 720.368, 'text': "well, it's really easy.", 'start': 718.547, 'duration': 1.821}, {'end': 725.769, 'text': 'all we need to do is create another get handler for the url that we want to redirect first of all.', 'start': 720.368, 'duration': 5.401}, {'end': 732.952, 'text': "so let's say app.get and say we want to redirect users that go to forward slash about hyphen us.", 'start': 725.769, 'duration': 7.183}, {'end': 735.813, 'text': "So we're going to match against this URL.", 'start': 733.712, 'duration': 2.101}, {'end': 739.835, 'text': 'Then we fire a function when a request for this URL comes in.', 'start': 736.313, 'duration': 3.522}, {'end': 744.057, 'text': 'So request and response, we get access to those objects inside this function.', 'start': 739.895, 'duration': 4.162}], 'summary': 'In express, creating a get handler to redirect users to a specific url is simple and involves matching the url and defining a function to handle the request and response.', 'duration': 28.892, 'max_score': 715.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8715165.jpg'}, {'end': 820.378, 'src': 'embed', 'start': 794.249, 'weight': 4, 'content': [{'end': 800.511, 'text': 'and we did that by just having a default case down here which amended to the path 404.html.', 'start': 794.249, 'duration': 6.262}, {'end': 804.612, 'text': 'we set the status code and then we sent back that file.', 'start': 800.511, 'duration': 4.101}, {'end': 808.793, 'text': 'so We can do a 404 in Express really easily as well.', 'start': 804.612, 'duration': 4.181}, {'end': 810.694, 'text': 'And the way we do it is by saying app.', 'start': 809.093, 'duration': 1.601}, {'end': 813.235, 'text': 'And then this time we use a method called use.', 'start': 810.854, 'duration': 2.381}, {'end': 820.378, 'text': 'Now we use this method use to create middleware and fire middleware functions in Express.', 'start': 813.755, 'duration': 6.623}], 'summary': 'Express makes 404 handling easy with middleware functions.', 'duration': 26.129, 'max_score': 794.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8794249.jpg'}], 'start': 292.976, 'title': 'Express route handling', 'summary': 'Covers using response.send method in express to automatically infer content type and status code, and handling multiple routes, redirects, and 404 pages efficiently compared to traditional server.js code.', 'chapters': [{'end': 358.862, 'start': 292.976, 'title': 'Using response.send in express', 'summary': 'Explains how to use the response.send method in express, which automatically infers the type of content and sets the content type header, eliminating the need for manual configuration and inferring the status code.', 'duration': 65.886, 'highlights': ['The response.send method in Express infers the type of content and sets the content type header automatically, eliminating manual configuration and infers the status code.', 'Using response.send method in Express benefits include inferring the type of content and automatically setting the content type header.']}, {'end': 1147.342, 'start': 358.862, 'title': 'Handling routes and responses with express', 'summary': 'Demonstrates how to handle multiple routes, set up redirects, and create a 404 page using express, simplifying the process and enabling efficient route handling compared to traditional server.js code.', 'duration': 788.48, 'highlights': ['The chapter demonstrates how to send back HTML content in response to a specific URL by setting the status code to 200 and the content type to text/html, making it easy to respond to a specific URL.', 'The process of responding to multiple URLs is simplified by adding multiple get handlers, allowing for easy handling of various URLs with distinct responses.', 'Express simplifies the process of sending HTML files to the browser by using the sendFile method and specifying the root directory, providing a more efficient approach compared to traditional methods.', 'Setting up redirects is made easy with Express by creating a get handler for the desired URL and using the redirect method, simplifying the process compared to traditional methods.', 'Creating a 404 page in Express is simplified using the use method to create middleware functions, allowing for easy handling of incorrect URLs and sending a 404 page to the browser.']}], 'duration': 854.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Lr9WUkeYSA8/pics/Lr9WUkeYSA8292976.jpg', 'highlights': ['The response.send method in Express infers the type of content and sets the content type header automatically, eliminating manual configuration and infers the status code.', 'Using response.send method in Express benefits include inferring the type of content and automatically setting the content type header.', 'Express simplifies the process of sending HTML files to the browser by using the sendFile method and specifying the root directory, providing a more efficient approach compared to traditional methods.', 'Setting up redirects is made easy with Express by creating a get handler for the desired URL and using the redirect method, simplifying the process compared to traditional methods.', 'Creating a 404 page in Express is simplified using the use method to create middleware functions, allowing for easy handling of incorrect URLs and sending a 404 page to the browser.', 'The chapter demonstrates how to send back HTML content in response to a specific URL by setting the status code to 200 and the content type to text/html, making it easy to respond to a specific URL.', 'The process of responding to multiple URLs is simplified by adding multiple get handlers, allowing for easy handling of various URLs with distinct responses.']}], 'highlights': ['Express simplifies sending HTML files using sendFile method, providing efficient approach', 'Express simplifies setting up redirects with redirect method, simplifying the process', 'Express simplifies creating 404 page using use method to create middleware functions', 'Express simplifies responding to multiple URLs by adding multiple get handlers', 'Express saves time, allows writing clean code, and comes with extra features', 'Express is introduced as a tool for managing routing requests, server-side logic, and responses', 'Setting up Express app to listen for requests at port 3000', 'The response.send method in Express infers type of content and sets content type header automatically', "Creating an instance of an Express app is done by invoking the function returned by calling 'express'", "Emphasizes 'npm install express' for installing Express and using 'save' flag for older versions of node"]}