What is Middleware in Express JS? | Node.js Tutorials for Beginners

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
What is middleware in Express JS? You will learn the answer in this Node.js & Express tutorial for Beginners. Error handler and logger custom middleware, built-in middleware and third party middleware will all be applied in this lesson for beginners.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of an Node.js & Express for Beginners tutorial series playlist:
• Node.js Tutorials for ...
🔗 Starter Source Code: github.com/gitdagray/express_...
What is Middleware in Express JS? | Node.js Tutorials for Beginners
(00:00) Intro
(00:05) Welcome
(00:15) Intro and Setup
(00:33) What is middleware?
(01:37) Applying built-in middleware
(07:03) Creating custom middleware
(14:49) Adding third party middleware
(23:00) Creating a custom error handler
(30:43) app.use() vs app.all()
(32:03) Improving the custom 404 route handler
📚 References:
Node.js Official site: nodejs.org
NPM Official site: www.npmjs.com/
Express JS Official site: expressjs.com/
MDN CORS: developer.mozilla.org/en-US/d...
NPM CORS: www.npmjs.com/package/cors
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about middleware in Express JS helpful? If so, please share. Let me know your thoughts in the comments.
#express #middleware #beginners

[@DaveGrayTeachesCode]

This tutorial will help you learn all about middleware in Express JS. It applies built-in middleware, custom middleware that we will construct to log events and handle errors, and third party middleware. If you're just getting started with Node.js, you may want to start at the beginning of the Node.js for Beginners tutorials playlist found here: kzbin.info/aero/PL0Zuz27SZ-6PFkIxaJ6Xx_X46avTM1aYw

[@Alibeee87]

Thank you for all your help! I appreciate you mentioning keyboard commands as well, that's fantastic info for a beginner!

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@wgllgw]

Hi Dave, you must be a very good teacher/mentor. I would love to work under/learn from someone like you! You addressed a lot of pertinent questions, in a prudent sequence. Plus your explanations are clear and concise. It lends a lot of motivation to why things are they way they are (these are the hardest thing to Google!). Thank you so much for taking the time and effort to share your knowledge and wisdom!

[@viciousinsights6902]

This has been truly enlightening, this series has helped me tremendously with the aspects of node & expressjs I had been struggling with. I look forward to learning more from you in the future!

[@DaveGrayTeachesCode]

Glad it helped! 🚀

[@ampinkus]

Hi Dave, I just finished this module of the course and o far it is really excellent! I would only recommend that each module should start with an introductory slide explaining what will be developed in the module and perhaps a graph with the interaction of the different functions that will be implemented.

[@pets_talk]

great tutorial! Coming from the frontend world, it really helps me to undestand how the backend works!

[@DaveGrayTeachesCode]

Happy to help! Thanks Natalia! 🙏💯

[@juangomez874]

Dave, you are my new hero. Thanks a lot for these videos, they had helped me a lot. Very very clear. Keep up the good job.

[@DaveGrayTeachesCode]

Thank you for the kind words, Juan! 🙏

[@MrQVeeBoo]

Very nice explanation. Step by step. Easy to follow. Thx

[@ofofononoumoren]

Absolutely great video. Just for improvement purpose, it's best to import logger as a single value (const logger = require('./destination')) rather than as an object with named properties since that not how it was exported in the logEvents file. Even if, it doesn't matter anyways. Thanks for this very elaborate module, Dave.

[@cyberpaimpol]

Super tutorial, progression is smooth and so interesting, thx !

[@DaveGrayTeachesCode]

Happy to hear that!

[@saquibansari7866]

6:02 Check this time stamp And can you please elaborate that the path of css file you have assigned is different as we used to assign without middlware. I found it after searching alot that the path of middlware and the path of opening html file in a browser will be different. I still don't know why it is so. So kindly clear this out.. please please please please❤❤❤❤❤

[@NaviaryMusic]

Thanks Dave!! My websites coming along nicely!

[@DaveGrayTeachesCode]

Fantastic!

[@soudaminipanda]

Very nice tutorial. Very easy to understand

[@loikvokhidov7688]

algorithm should recommend these videos to all the people who want to learn NodeJS.

[@DaveGrayTeachesCode]

Thank you!

[@ahmad-murery]

Well explained Dave, Middleware can be very handy to allow only authentic users to access certain pages, I recently started using the Rest Client extension for VS Code instead of Postman, I found it easier to work with as I don't have to leave VS Code to test my API, it also let me have all my requests in a plain text file that can be included side by side with the app files. Thanks Dave 🚀

[@DaveGrayTeachesCode]

Thank you Ahmad. 🙏 Yes, there are many good applications of middleware including authentication. Is the VS Code extension you are using called Thunder Client? I have heard good things!

[@DaveGrayTeachesCode]

@@ahmad-murery thank you my friend! I will check them both out and compare. Have a great weekend!

[@ahmad-murery]

@@DaveGrayTeachesCode Have a great day you too my friend, if possible, make a video about the comparison and maybe put it under the web dev tools playlist, regards

[@DaveGrayTeachesCode]

@@ahmad-murery thank you - great idea, Ahmad!

[@baxtables]

when a new Error("Not allowed by CORS") is created, does the app.use(errorHandler) receive it automatically, because it has a first arguement as err?

[@keithbacalso9433]

Even I did not removed the `.css` I can still access it in the browser.... ? why?

[@DrCash7]

Ona managed vps and keep running into cors error when my front end loads and talks to the backend. I've added the cors settings after the installed apps and still running into cors errors. Need halp

[@unique3345]

A very useful tutorial!!!!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@Pareshbpatel]

A comprehensive tutorial on Middleware in Express, beautifully presented. Thanks, Dave {2023-10-05}: implemented

