title
Node.js Crash Course Tutorial #8 - Middleware

description
In this node.js tutorial we'll talk about what middleware is & how we use middleware in node.js applications using the use( ) method. 0:00 -- what is middleware? 5:40 -- using next( ) 8:20 -- 3rd party middleware 11:31 -- static files 🐱‍👤🐱‍👤 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 #8 - Middleware', 'heatmap': [{'end': 874.231, 'start': 848.563, 'weight': 0.987}], 'summary': 'This tutorial covers the concept, usage, and creation of middleware in node.js, including its function, order importance, and application in route handling, request logging, and authentication checks. it also addresses express middleware, handling browser hanging issues, creating, testing, and executing middleware for logging requests and handling different routes. additionally, it discusses the benefits of using ready-made middleware functions like morgan and helmet in node and express, demonstrating how to install and use morgan for logging, configure it, and observe the logged output on the console. lastly, it explains using express static middleware to serve static files and enhance website performance.', 'chapters': [{'end': 304.052, 'segs': [{'end': 96.848, 'src': 'embed', 'start': 2.119, 'weight': 0, 'content': [{'end': 2.859, 'text': 'all right, then gang.', 'start': 2.119, 'duration': 0.74}, {'end': 8.521, 'text': 'so before we go any further with express, i want to talk about something called middleware.', 'start': 2.859, 'duration': 5.662}, {'end': 18.923, 'text': 'now middleware is basically a name for any code which runs on the server between getting a request and sending a response, so the request comes in,', 'start': 8.521, 'duration': 10.402}, {'end': 26.525, 'text': 'and any kind of code or function that runs between getting that request and sending a response is technically middleware.', 'start': 18.923, 'duration': 7.602}, {'end': 35.689, 'text': "now the use method is generally used to run some middleware code, and we've seen that already when we handled our 404 cases.", 'start': 27.305, 'duration': 8.384}, {'end': 38.91, 'text': "now we don't just have to have one bit of middleware.", 'start': 35.689, 'duration': 3.221}, {'end': 42.371, 'text': 'we could have more than one piece of middleware that runs on the server.', 'start': 38.91, 'duration': 3.461}, {'end': 48.154, 'text': 'so in this case, right here, three functions would run on the server before maybe a response is sent.', 'start': 42.371, 'duration': 5.783}, {'end': 54.898, 'text': 'now the functions that run in our get handlers are also essentially middleware.', 'start': 48.934, 'duration': 5.964}, {'end': 62.964, 'text': 'remember, middleware is just functions or code which runs on the server between the request coming in and the response going back to the browser,', 'start': 54.898, 'duration': 8.066}, {'end': 71.65, 'text': 'the difference being that get handlers right here only fire functions for get requests to a certain route, the use method.', 'start': 62.964, 'duration': 8.686}, {'end': 77.014, 'text': 'right here they run for every type of request to all routes, including post requests.', 'start': 71.65, 'duration': 5.364}, {'end': 88.678, 'text': 'now middleware runs from top to bottom in our code and it runs that way until we exit the process or explicitly send a response to the browser.', 'start': 77.884, 'duration': 10.794}, {'end': 92.582, 'text': 'so, for example, say we have all this middleware on our server.', 'start': 88.678, 'duration': 3.904}, {'end': 96.848, 'text': 'now we send a request to just forward slash and that request comes to the server.', 'start': 92.582, 'duration': 4.266}], 'summary': 'Middleware runs between request and response, multiple functions can run, including get handlers, for all routes and request types.', 'duration': 94.729, 'max_score': 2.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_42119.jpg'}, {'end': 185.464, 'src': 'embed', 'start': 119.455, 'weight': 1, 'content': [{'end': 122.237, 'text': "therefore we don't carry on down the code.", 'start': 119.455, 'duration': 2.782}, {'end': 136.445, 'text': "so the order of middleware is very important to how it runs and we've actually already been using middleware a lot without really noticing when we've been adding route handler functions or setting up 404 handlers with the use method.", 'start': 122.237, 'duration': 14.208}, {'end': 141.836, 'text': "Now, aside from route handlers like this, there's a ton of other stuff we can do with middleware.", 'start': 137.372, 'duration': 4.464}, {'end': 148.903, 'text': 'So for example, we could create a log up middleware function to log the details of every request coming into the server.', 'start': 142.537, 'duration': 6.366}, {'end': 152.106, 'text': 'We could create middleware for authentication checks.', 'start': 149.423, 'duration': 2.683}, {'end': 160.136, 'text': 'we can use middleware to pass json data sent from post requests or use middleware to return a 404 page.', 'start': 152.586, 'duration': 7.55}, {'end': 168.327, 'text': "as we've already seen, there's many other things we can do with middleware as well, but now let's try creating our own middleware in the code.", 'start': 160.136, 'duration': 8.191}, {'end': 174.794, 'text': "So then we've already seen a bit of custom middleware we've created down here using the use method.", 'start': 169.128, 'duration': 5.666}, {'end': 177.596, 'text': 'So this is to handle 404 cases.', 'start': 175.314, 'duration': 2.282}, {'end': 183.963, 'text': 'So for every request, this will fire as long as a response has not yet been set.', 'start': 178.017, 'duration': 5.946}, {'end': 185.464, 'text': 'Remember, it runs top to bottom.', 'start': 184.023, 'duration': 1.441}], 'summary': 'Understanding the importance of middleware order and its versatile applications in handling requests and responses.', 'duration': 66.009, 'max_score': 119.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4119455.jpg'}], 'start': 2.119, 'title': 'Middleware in node.js', 'summary': 'Covers the concept and usage of middleware in node.js, including its function, order importance, and creation of custom middleware, with examples of its application in route handling, request logging, and authentication checks.', 'chapters': [{'end': 119.455, 'start': 2.119, 'title': 'Understanding middleware in express', 'summary': 'Explains the concept of middleware in express, outlining its function of running code on the server between request and response and how multiple middleware can be used, with examples of its application in get handlers and the use method.', 'duration': 117.336, 'highlights': ['Middleware is any code that runs on the server between getting a request and sending a response.', 'The use method is used to run middleware code, and multiple pieces of middleware can run on the server.', 'Get handlers also function as middleware, firing functions for get requests to a certain route.', 'Middleware runs from top to bottom in the code until a response is sent, either explicitly or by exiting the process.']}, {'end': 160.136, 'start': 119.455, 'title': 'Middleware usage in node.js', 'summary': 'Discusses the importance of middleware order in node.js, highlighting its usage in route handler functions, 404 handlers, logging request details, authentication checks, and processing json data from post requests.', 'duration': 40.681, 'highlights': ['The order of middleware is very important to how it runs, affecting the code execution.', 'Middleware is used in route handler functions and setting up 404 handlers with the use method.', 'Creating a log up middleware function to log the details of every request coming into the server is mentioned as an example of using middleware.', 'Using middleware for authentication checks is another highlighted use case.', 'The chapter also mentions using middleware to pass JSON data sent from post requests and to return a 404 page.']}, {'end': 304.052, 'start': 160.136, 'title': 'Creating custom middleware in node.js', 'summary': 'Discusses the creation of custom middleware in node.js, including handling 404 cases, the order of middleware execution, and creating a middleware to log details for every request, demonstrating the functionality with a new request.', 'duration': 143.916, 'highlights': ['Middleware for handling 404 cases', 'Order of middleware execution', 'Creation of a custom middleware to log details for every request']}], 'duration': 301.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_42119.jpg', 'highlights': ['Middleware is any code that runs on the server between getting a request and sending a response.', 'The order of middleware is very important to how it runs, affecting the code execution.', 'The use method is used to run middleware code, and multiple pieces of middleware can run on the server.', 'Get handlers also function as middleware, firing functions for get requests to a certain route.', 'Creating a log up middleware function to log the details of every request coming into the server is mentioned as an example of using middleware.', 'Using middleware for authentication checks is another highlighted use case.', 'Middleware runs from top to bottom in the code until a response is sent, either explicitly or by exiting the process.', 'Middleware is used in route handler functions and setting up 404 handlers with the use method.', 'The chapter also mentions using middleware to pass JSON data sent from post requests and to return a 404 page.', 'Middleware for handling 404 cases', 'Order of middleware execution', 'Creation of a custom middleware to log details for every request']}, {'end': 490.478, 'segs': [{'end': 376.98, 'src': 'embed', 'start': 330.842, 'weight': 0, 'content': [{'end': 334.405, 'text': "It doesn't know how to move on to the next middleware down here.", 'start': 330.842, 'duration': 3.563}, {'end': 337.107, 'text': "So let's address that issue next.", 'start': 334.485, 'duration': 2.622}, {'end': 344.362, 'text': "so we've seen how the browser hangs.", 'start': 342.501, 'duration': 1.861}, {'end': 349.724, 'text': "when we run this middleware right here, because express doesn't automatically know how to move on,", 'start': 344.362, 'duration': 5.362}, {'end': 357.008, 'text': 'we have to explicitly tell it to move on to the next function down here, and we do that by using a function called next.', 'start': 349.724, 'duration': 7.284}, {'end': 363.192, 'text': 'now we get access to that function up here in the parameters, so we can say next, right here.', 'start': 357.708, 'duration': 5.484}, {'end': 371.157, 'text': "so this is a function and all we have to do is invoke it right here, and that says to express look, we're finished inside this middleware.", 'start': 363.192, 'duration': 7.965}, {'end': 375.339, 'text': "now move on to the next lock, because we're not sending a response to the browser.", 'start': 371.157, 'duration': 4.182}, {'end': 376.98, 'text': 'we just wanted to do something.', 'start': 375.339, 'duration': 1.641}], 'summary': "Express middleware requires explicit 'next' function to move on, as it doesn't automatically do so.", 'duration': 46.138, 'max_score': 330.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4330842.jpg'}, {'end': 425.225, 'src': 'embed', 'start': 399.415, 'weight': 3, 'content': [{'end': 404.521, 'text': "so let's just test this out a little bit more by creating now another bit of middleware.", 'start': 399.415, 'duration': 5.106}, {'end': 419.277, 'text': "so all I'm going to do is copy this and I'm going to paste it right down below and I'm going to get rid of these things right here and all I'm going to do inside here is just say in the next middleware.", 'start': 404.521, 'duration': 14.756}, {'end': 422.401, 'text': 'so a really pointless piece of middleware.', 'start': 419.277, 'duration': 3.124}, {'end': 425.225, 'text': "but nonetheless i just want to demonstrate what's happening.", 'start': 422.401, 'duration': 2.824}], 'summary': 'Creating a new middleware to demonstrate functionality.', 'duration': 25.81, 'max_score': 399.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4399415.jpg'}, {'end': 472.518, 'src': 'embed', 'start': 447.058, 'weight': 1, 'content': [{'end': 451.859, 'text': 'so if we go to, for example, forward, slash about by clicking this link over here we get the page.', 'start': 447.058, 'duration': 4.801}, {'end': 456.48, 'text': 'everything works and in the console we can see a request was made.', 'start': 451.859, 'duration': 4.621}, {'end': 459.781, 'text': "all of this was logged and now we're in the next middleware.", 'start': 456.48, 'duration': 3.301}, {'end': 463.424, 'text': 'so it fired that one as well right here.', 'start': 459.781, 'duration': 3.643}, {'end': 464.806, 'text': 'now just a quick test.', 'start': 463.424, 'duration': 1.382}, {'end': 472.518, 'text': 'if we were to say place this after the home page right here this is the home page handler and save it.', 'start': 464.806, 'duration': 7.712}], 'summary': 'Middleware successfully handled request, with logged activity and page functioning properly.', 'duration': 25.46, 'max_score': 447.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4447058.jpg'}], 'start': 305.083, 'title': 'Express middleware', 'summary': 'Addresses the issue of the browser hanging due to express middleware, and demonstrates the creation, testing, and successful execution of middleware in a server, with a focus on logging requests and handling different routes.', 'chapters': [{'end': 399.415, 'start': 305.083, 'title': 'Express middleware issue resolved', 'summary': "Highlights the issue of the browser hanging due to express not automatically moving on to the next middleware, and explains the solution of explicitly using the 'next' function to resolve the issue and allow the browser to move on, leading to successful handling of the url requests.", 'duration': 94.332, 'highlights': ["Express doesn't automatically move on to the next middleware, causing the browser to hang.", "The 'next' function is used to explicitly tell Express to move on to the next middleware, resolving the browser hanging issue.", "Invoking the 'next' function inside the middleware indicates to Express that it has finished and can move on to the next task.", 'After resolving the issue, the browser successfully handles URL requests and logs the information to the console.']}, {'end': 490.478, 'start': 399.415, 'title': 'Middleware demonstration and testing', 'summary': 'Demonstrates the creation and testing of middleware in a server, with a focus on logging requests and handling different routes, showcasing successful execution and identifying potential issues.', 'duration': 91.063, 'highlights': ['The middleware is created to log requests and handle different routes, with successful demonstration of its functionality and potential issues identified.', "The process involves firing middleware upon receiving a request, logging the action to the console, and proceeding to the next middleware, showcasing successful execution of the server's functionality.", "A specific example of accessing the 'about' page and the home page is used to demonstrate the middleware's successful logging of requests and potential issues, providing a clear illustration of its functionality."]}], 'duration': 185.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4305083.jpg', 'highlights': ["The 'next' function resolves the browser hanging issue", 'Middleware logs requests and handles different routes', "Invoking 'next' inside middleware indicates task completion", 'Successful demonstration of middleware functionality']}, {'end': 671.574, 'segs': [{'end': 554.664, 'src': 'embed', 'start': 512.307, 'weight': 0, 'content': [{'end': 518.59, 'text': "for example, there's middleware called Morgan, which is a logger, and it does a similar thing to our custom middleware,", 'start': 512.307, 'duration': 6.283}, {'end': 522.511, 'text': "where we log stuff to the console, but it's better than this.", 'start': 518.59, 'duration': 3.921}, {'end': 526.134, 'text': "there's also one called helmet, which is a security piece of middleware.", 'start': 522.511, 'duration': 3.623}, {'end': 531.281, 'text': "there's middleware for using sessions, cookies, validation, loads of different things.", 'start': 526.534, 'duration': 4.747}, {'end': 538.491, 'text': "so all of these middleware functions are ready made for us, so we don't have to write all of our middleware from scratch every time.", 'start': 531.281, 'duration': 7.21}, {'end': 542.136, 'text': "if there's a middleware package that solves the issue, we can just use that.", 'start': 538.491, 'duration': 3.645}, {'end': 552.463, 'text': "so what i'm going to do is show you how to use a third-party middleware called morgan, which is a logger, and we can just install this using npm,", 'start': 542.777, 'duration': 9.686}, {'end': 554.664, 'text': 'then require it like this.', 'start': 552.463, 'duration': 2.201}], 'summary': 'Third-party middleware like morgan and helmet provide ready-made solutions for security and logging, reducing the need to create custom middleware from scratch.', 'duration': 42.357, 'max_score': 512.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4512307.jpg'}, {'end': 652.248, 'src': 'embed', 'start': 623.417, 'weight': 3, 'content': [{'end': 627.778, 'text': 'so, morgan, and then we want to pass through an option.', 'start': 623.417, 'duration': 4.361}, {'end': 634.761, 'text': "I'm going to use the dev option and again that just dictates how it's going to be formatted, what we log to the console.", 'start': 627.778, 'duration': 6.983}, {'end': 641.204, 'text': 'so if I save this now and run nodemon app, then hopefully this is all going to work.', 'start': 634.761, 'duration': 6.443}, {'end': 648.306, 'text': "I'm going to go to the website and refresh And we can see this logged to the console right here.", 'start': 641.204, 'duration': 7.102}, {'end': 652.248, 'text': "now if I go to the about page, We're gonna see this logged again.", 'start': 648.306, 'duration': 3.942}], 'summary': 'Using the dev option, the console logs are formatted and visible on the website after running nodemon app.', 'duration': 28.831, 'max_score': 623.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4623417.jpg'}], 'start': 490.478, 'title': 'Using third-party middleware with node and express', 'summary': 'Discusses the benefits of using ready-made middleware functions like morgan and helmet in node and express, and demonstrates how to install and use morgan for logging. it also explores configuring morgan to log requests and responses, and observing the logged output on the console.', 'chapters': [{'end': 597.392, 'start': 490.478, 'title': 'Using third-party middleware with node and express', 'summary': 'Discusses the benefits of using ready-made middleware functions in node and express, such as morgan for logging and helmet for security, to avoid writing custom middleware from scratch. it also demonstrates how to install and use the third-party middleware called morgan to log information to the console.', 'duration': 106.914, 'highlights': ['Node and Express provide various ready-made middleware functions like Morgan and helmet, which offer logging and security features, respectively, to avoid writing custom middleware from scratch.', 'Demonstrates the process of installing and requiring a third-party middleware called Morgan to log information to the console.']}, {'end': 671.574, 'start': 598.61, 'title': 'Using morgan middleware for logging', 'summary': 'Discusses integrating the morgan middleware for logging in an application, configuring it to log requests and responses, and observing the logged output on the console.', 'duration': 72.964, 'highlights': ["Integrating the Morgan middleware to log requests and responses, and configuring it with the 'dev' option to dictate formatting and console logging.", 'Observing the logged output on the console after refreshing the website and navigating to different pages.', 'Explaining the purpose of the middleware and its ability to produce varied output with different options.']}], 'duration': 181.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4490478.jpg', 'highlights': ['Node and Express provide ready-made middleware like Morgan and helmet for logging and security.', 'Demonstrates installing and requiring third-party middleware called Morgan for logging.', "Integrating Morgan middleware to log requests and responses, and configuring it with the 'dev' option.", 'Observing the logged output on the console after website refresh and page navigation.', "Morgan middleware's ability to produce varied output with different options."]}, {'end': 956.685, 'segs': [{'end': 805.968, 'src': 'embed', 'start': 779.312, 'weight': 4, 'content': [{'end': 786.535, 'text': "we can see that this styles.css returns a 404 error because it's not allowing us access to that file.", 'start': 779.312, 'duration': 7.223}, {'end': 796.001, 'text': "so the server protects all of our files automatically from users in a browser, so they can't just access any of our files whenever they want.", 'start': 787.595, 'duration': 8.406}, {'end': 805.968, 'text': 'to. to allow the browser access to something, we have to specify what files should be allowed to be accessed, in other words, what files should be public.', 'start': 796.001, 'duration': 9.967}], 'summary': "The styles.css file returns a 404 error due to restricted access, demonstrating the server's automatic protection of files from unauthorized browser access.", 'duration': 26.656, 'max_score': 779.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4779312.jpg'}, {'end': 878.195, 'src': 'heatmap', 'start': 848.563, 'weight': 1, 'content': [{'end': 852.926, 'text': 'and that means that if i create a folder over here called public,', 'start': 848.563, 'duration': 4.363}, {'end': 859.774, 'text': 'then anything inside that folder is going to be made available as a static file to the front end.', 'start': 854.187, 'duration': 5.587}, {'end': 866.343, 'text': 'so if I place styles.css inside there now and go back to the browser and refresh,', 'start': 859.774, 'duration': 6.569}, {'end': 874.231, 'text': "then you can see that those styles are loading because we're linking to that from the nav and now it's accessible.", 'start': 866.343, 'duration': 7.888}, {'end': 877.314, 'text': 'right, not the nav, sorry, from the head right here.', 'start': 874.231, 'duration': 3.083}, {'end': 878.195, 'text': "so it's important.", 'start': 877.314, 'duration': 0.881}], 'summary': "Creating a 'public' folder makes its contents available as static files to the front end, as demonstrated by loading 'styles.css' and linking to it from the header.", 'duration': 47.564, 'max_score': 848.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4848563.jpg'}, {'end': 956.685, 'src': 'embed', 'start': 944.836, 'weight': 0, 'content': [{'end': 949.938, 'text': 'all of that is going to be accessible at the root level on our website from the browser.', 'start': 944.836, 'duration': 5.102}, {'end': 956.685, 'text': "And it's all achieved by using the static middleware that comes along for the ride when we use Express.", 'start': 950.518, 'duration': 6.167}], 'summary': 'Static middleware in express enables access to content on website root level.', 'duration': 11.849, 'max_score': 944.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4944836.jpg'}], 'start': 671.574, 'title': 'Using express static middleware', 'summary': 'Discusses using third-party middleware with express and the need to specify which files should be publicly accessed. it also explains how to use the express static middleware to serve static files such as css and images, enhancing website performance.', 'chapters': [{'end': 805.968, 'start': 671.574, 'title': 'Express middleware and serving static files', 'summary': 'Discusses using third-party middleware with express, and the issue of accessing static files like css files, which currently returns a 404 error, along with the need to specify which files should be publicly accessed.', 'duration': 134.394, 'highlights': ['Accessing static files like CSS files currently returns a 404 error, preventing automatic access from the browser.', 'The need to specify which files should be allowed to be accessed in order to make them public.', 'The concept of using third-party middleware with Express to serve static files and the importance of doing so to provide access to these files.']}, {'end': 956.685, 'start': 805.968, 'title': 'Using express static middleware', 'summary': 'Explains how to use the express static middleware to serve static files such as css and images, making them accessible to the front end and enhancing website performance.', 'duration': 150.717, 'highlights': ['The static middleware in Express allows us to make static files such as CSS and images public to the front end, enhancing website performance.', "By using app.use express.static('public'), any files placed inside the 'public' folder become accessible as static files to the front end.", "Placing styles.css inside the 'public' folder and linking it from the head makes the styles accessible to the browser without explicitly specifying the folder name in the URL.", 'Moving styles from the head to an external file and linking it still maintains accessibility and enhances organization and performance.']}], 'duration': 285.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/_GJKAs7A0_4/pics/_GJKAs7A0_4671574.jpg', 'highlights': ['The static middleware in Express allows us to make static files public, enhancing website performance.', "By using app.use express.static('public'), files inside the 'public' folder become accessible as static files.", "Placing styles.css inside the 'public' folder and linking it makes the styles accessible to the browser.", 'Moving styles to an external file and linking it maintains accessibility and enhances organization and performance.', 'Accessing static files like CSS currently returns a 404 error, preventing automatic access from the browser.']}], 'highlights': ['Middleware is any code that runs on the server between getting a request and sending a response.', 'The order of middleware is very important to how it runs, affecting the code execution.', "The 'next' function resolves the browser hanging issue", 'Node and Express provide ready-made middleware like Morgan and helmet for logging and security.', 'The use method is used to run middleware code, and multiple pieces of middleware can run on the server.', 'Middleware logs requests and handles different routes', 'Creating a log up middleware function to log the details of every request coming into the server is mentioned as an example of using middleware.', 'Using middleware for authentication checks is another highlighted use case.', 'Middleware runs from top to bottom in the code until a response is sent, either explicitly or by exiting the process.', 'The static middleware in Express allows us to make static files public, enhancing website performance.', "Invoking 'next' inside middleware indicates task completion", 'Successful demonstration of middleware functionality', 'Demonstrates installing and requiring third-party middleware called Morgan for logging.', "Integrating Morgan middleware to log requests and responses, and configuring it with the 'dev' option.", 'Observing the logged output on the console after website refresh and page navigation.', "Morgan middleware's ability to produce varied output with different options.", "By using app.use express.static('public'), files inside the 'public' folder become accessible as static files.", "Placing styles.css inside the 'public' folder and linking it makes the styles accessible to the browser.", 'Moving styles to an external file and linking it maintains accessibility and enhances organization and performance.', 'Accessing static files like CSS currently returns a 404 error, preventing automatic access from the browser.', 'Middleware for handling 404 cases', 'Order of middleware execution', 'Creation of a custom middleware to log details for every request', 'Middleware is used in route handler functions and setting up 404 handlers with the use method.', 'The chapter also mentions using middleware to pass JSON data sent from post requests and to return a 404 page.']}