Your First Node.js Web Server

hello everybody my name is Kyle with web dev simplified in this video I'm going to walk you through all the steps that you need to take in order to create your very first web server using nodejs so let's get started now the first thing we need to do is download nodejs from nodejs org there's two options as you can see that we can select from there's the long term support version and there's the current version I recommend going for the long term support version because the current version could have potential bugs in it that make learning difficult if you run into these because you won't be sure if it's your problem or the actual codes problem so I recommend going with long term support version because this is the most tested version and you know it'll have the least amount of bugs so just click on this and choose where you want to download to save it and then follow the different download steps as they come up it's extremely straightforward and after you're done with that then we're going to need to jump into Visual Studio code in order to get started now that we have no js' downloaded and installed it's time to talk about what nodejs really is no js' is just a way for you to run JavaScript outside of the browser it can be used to run desktop apps servers or really anything else that you want to do with JavaScript and the thing that we're going to do is actually create a web server using nodejs so to get started with that all we need to do is create a JavaScript file inside of our project and we can just call it whatever we want in our case we're just going to call it a PJs and inside of this javascript file we need to create our server and tell it to start listening on a certain port so the first thing we need to do is we need to require a certain library called HTTP that is going to be used to start the server so we can just create a variable called HTTP and to require a library and nodejs you just type the require keyword followed by the name of the library which in our case is HTTP this will will preclude the HTTP library into our code inside of this HTTP variable that we created the next thing we want to do is we want to create a variable that tells our code what port we're going to be listening to for our server and we're going to use this later and then next we can actually create our server so to do that we'll create a server variable here we're going to use that HTTP library we just imported and called the create server function on this object and this create server function takes a single function that has two parameters which is the request and the response parameters so we pass it on a function here with the request and response parameters and then inside of this function is we're going to handle all of the different activity on our server so every time some will request a page to our server it is going to call this function right here and we're going to implement this function in a little bit the next thing we need to do is actually set up our server so it'll listen on the port that we want it to so now that we have this server object we can just call server dot listen pass it that port variable that we created to tell it to listen on port 3,000 and then this takes a single function that it'll call if there's an error potentially so as soon as our server starts listening it will call this function and know to either pass an error or nothing if it was successful so we're gonna check to see if that error exists and so we're just going to log out a message saying that something went wrong and then we're also going to pass the error along to that log statement so that when we check our logs we can see what the error was that happened but if there was no error then we want to log that our server is listening on port and we're just going to pass them that port variable we created earlier so now our server is actually listening and in order to run our server all we need to do is type node followed by the name of the file we want to run and it sends our terminal is open inside of this project we can just type node Aptos and we enter you see it'll say server is listening on port 3000 which is perfect but our server doesn't actually do anything because we haven't implemented the function inside of the create server function so let's end our server by hitting ctrl C and then let's actually implement this function here so what we want to do is we want to return some response to the user and to do that we use the response object that had passed into this function so we can say response dot right and we just want to write hello node to every single person that requests something from our server and then when we want to end our response saying that we've written everything we want to write we just type response that and and there we go that is everything we need to do in order to get our server actually responding to actual requests so if we save that we call it note app J s instead of our Council again and then if we just open up a browser and we go to localhost 3000 you'll see it that we get hello load node being printed out into our browser which is amazing but we probably want to actually render HTML from our web server rather than plain text so let's get started doing that now the first thing we need to do is create a HTML file that we want to render so let's just create a new file called index.html and in vs code if you just type an exclamation point and hit enter it'll generate the outline of an HTML document for you and then inside of the body we can just put this is HTML so that we know that we actually render an HTML here instead of our plain text back in our app dot J's file we need to change the function here that we're calling with each request to tell it to send HTML instead of this plain text of hello node so the first thing we need to do is tell the browser that we're going to be writing HTML to do that we'll call the right head function and the first parameter of right head is the status code of this operation and 200 is a good status code it means everything went fine so we're going to use 200 which indicates that everything went ok and then the next parameter is going to be the different headers that you want to set and one of those headers is called the content type with a hyphen in between content and type and that is going to be the key of our object and then the value of that object is going to be what value we want to set to that header and in our case we're using text slash HTML and this just tells the browser that the information that's being sent to it is an HTML document so it should parse it as HTML then we want to read the file index.html that we created earlier so we need to import another library into our app jjs and this is going to be called FS and we just require that library just like this and now we have a variable called FS that has all the file handling that we need to be able to do so down here in our app dodgy is we're just going to call the read file function of FS and this function takes the name of the file we want to read which is index.html and then it's going to take a function we're just going to have an error property if an error happened in a data argument which is going to be all the data from inside of that file and in here what we want to do is first we want to check if there is an error because if there's an error we want to tell the browser that we couldn't find what we were looking for so we can say right head with a status of 404 and 404 it just means not found we couldn't find what you're looking for so that's how the browser knows that it was unable to find this and then we can use our write method that we talked about earlier just to write out some text to the screen so we just say file not found for example and normally you would want to render a specific file not found page but in our case word is going to be writing some text and in the case that there was no error we want to actually just write the data from the file so we'll say res dot write and data and this data parameter right here is just all the information inside index dot HTML so we can remove this right and we want to move our end inside of this callback here for this function so that way it'll be called after R right here and now if we save that and refresh you'll notice that nothing actually happens and you're thinking why is this I changed all of my code but that's because you have to restart your server in nodejs every single time you make a change so if we just end our server and restart it and now refresh our page you'll see that we're getting in our HTML rendered right here that we created in our index.html file and this is perfect we just set up our very first web server using nodejs and it was incredibly simple if you guys have any questions for me let me know down in the comments below and if you're interested in learning more about node.js make sure to check out next video over here which is going to be about how to set up payments for a shopping cart that I created in my introduction to web development playlist which is also going to be linked over here also don't forget to subscribe if you enjoyed this and want more similar content and with that thank you guys very much for watching have a good day

Channel: Web Dev Simplified

Views: 198,452

Rating: 4.9422717 out of 5

Keywords: webdevsimplified, how to build a web server, node js tutorial, node js server, node js server setup, how to install node js, node js web server, node js web server tutorial, node js server tutorial, node js for beginners, node js explained, node js web server example, node js app, node js app tutorial, node js html server, your first node.js web server, what is node js, why use node js, node js, web server tutorial, server tutorial, web server, beginner node js tutorial

Id: VShtPwEkDD0

Length: 8min 57sec (537 seconds)

Published: Thu Dec 06 2018