[@Uniqlo921]

Hey dave, at @34:51, I accidentally forgot the "else" in the if else block for req.accepts('json'). So it was if(req.accepts('html') followed by if(req.accepts('json'). When I tested with my browser, I got the JSON response. So it seems that my request accepted both html and json. However, I noticed that you said we needed postman to test the json functionality, which I agreed with until I hit my issue. Do you know why the above happened. I also wanted to thank you for making such a fantastic and comprehensive tutorial on Node. I am currently using this to get out of my automated testing pigeonhole :)

[@piotrekjazz1287]

Apart from the great content, thanks a lot also for the source code, that slowly becomes a youtube standard, at least at most of the popular channels.

[@DaveGrayTeachesCode]

You're welcome. 🙏 Early on in this series, I don't think I provided it. I often think typing out the code helps students learn. As we started to put together a REST API project I thought the source code would be good to build upon as the series progressed.

[@piotrekjazz1287]

@@DaveGrayTeachesCode Good point, but most of the time you want to check/test just a small bits and then it is problematic writing everything.

[@moiraleon8744]

Quick question, what extension do you have that allows your file names in your Explorer tab to have different icons and colors?

[@DaveGrayTeachesCode]

That is vscode-icons. I recommend 5 extensions here: kzbin.info/www/bejne/roLGoYScetqgh9k

[@tabliqatchi6696]

This is gem people!

[@sonamohialdin3376]

Amazing tutorial thank you

[@DaveGrayTeachesCode]

You're welcome, Sona! 💯

[@denmccormik7654]

Thank you for the lesson. Do you know why browser doesn't allow to fetch from console from it's starting window (when url is empty, when we just opened the browser without starter page)? I thought that origin just will be undefined but everything would work.

[@DaveGrayTeachesCode]

The browser always implements cors. Ref: developer.mozilla.org/en-US/docs/Web/HTTP/CORS

[@ramziosta]

I got an error optionsSuccessStatus undefined , so I declared let optionsSuccessStatus; outside corsOptions, and that removed the error and got everything to work fine. is that an allowed hack?

[@DaveGrayTeachesCode]

I would not do that. I suggest downloading my source code and comparing to yours to find the difference and what caused your error.

[@MohammadBarghamadii]

Thank you so much

[@DaveGrayTeachesCode]

You're welcome, Mohammad!

[@brandonjoaocastillo7490]

Why you dont use next() in the errorHandler function? you did it in logger, its because is the last middleware or something like that?

[@DaveGrayTeachesCode]

You are correct - if my memory is right, it is last.

[@bnmbnm7278]

24:56 Excuse me, can you explain why the code(line 80-83) work? How does it work? I cannot understand...Thank you...

[@DaveGrayTeachesCode]

app.use() indicates we are going to use middleware. We're passing in an anonymous function as the middleware. The function is sending an http status code of 500 along with the error message in the response to the client.

[@sdfsdfsdffdsfsdfsd123]

thank you.

[@DaveGrayTeachesCode]

Welcome!

[@DeepakGupta-hj2dv]

Can you please make a video node JS microservices crash course

[@DaveGrayTeachesCode]

Thank you for the good suggestion! 🙏

[@kkomax7]

This tut hasn't been liked enough. I usually don't comment to thank, but thanks Dave

[@alirezahekmati7632]

🚀

[@vigneshb5717]

so far ok completed the second video

[@NoorNoor-bl2jr]

There is no logs file in your git repository.

[@DaveGrayTeachesCode]

Yes, you should create your own logs.

[@AuxiliaryOfficial]

im looking for your typescript tutorial

[@DaveGrayTeachesCode]

It is coming soon! 🚀

[@AuxiliaryOfficial]

@@DaveGrayTeachesCode really thanks, typescript + react 😍

[@shineLouisShine]

Thank you very much for this lesson. With all due respect. and I do sincerely and deeply have A LOT of respect for everything you are doing here: For me, the last part where you immediately say to "Like" the video is a bit too aggressive, Without a single second of silence to breathe, to process, and to execute the "Like" on our own - Without you asking us to do so, but just because of a natural sense of gratitude. I feel less sympathy for this kind of... "strategy"(?), because... Whoever likes the video - will give them a "Like", And whoever likes to subscribe - will certainly subscribe. Furthermore, think of people who already subscribed to your channel, And yet don't have any other choice but to listen to this request in the end of each and every video, Regardless of the fact that they already did it. My suggestion (/request) : Give your viewers a little bit more credit 😌 (in addition, there is actually a graphic invitation to subscribe during the videos already...)

[@Jazz__Dev]

is channel is not the only one you know... As a matter of fact, I love listening to that part... just watch the tutorial and move on... All these are absolutely unnecessary..

[@Jazz__Dev]

fetch('localhost:3500') Promise {} VM1113:1 GET localhost:3500/ net::ERR_FAILED (anonymous) @ VM1113:1 VM1113:1 Uncaught (in promise) TypeError: Failed to fetch at :1:1 HI Dave, not sure if i'm the only one getting this particular error and i'm not even sure where to fix it... Why is the console fetch throwing that error please?

[@DaveGrayTeachesCode]

The fetch is failing, but it is difficult to say why from here. After it fails, you get a type error. Go back over it and check your source code compared to mine. One little thing can make a difference.

[@AdityaDey424]

Hey have you solve the issue? I also get this problem. If you solve this then please told me the solution.

[@kaustavbhattacherjee7952]

I'm getting the same error as well even when I use the exact same snippet

[@shreyalanka]

Same here😢

[@aseemgandhi2867]

Same but i am also not getting data in log file when i used fetch('localhost:3500') in google.com