Your First Node.js Web Server

Поделиться
HTML-код
  • Опубликовано: 22 авг 2024
  • In this video I am going to walk you through all the steps necessary to create your very first Node.js web server. We will start at the very beginning with installing Node.js, and end with a fully functioning basic web server that serves HTML documents.
    Download Node.js:
    nodejs.org/en/
    More Node.js Tutorials:
    • Your First Node.js Web...
    Twitter:
    / devsimplified
    GitHub:
    github.com/Web...
    CodePen:
    codepen.io/Web...
    #Nodejs #WebDevelopment #WebServer

Комментарии • 438

  • @WebDevSimplified
    @WebDevSimplified  5 лет назад +52

    Here is the link to the Node.js download site. nodejs.org/en/

    • @andrewbailey8378
      @andrewbailey8378 5 лет назад +1

      how do you get the node terminal? i cant seem to get it

    • @vladimirmikulic7860
      @vladimirmikulic7860 5 лет назад +2

      @@andrewbailey8378 Dear, it's not "node terminal". He is on Windows and he uses a bash shell that is provided by git terminal. That "node terminal" doesn't show that it is "node terminal", it shows the process that is currently running in the terminal. In our case, it is node, because we started a node server, but it can be any other process.

    • @Jokamutta
      @Jokamutta 4 года назад

      @@vladimirmikulic7860 Some problem! I just installed Node.js and I have GIT bash terminal in Visual Code, but when I run the node app.js command it gives and error bash: node: command not found

    • @vladimirmikulic7860
      @vladimirmikulic7860 4 года назад

      @@Jokamutta are you on Windows?

    • @Jokamutta
      @Jokamutta 4 года назад

      @@vladimirmikulic7860 Yea I am

  • @reinanatasha888
    @reinanatasha888 3 года назад +129

    I was adamant to find a simple explanation after browsing 30+ complex tutorials for 4 days. Thank you so much for this!

  • @timderks5960
    @timderks5960 3 года назад +54

    Kyle, I wish you made tutorials for everything in life. Always long enough to learn something, short enough for my potato-like attention span to handle, and clear enough for anyone to understand. Great stuff!

  • @connordavis4766
    @connordavis4766 2 года назад +17

    If you're ALSO just getting started with VS code like me and you're troubleshooting:
    1. Make sure the terminal type is set to git bash
    2. Do not forget to SAVE before running stuff

    • @cowboybob7093
      @cowboybob7093 2 года назад +1

      Another major thing is at 0:25 - Learn on a rock-solid version
      Students can waste time and get discouraged because they don't know the difference between their bugs and a buggy compiler/interpreter.
      I had an early Microsoft Pascal IDE that was fun to use but I wasted half my time on a few unsolvable bugs instead of a bunch of finished code. I can't even say "but in the long run I'm a better..." because what I learned was IDE specific, not general debugging.

  • @nsharma4981
    @nsharma4981 4 года назад +41

    This was the perfect introduction to Node, you explain soo well! I just watched and understood what was happening in my first viewing, and then coded along the 2nd time. It went incredibly smoothly. Thanks a lot, Kyle. Love learning from you 😊

  • @STUPIDYOUTUBE_HIDINGMSGS
    @STUPIDYOUTUBE_HIDINGMSGS 3 года назад +9

    Have scoured YT for a simple explanation on why I should use Node and how it serves as another web server, and you did it in 9 minutes compared to many videos explaining details we don't need initially to understand why use Node! Man! You really are a great teacher, you have that talent to explain complicated things in a very simple way!

    • @trentirvin2008
      @trentirvin2008 7 месяцев назад

      Most RUclips resources for coding are horrible about getting to the point. You get waterboarded with irrelevant esoteric information and get a convoluted explanation trying to demonstrate why something works in an abstract way, as opposed to showing you what the outputs of the code are and explaining it backwards from there. Its like they forget these lessons are for people coming in new to a concept

  • @Rodbove4Jam
    @Rodbove4Jam 4 года назад +39

    Just found your channel, I'm a python programmer and wanting to understand more about Node.js and JS in general, your content is really good! Keep it up!

    • @bhaskardhanavath6650
      @bhaskardhanavath6650 3 года назад

      how to get the port number

    • @Rodbove4Jam
      @Rodbove4Jam 3 года назад +1

      @@bhaskardhanavath6650 You define the port number when using the server.listen() method, like server.listen(3000, callback). As he did on the video, you can also assign the port to a variable, say "port", and use it on the .listen() method instead.

    • @bhaskardhanavath6650
      @bhaskardhanavath6650 3 года назад

      How to get that port number like 3000 is it system port number

    • @agamjotsingh7371
      @agamjotsingh7371 3 года назад +2

      @@bhaskardhanavath6650 You can give any port number you want. example: 9090 , 4000, 2890 etc...

    • @expensivecats
      @expensivecats Год назад

      Haha try python flask

  • @w00borg34
    @w00borg34 4 года назад +6

    thanks for being straightfoward. so many tutorials are unnecessarily long and complex.

  • @johnbaxter7582
    @johnbaxter7582 2 года назад +2

    Hardly ever found a better startup tutorial on nodejs. Absolutely perfect.

  • @prasannanaik1023
    @prasannanaik1023 3 года назад +3

    My favourite channel...❤️
    He teaches straight forward and no bullshit talks and very clean code...
    Brad traversy would be my 2nd fvt channel

  • @DemsRNutless
    @DemsRNutless 5 месяцев назад

    The best “hello node” type of Node.js I’ve seen yet.

  • @debdeepdas3092
    @debdeepdas3092 2 года назад +1

    This was the best http module tutorial. Everywhere else I just found them explaining the functions but didn't connect them with the actual web server. This was awesome! Just what I wanted! Thanks a lot!

  • @thientran-rd3qk
    @thientran-rd3qk Год назад +1

    thank you... much better than the 4-hour lecture by my teacher in the bootcamp...

  • @SandeepSharmaSandynith
    @SandeepSharmaSandynith Месяц назад

    Your tutorials are simply great, to the point and easy to understand. Thank you !! I am hooked into watching more and more !!

  • @funtime1384
    @funtime1384 4 года назад +128

    this is amazing thx so much you just help a 12 years old boy that his dream is to be a programer

    • @warrennova2575
      @warrennova2575 4 года назад +7

      I'm younger and am already a programmer. (Please take no offense.)

    • @neksodebe
      @neksodebe 4 года назад +6

      @@warrennova2575 me too (same. please don't insult me)

    • @eirikskurdal2287
      @eirikskurdal2287 4 года назад +36

      @@warrennova2575 knowing some code doesn't make you a programmer. He's talking about programming as a career, and if he's starting at 12 he's already ahead of most of his future peers.

    • @sandevabeykoon2398
      @sandevabeykoon2398 4 года назад +30

      I was just born and I am a programmer

    • @peachok3564
      @peachok3564 4 года назад +20

      @@sandevabeykoon2398 pfff, I am a spermatozoon and i am already a Senior Software Engineer at the Google

  • @jrr_ddp
    @jrr_ddp 3 года назад +1

    I really enjoyed all your Tutorials about web development. Because i have a background of Dot Net. When am new to wed development i started directly developed my portfolio website with minimum knowledge later realized i have not learn properly, that time i started to watch your videos that are east to understand .Now i started your full-stack development course. Am eager to follow the course. Thank you

  • @CardamonKiss
    @CardamonKiss Год назад +2

    Thank you so much! VERY good tutorial and no unnecessary talking, but straight to the point! Really appreciate that and it helped me big time :)

  • @jorgepizzati1982
    @jorgepizzati1982 4 года назад +7

    This was a great start for me Kyle, very good content!

  • @mardehelbig2764
    @mardehelbig2764 21 день назад

    Brilliant tutorial! Explained really well, and in a simple way!

  • @AlexisBradley
    @AlexisBradley 2 года назад +1

    THAT was incredibly simple BECAUSE you are an INCREDIBLE teacher, thank you!

  • @smithscarborough
    @smithscarborough 3 года назад +6

    So helpful and concise! Thank you so much for sharing!! You really are a gifted teacher.

  • @eilayyosfan4417
    @eilayyosfan4417 2 месяца назад

    Thank you for this man, you help me a lot with this video, clean and easy to do.

  • @RAP5428
    @RAP5428 3 года назад +2

    I have been subbed since I discovered this channel
    ♥♥ Love your vids

  • @TheTricolourSaga
    @TheTricolourSaga 2 года назад +1

    You owned my respect, you got a subscriber! I wish you made tutorials for everything.

  • @sanilkp6180
    @sanilkp6180 2 года назад +1

    Thank you very much for sharing these tutorials. Appreciate all your efforts. It's been very helpful for me! Thank you again!

  • @pappucdl
    @pappucdl 4 года назад +2

    Your video was concise and right on point. Helped me understand better.

  • @MichaelOfRohan
    @MichaelOfRohan 6 дней назад

    For those saying it doesnt open their website, having them in the solution directory is not enough. You have to parse the request to handle the content type based on the extension. Remember, a bare server request with no file should always default to the home page.

  • @olivemoon2545
    @olivemoon2545 Год назад

    This dude is actually so good at his job lmao.

  • @TheGamer2024Short
    @TheGamer2024Short 6 месяцев назад

    I love you!
    I searched 16 days in the internet to know to how i can render code from a file!
    Sorry for my bad english

  • @adiii41
    @adiii41 Год назад

    I love your content and comitment beeing a youtube webDev mentor. I'm on a way to become a junior fullStack and I find your videos very, very usefull. BTW im sth about B1-B2 eng speaker and I fully understand you. Cheers to your success and a bright future! :)

  • @Joe2gangster4U
    @Joe2gangster4U 2 года назад +1

    LOL at the browser history at 5:05

  • @chetnabansal370
    @chetnabansal370 Год назад

    Thanks bro my interest in coding has returned.❤

  • @RandomInternetIdot
    @RandomInternetIdot 3 года назад +9

    How to auto restart server:
    1. In the terminal, run “npm I -save-dev nodemon”
    2. In the package.json file, in the “scripts”: create a new key called “devStart” with a value of “nodemon server.js”
    3. Create a server.js file
    4. In the terminal, run “npm run devStart”
    Now every time you save server.js the server will restart

    • @littleprincess250
      @littleprincess250 2 года назад

      4:56 how to run js code in browser

    • @Delicioso_Melon
      @Delicioso_Melon 2 года назад

      Or you came just Run "npm install -g nodemon"

    • @ryuketsueki
      @ryuketsueki 2 года назад

      @@littleprincess250 open the browser and enter localhost: and the port number that you assigned it in the code
      for example, if i set const port = 8080
      i will write localhost:8080 in the browser and code will run in browser

  • @alexsports7554
    @alexsports7554 2 года назад

    Thank you so much. I've been looking at a lot of videos but this one really helped!

  • @vortbio
    @vortbio 4 года назад +16

    I had a problem with using 'node app.js' in the terminal as the command was not recognized. I reinstalled node js and it worked. Just in case anyone else is having this problem.

    • @chimexboy96leo12
      @chimexboy96leo12 3 года назад +1

      I have the same problem but it refused to work even after reinstalling node js

    • @ubaidmansuri1725
      @ubaidmansuri1725 3 года назад

      @@chimexboy96leo12 try installing the node.js in root directory with the help of command tools or try going to the folder you installed node.js in terminal and then try node cammand. Hope this helps :)

    • @cena4767
      @cena4767 3 года назад

      Install node.js in Drive C

  • @sharathkumarhk4260
    @sharathkumarhk4260 2 года назад +1

    This is really an awesome lecture!

  • @AllenAndersonTaylor
    @AllenAndersonTaylor 3 года назад +1

    you rock dude. this helped me with an intranet (offline) system i'm developing for work.

  • @kevinhukom2394
    @kevinhukom2394 3 года назад +1

    awesome! clear and concise vid. Just what I need. Thanks

  • @Hardik.Kalasua
    @Hardik.Kalasua Год назад

    This was made beautifully simple. Perfectly done. Thank you. 🙏

  • @CiciliaT
    @CiciliaT 3 года назад +1

    Really easy and simple not to much nonsense for beginners ears...thanks a bunch!

  • @bieddruhuggyfalsaperla5447
    @bieddruhuggyfalsaperla5447 2 года назад +3

    How did you open the browser from vscode to display your output? Is the a special button in vscode, or did you just open a browser and type in localhost3000 instead of a website to get the vscode output to display in the browser?

  • @Dima-uz8gi
    @Dima-uz8gi 2 года назад +1

    Awesome! Thank you! :)

  • @borislavborisov8426
    @borislavborisov8426 4 года назад +2

    ur the best ever.Keep on making good content.Seriously this helped a lot!

  • @akhildhiman8791
    @akhildhiman8791 4 года назад +1

    Dude you are awesome!! it was easy to understand thank you man!!✌

  • @techdemo6626
    @techdemo6626 Месяц назад

    Excellent video it all made sense !!!

  • @jenglish1986
    @jenglish1986 3 года назад

    Super vid, real quick clear presentation, good job

  • @SurfingTheMentawais
    @SurfingTheMentawais 2 года назад

    Great video as always Kyle!

  • @dudeimadolphin4318
    @dudeimadolphin4318 5 лет назад +2

    congrats on 2k kyle

  • @gkarapeev
    @gkarapeev 4 года назад

    Fuckin A. Lean and minimal - perfect for a beginner - no distracting BS!

  • @user-dx8ec2dh7k
    @user-dx8ec2dh7k Год назад

    Thanks! Done setup my first NodeJS server!!!

  • @cristenevillar6887
    @cristenevillar6887 2 года назад

    Thank you for this easy to learn tutorial

  • @notahacker322
    @notahacker322 Год назад +2

    I want to add css but how

  • @k_adms5406
    @k_adms5406 2 года назад

    Cool tutorial man. The node app.js didn't show in the Terminal at first, had to install npm then everything worked!

  • @mumk
    @mumk 6 месяцев назад

    This is what we call Node.js, not some other install the package bs

  • @lordofdawn6871
    @lordofdawn6871 2 года назад

    Wow you are a pro kyle and you explained very well! Thanks and it works
    💗💗💗❤❤❤❤

  • @chadzulu4328
    @chadzulu4328 2 года назад

    Perfect explanation, thanks so much!

  • @tomislavzivkovic3978
    @tomislavzivkovic3978 Год назад +2

    Funny. All the tutorials are the same. I need minimal example how to send JSON request from browser and respond to browser from node js. Response from node js should not be immidiate but after node js finishes some work and prepare response. Anybody???

  • @rcasturi55
    @rcasturi55 10 месяцев назад

    Thanks a lot brother. it is working. Keep it up

  • @emeraldgltch
    @emeraldgltch 3 года назад +5

    I just realized that most coder's voices sound the exact same XD

  • @sudhangshudas3099
    @sudhangshudas3099 4 года назад

    Thanks a lot man for helping me out.

  • @zhihangzhou7141
    @zhihangzhou7141 2 года назад

    nice hair style and nice code!

  • @yaswanthravuri662
    @yaswanthravuri662 4 года назад

    Love u broo.. u really made me to get interest in js.. thanks a lot..

  • @stekl.h
    @stekl.h 4 года назад +1

    What a great video! Thumbs up :)

  • @macroperson9116
    @macroperson9116 3 года назад +1

    I'm getting "Error: File Not Found." not sure why?

  • @iamyawaka7020
    @iamyawaka7020 Год назад

    That was quick? WOW!

  • @dimitreortt6972
    @dimitreortt6972 4 года назад

    This is extremely good! Thumbs up from Brasil !! ;)

  • @oskarszageris2587
    @oskarszageris2587 2 года назад

    Much thanks, this helped a lot

  • @faizalimuhammadzoda4731
    @faizalimuhammadzoda4731 2 года назад

    Great content. Thanks for the effort.

  • @ricardonicolitoiu5906
    @ricardonicolitoiu5906 2 года назад

    You are a genius. thank you for this video

  • @MahadyHasan
    @MahadyHasan 4 года назад +1

    you really Simplified the nodejs. Do you have any plan to create a nodeJS Crash Course?

  • @newfoundland1956
    @newfoundland1956 10 месяцев назад

    SO VERY HELPFUL

  • @binfloo6191
    @binfloo6191 3 года назад +1

    Awesome tutorial :)

  • @anjulamadusanka5461
    @anjulamadusanka5461 3 года назад

    Really very helpful... thank you very much

  • @blue-obsidian
    @blue-obsidian Год назад

    I Remember when you where at 104k Subs

  • @Aalii6
    @Aalii6 2 года назад

    very helpful, thank you!

  • @itsm3dud39
    @itsm3dud39 2 года назад +1

    what is the difference between this node server and apche/nginx ?

  • @Tubeman777
    @Tubeman777 5 лет назад +6

    Cool to know this manual method. The Live server Extension on VS Code works in the same way right?

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +11

      Not really. Live server just sets up a really basic server but doesn't allow you to do any server side code with it. Node.js on the other hand allows you to write a ton of custom server side code.

  • @muhammadhamza3720
    @muhammadhamza3720 4 года назад

    Your Mad...... I loved how you explained... thankx :)

  • @teneoultrius6340
    @teneoultrius6340 2 года назад

    Thank you bro, God bless you!

  • @RadhaKrishna_777
    @RadhaKrishna_777 3 года назад +1

    Helpful video 👍😘

  • @coleykat312
    @coleykat312 3 года назад +2

    5:03 I got scared at first from that sound

  • @Navedkhan-rd2qu
    @Navedkhan-rd2qu 4 года назад

    It was a great tutorial.....It will be great if you could make a video on how to structure a nodejs backend. Since i could not find it anywhere . Thanks

  • @christophermartinez1769
    @christophermartinez1769 3 года назад

    I am in love with your videos lol

  • @andreighita8762
    @andreighita8762 3 года назад +2

    Great tutorial, but the syntax you are using in this video is giving errors..
    I had to rewrite my code to look like this so that it can work:
    import { createServer } from 'http'
    const port = 3000;
    const server = createServer((req, res) => {
    res.write('Hello Node!')
    res.end()
    })
    server.listen(port, () => {
    console.log('Server running on port ' + port)
    });

  • @jamil_mikael
    @jamil_mikael 3 года назад

    thanks yo !! you help me a lot

  • @narikumar
    @narikumar 2 года назад

    Nice video, thanks a lot

  • @mys8091
    @mys8091 2 года назад +1

    How do you run node on the browser?

  • @geralt9034
    @geralt9034 5 лет назад +5

    you have amazing hair

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +4

      Thanks!

    • @BlackUp1217
      @BlackUp1217 4 года назад

      @@WebDevSimplified bro how do add CSS and javascript?

    • @Skull11
      @Skull11 3 года назад

      @@BlackUp1217 just link those file in html

  • @josht7238
    @josht7238 2 года назад

    thanks so much very helpful

  • @tubepankajyou
    @tubepankajyou 3 года назад

    Awesome work 👍

  • @Pe30Beat
    @Pe30Beat 4 года назад +6

    how can I serve css and js files on the server next to the index.html ?

    • @e4e585
      @e4e585 4 года назад

      I think u need to href on index. html file itself, no need to again mention it on node server

    • @itarticles6338
      @itarticles6338 4 года назад

      Hi, if you planning to server the other files you need to have multiple if else conditions, actually here he just showed how to use the http module to to host a simple http server.
      if you are planning to use for production, I suggest to use some http server module. But for learning purpose you can create if-else-if conditions like give here ruclips.net/video/ylrWqPadP58/видео.html

    • @Pe30Beat
      @Pe30Beat 4 года назад

      @@itarticles6338 Hi, I figured out how to do it for what I was looking for. It was not this. I wanted to run my project on tablet or from from my computer and you can do that with live server from node and find your ip and log with it in the browser and there is your website from the computer now on the phone ore tablet

    • @itarticles6338
      @itarticles6338 4 года назад

      @@Pe30Beat perfect, yes thats the way, although it will work if you are connected to same network. If you are looking for cross network sharing, there are few node module you can use, they create secure tunnel to your machine and provide your dynamic url, and you can share that URL with anyone in this universe. Happy Coding.

    • @Pe30Beat
      @Pe30Beat 4 года назад +1

      @@itarticles6338 thanks for the info

  • @cezarygruca9823
    @cezarygruca9823 3 года назад

    The good and the simple one!

  • @RobertWildling
    @RobertWildling 4 года назад +1

    The part that should show, when an error happens, does not work... It doesn't make sense to send a 200 before the error check is done. So the "fs.readFile" line (line 6) has to be moved inside the "if(error) {} else { " section. then you also get a proper error feedback.

    • @shahriarhasanfahim8896
      @shahriarhasanfahim8896 3 года назад

      Was stuck for long time 'ERR_STREAM_WRITE_AFTER_END'. and your comment helped. Thanks a lot

  • @patriotuz_
    @patriotuz_ 2 года назад

    Thank you very much

  • @VybeX-
    @VybeX- 4 месяца назад

    nerds are such chads

  • @daniellambert726
    @daniellambert726 2 года назад +2

    Very well explained. How de you add the CSS and JavaScript to the index.html file in this server?

    • @newagecoder5417
      @newagecoder5417 2 года назад +1

      ezy as u do in html

    • @LosEspookys
      @LosEspookys Год назад +1

      @@newagecoder5417 that doesn't work for me

    • @newagecoder5417
      @newagecoder5417 Год назад

      @@LosEspookys wts your css file name? Or the file is in any folder??

  • @yasmeinSalem44
    @yasmeinSalem44 6 месяцев назад

    it's amazing explaination, but I have a question; why did you write res.writeHead(200, { content-type: "text/html"}) outside the callback function, not inside the else statement?

  • @kieuvantruyen1974
    @kieuvantruyen1974 5 лет назад +1

    good video for beginer

  • @DA-gs2rl
    @DA-gs2rl 4 года назад

    I wonder how you add URLs. Great video! Nice and simple just like I like it. Thanks.

    • @caelim3524
      @caelim3524 3 года назад

      What do you mean "add URLS"? do you mean to link something in the site or to deploy the website onto a hosting platform?

  • @SocksWithSandals
    @SocksWithSandals 4 года назад

    Thanks, Kyle.