In this tutorial, we will learn how to build a web server with Node.js without using a framework like Express JS. Using only Node.js will help introduce some foundational knowledge about Node that will continue to help us as we work with Node.js and Express JS in the future. If you are just starting out with Node.js, I suggest starting at the beginning of the Node.js for Beginners playlist here: ruclips.net/p/PL0Zuz27SZ-6PFkIxaJ6Xx_X46avTM1aYw
Thanks James! After this tutorial, the series adds in Express and eventually MongoDB to round out the MERN stack backend REST API construction. I appreciate your note! 💯
I like to know how stuffs work and maybe this is why I like building things from scratch, I might use Map instead of the extension switch but I know this is just an intro to node server so refactoring is not beneficial, Great work as always my friend 🚀👍
A great observation Ahmad! I also like building from scratch - such a great way to learn. Thanks for the note. We will be moving on to Express JS next!
Not sure if anybody else had the same trouble as me; currently looking for an answer. Images won't render to the page. I've checked the switch statement for extension types using (for example with png images): switch(extension){ case '.png': contentType = 'image/png' break; } but I logged extention (from inside the switch statement); which confirmed that the extension is png, and contentType from the serveFile function; but instead of contentType being given as 'image/png', it is being given as 'text/html' as if the variable isn't working properly. It works for .txt, .html, and .json extensions, but it looks like CSS and image extensions return contentType as 'text/html'. I even tried using 'PNG File' as the file type (as that's how they are named in Windows); but contentType won't change from 'text/html'. EDIT: came back to say problem solved. For some reason the file types were being missed so I created an if condition of 'if(extention && contentType !== 'text/html'){ filePath = path.join(__dirname, req.url). That worked for the CSS, but the images were not showing and, as per the condition for when files don't exist, the text/html was being used as contentType. I also noticed for my image named 'rubber duck.png', the req.url was being logged as 'rubber%20duck.png' and I wondered if that was the reason it was not recognized and maybe the path (or http) module putting '%20' in place of a space between image name words was causing the issue. I replaced the space with a hyphen and 'voila', the images showed.
Hi Mr.Dave, I have a question concerning the parse and the stringify part of this lecture. Would it have been better if we serve the json data without parse in it and stringify it again as long the readFile() for .json extension do that already and the receiver could parse and consume the data correctly? by the way i can't thank you enough for all what you've done seen much content but you've a unique philosophy ( Tought you the right way of doing it ). Am sure your hard work will be remembered forever ☺.
The source code link seems to have the completed code for this lesson. Wouldn't it be better to have the starter code for those who want to follow along?
If there are lines that are confusing, I suggest console logging values to see what each one is doing. Doesn't hurt to play around with it for understanding. 💯
It just needs a host that supports Node.js. For example, Heroku has their own CLI which would let you deploy from the terminal. You could also set up continuous deployment from GitHub to Heroku or another host if the host supports it.
@@DaveGrayTeachesCode No need of node support bro. If you can share me your email, I can send u the code and take a look and probably make a video of it.
I must be confused. I thought you were asking about this Node.js tutorial project as shown in the video. The host service definitely needs to have support for Node.js to host this project.
I always recommend freeCodeCamp.org to my students. It offers many exercises to help you practice. There are both Javascript and Node JS sections there.
It's so good tutorial for me, but I have a question, for example in browser when i write localhost:3500/subdir -> it doesn't work but localhost:3500/subdir/works I found some solutions, but they don't work, how I can solve it? Is anyone knows?
At 27:36, we have not configured the server to handle sending a JSON response yet so it is defaulting to the text response that is configured. It looks like JSON, but it is a text response. By the time we reach 30:26, we have configured our server to send a response type of application/json.
if you try in Firefox it would be more obvious, the Browser knows when the data is plain text or json, you should try in Firefox, it makes things more clear
Thank you very much. 37:20 - Why in my code, despite writing exactly the same as you did (`${err.name}: ${err.massage}) And despite of deleting the exact same letter as you did for the purpose of occuring this error, Yet, the error in the my errLog.txt file appears as: " TypeError: undefined. " Instead of displaying the error's name and message..?
There must be a difference even though you suggest it is exactly like mine. For example, in your comment you said: err.massage ...but it should be err.message
@@DaveGrayTeachesCode You are sharp :)) Thank you! An automatic typing error could be a major assistance. Sometimes I'm surprised of how advanced those softwares are, While being kind of primitive regarding typing errors handling.
00:17:40 no need for the last line (if (!extension && req.url.slice(-1) !== '/') filePath += '.html';) you just needed to add one more level of craziness to the ternary contentType === 'text/html' ? extension === html ? path.join(__dirname, 'views', req.url) : path.join(__dirname, 'views', req.url)+".html" : path.join(__dirname, req.url); 😂
In this tutorial, we will learn how to build a web server with Node.js without using a framework like Express JS. Using only Node.js will help introduce some foundational knowledge about Node that will continue to help us as we work with Node.js and Express JS in the future. If you are just starting out with Node.js, I suggest starting at the beginning of the Node.js for Beginners playlist here: ruclips.net/p/PL0Zuz27SZ-6PFkIxaJ6Xx_X46avTM1aYw
I don't know why I got to know about this channel a few days ago. You are a gem & all playlists are well structured. Thanks a lot sir 🙏
Welcome aboard!
Dave this is an excellent series!! Watched each video as it comes out! Please keep producing these excellent videos they are so beneficial!!!
Thanks James! After this tutorial, the series adds in Express and eventually MongoDB to round out the MERN stack backend REST API construction. I appreciate your note! 💯
This is it. I want this level of clarity even if it is among the most basic ones. HatsOff bro. keep going
Glad to hear that!
@@DaveGrayTeachesCode Can u tell me like how can we optimize a server like we can using bundling in a client that can remove all reusable files.
Excelent tutorial Dave!!! Thanks a lot for sharing!!!
Thanks Mr. Dave,
I have learnt a lot from you and recommended your videos to my colleagues.
Thank you, Fares! 🙏💯
I've made a wise decision to spend time on this RUclips channel. Thank you Dave.
You're welcome!
Love all of these videos. Thank you so much!
You're welcome, Moira! 🙏
Dave. You're amazing!! love your videos!!
Thank you for the kind words! 🙏💯
I watched this video several times and I just want to keep press like 1000 time and it's not enough for your efforts
This is best example of node server I did watched!
Thank you!
I like to know how stuffs work and maybe this is why I like building things from scratch,
I might use Map instead of the extension switch but I know this is just an intro to node server so refactoring is not beneficial,
Great work as always my friend 🚀👍
A great observation Ahmad! I also like building from scratch - such a great way to learn. Thanks for the note. We will be moving on to Express JS next!
learned so many things from this video 👍👍 thank you for this amazing series.
Happy to hear that!
Superb content as always!
Much appreciated! 🚀🙏
Dave is an excellent teacher☺️☺️👍
Thank you!
You're Awesome, Thank you so much
This is pure gold😊
Wow!! speachless, This is really good. THANK YOU !
You're welcome! 💯
Not sure if anybody else had the same trouble as me; currently looking for an answer. Images won't render to the page. I've checked the switch statement for extension types using (for example with png images):
switch(extension){
case '.png':
contentType = 'image/png'
break;
}
but I logged extention (from inside the switch statement); which confirmed that the extension is png, and contentType from the serveFile function; but instead of contentType being given as 'image/png', it is being given as 'text/html' as if the variable isn't working properly. It works for .txt, .html, and .json extensions, but it looks like CSS and image extensions return contentType as 'text/html'. I even tried using 'PNG File' as the file type (as that's how they are named in Windows); but contentType won't change from 'text/html'.
EDIT: came back to say problem solved. For some reason the file types were being missed so I created an if condition of 'if(extention && contentType !== 'text/html'){ filePath = path.join(__dirname, req.url). That worked for the CSS, but the images were not showing and, as per the condition for when files don't exist, the text/html was being used as contentType. I also noticed for my image named 'rubber duck.png', the req.url was being logged as 'rubber%20duck.png' and I wondered if that was the reason it was not recognized and maybe the path (or http) module putting '%20' in place of a space between image name words was causing the issue. I replaced the space with a hyphen and 'voila', the images showed.
Hi Mr.Dave,
I have a question concerning the parse and the stringify part of this lecture. Would it have been better if we serve the json data without parse in it and stringify it again as long the readFile() for .json extension do that already and the receiver could parse and consume the data correctly?
by the way i can't thank you enough for all what you've done seen much content but you've a unique philosophy ( Tought you the right way of doing it ). Am sure your hard work will be remembered forever ☺.
This is a perfect Tutorial , Thanks man. And I have a question I hope I don't make you feel bad just asking How old are you ?
why do you love indentation so much, I have even picked up the habit from you
Thank you, Dave
Such a great tutorial!
Thanks so much!
Hey man, love your videos as a suggestion can you make a video or explain what is Cumulative Layout Shift (CLS) ?
Thank you and thanks for the suggestion! 🙏💯
The source code link seems to have the completed code for this lesson. Wouldn't it be better to have the starter code for those who want to follow along?
Thanks! It helps a lot!!
Glad to hear that!
Just Amazing!!
Amazing tutorial
Thank you! Cheers! 💯
Great video 😍
Thank you!
Great work keep going forward… can I use this in the restful api
Yes, keep going in the series and we add Express to build a RESTful API.
Hi Dave can u mention which vs code theme and icons u use?
Second!
Great one bro!
absolutely informative lesson but there is some lines of code did not understand ... keep going
If there are lines that are confusing, I suggest console logging values to see what each one is doing. Doesn't hurt to play around with it for understanding. 💯
@@DaveGrayTeachesCode
I already trying to do console log .. thanks 🙏
Can you deploy this on shared hosting (Not VPS, not cloud) via terminal?
It just needs a host that supports Node.js. For example, Heroku has their own CLI which would let you deploy from the terminal. You could also set up continuous deployment from GitHub to Heroku or another host if the host supports it.
@@DaveGrayTeachesCode No need of node support bro. If you can share me your email, I can send u the code and take a look and probably make a video of it.
I must be confused. I thought you were asking about this Node.js tutorial project as shown in the video. The host service definitely needs to have support for Node.js to host this project.
Where can i practise this kind properties Dave?
I always recommend freeCodeCamp.org to my students. It offers many exercises to help you practice. There are both Javascript and Node JS sections there.
@@DaveGrayTeachesCode Thank youu so much Mr Dave !;
13:27 chain ternary hell
I know I differ from some, but I like chained ternaries much better than large if statements. Feel free to use your preference. 😃
which extension do you have for icons?
vscode-icons ...it has been my favorite. 💯
@@DaveGrayTeachesCode thanks
It's so good tutorial for me, but I have a question, for example in browser when i write localhost:3500/subdir -> it doesn't work but localhost:3500/subdir/works I found some solutions, but they don't work, how I can solve it? Is anyone knows?
thank you
Welcome!
very nice this video
Thank you!
1:39 why we extends EventEmitter and not use it independently
Thank you for this wonderful video
Glad you enjoyed it!
Awesome
🚀
How to show the length of the block of code inside curly braces? like on 10:33
VS Code settings: Bracket Pair Colorization: Enabled
Can I use this in 2024?
Yes
❤
why on 27:36, it is just text, not JSON? what's difference between 27:36 and 30:26?
At 27:36, we have not configured the server to handle sending a JSON response yet so it is defaulting to the text response that is configured. It looks like JSON, but it is a text response. By the time we reach 30:26, we have configured our server to send a response type of application/json.
if you try in Firefox it would be more obvious, the Browser knows when the data is plain text or json, you should try in Firefox, it makes things more clear
first.
I am noob this is hard for me
Don't give up, but as a noob, have you learned Javascript first? You should learn Javascript before starting Node.js.
Thank you very much.
37:20 -
Why in my code, despite writing exactly the same as you did
(`${err.name}: ${err.massage})
And despite of deleting the exact same letter as you did for the purpose of occuring this error,
Yet, the error in the my errLog.txt file appears as: " TypeError: undefined. "
Instead of displaying the error's name and message..?
There must be a difference even though you suggest it is exactly like mine. For example, in your comment you said: err.massage ...but it should be err.message
@@DaveGrayTeachesCode You are sharp :)) Thank you!
An automatic typing error could be a major assistance.
Sometimes I'm surprised of how advanced those softwares are,
While being kind of primitive regarding typing errors handling.
00:17:40 no need for the last line (if (!extension && req.url.slice(-1) !== '/') filePath += '.html';)
you just needed to add one more level of craziness to the ternary
contentType === 'text/html'
? extension === html ? path.join(__dirname, 'views', req.url) : path.join(__dirname, 'views', req.url)+".html"
: path.join(__dirname, req.url);
😂