1 00:00:07,060 --> 00:00:15,310 Finally, the time has come for us to create our own web server using Node.js. 2 00:00:16,040 --> 00:00:22,640 We are going to use the HTTP core module from Node.js to get this done. 3 00:00:23,030 --> 00:00:25,040 So let's get back to our terminal. 4 00:00:25,220 --> 00:00:28,870 The first step is we need to create a folder for this. 5 00:00:28,880 --> 00:00:30,780 You can use the manual way. 6 00:00:30,800 --> 00:00:37,940 That is right click in and the new folder and the name of your folder after that drag and drop inside 7 00:00:37,940 --> 00:00:40,670 your Visual Studio code or your preferred text editor. 8 00:00:40,760 --> 00:00:43,850 But I advise you to stick to the terminal in that way. 9 00:00:43,850 --> 00:00:46,460 You'll be familiar with the command, so let's go. 10 00:00:46,790 --> 00:00:54,200 The first command is to create a folder that is mkdir and the name of the folder I'm going to name it 11 00:00:54,200 --> 00:00:55,640 as web server. 12 00:00:55,910 --> 00:01:02,780 Now the folder has been created to make sure that it has been created, make use of L as meaning list. 13 00:01:02,780 --> 00:01:08,420 And now you can see that I have the folder on my desktop called Web Server. 14 00:01:08,930 --> 00:01:13,200 The next step is I need to change or CD in to this folder. 15 00:01:13,220 --> 00:01:17,930 So CD and the name of the folder which is web server. 16 00:01:18,110 --> 00:01:19,540 Now hit enter. 17 00:01:19,550 --> 00:01:20,330 You can see that. 18 00:01:20,330 --> 00:01:23,000 Now I am inside this folder. 19 00:01:23,360 --> 00:01:29,030 The next step is to open this using the command code and then period. 20 00:01:29,150 --> 00:01:32,990 This command works with all visual CD code users. 21 00:01:32,990 --> 00:01:38,810 So let's hit enter now and we see that it has open for me nicely. 22 00:01:39,080 --> 00:01:45,380 The next step is you are going to create a file for this and you can do it in two ways. 23 00:01:45,380 --> 00:01:51,200 That is using the gooey or right clicking and the name of the file or you can use the terminal. 24 00:01:51,620 --> 00:01:54,440 So I'm going to use the terminal to create the file. 25 00:01:54,440 --> 00:02:01,280 So I'm going to make use of touch as a command for back end development, especially when you are creating 26 00:02:01,280 --> 00:02:02,060 a server. 27 00:02:02,330 --> 00:02:10,850 The name of the file we often use index or server or app, so let's use server dot js. 28 00:02:10,850 --> 00:02:18,180 The name is up to you and we see that I have the server file being what created for me. 29 00:02:18,200 --> 00:02:24,980 Now let's get rocking because we are going to use the HTTP call module to get it down. 30 00:02:24,980 --> 00:02:26,710 Let's require the module. 31 00:02:26,720 --> 00:02:33,650 The first step comes we're going to use HTTP equal to require the module. 32 00:02:33,650 --> 00:02:35,810 That is the HTTP. 33 00:02:35,840 --> 00:02:38,000 Now, here we go. 34 00:02:38,360 --> 00:02:45,170 Now, if you try to console log the HTTP, you're going to see a bunch of methods that we have on it 35 00:02:45,230 --> 00:02:46,760 to get the job done. 36 00:02:46,880 --> 00:02:50,060 So now let me run this particular file. 37 00:02:50,060 --> 00:02:56,330 So clear the console and I'm going to use Node, the name of the file which is server JS. 38 00:02:56,330 --> 00:03:00,350 And you can see that we have a bunch of methods on that. 39 00:03:00,560 --> 00:03:03,950 So now how can we create our first server? 40 00:03:04,650 --> 00:03:06,210 Let's remove these comments. 41 00:03:06,240 --> 00:03:10,830 Now, let's have a beautiful comment here and say it's create server. 42 00:03:11,430 --> 00:03:18,570 And on the HTTP instance we have on that, we have a method called create server. 43 00:03:18,780 --> 00:03:22,390 And this is a method for this method. 44 00:03:22,450 --> 00:03:26,970 I'm going to pass in only one argument and that is callback. 45 00:03:27,000 --> 00:03:31,170 We can use a function or the normal function syntax. 46 00:03:31,170 --> 00:03:34,710 So let's go by the normal function syntax. 47 00:03:35,160 --> 00:03:39,120 Inside the callback we have access to two things. 48 00:03:39,120 --> 00:03:46,170 That is the request the user is trying to make and the response by convention. 49 00:03:46,170 --> 00:03:55,560 We shorten it as our queue for requests and then our E is for response as that. 50 00:03:55,680 --> 00:04:01,710 Now inside the callback, that is where we are going to write our logic for the server. 51 00:04:01,890 --> 00:04:03,990 So let's have some steps here. 52 00:04:04,350 --> 00:04:12,300 Step number one is we need to add what is called HTTP headers and I'll explain to you very soon after 53 00:04:12,300 --> 00:04:16,560 that we need to send what is called the response header. 54 00:04:16,589 --> 00:04:27,630 I will also explain to you very soon after that we need to send data to the user, send data to the 55 00:04:28,260 --> 00:04:29,310 user. 56 00:04:29,610 --> 00:04:34,500 And then last step is we need to end the response. 57 00:04:35,490 --> 00:04:36,050 Great. 58 00:04:36,060 --> 00:04:37,610 So what is it? 59 00:04:37,640 --> 00:04:47,160 HTTP header at http headers simply means that it gives more information about the requests and the response. 60 00:04:47,340 --> 00:04:51,960 And also we can also pass a data into the headers. 61 00:04:51,960 --> 00:04:58,800 For example, if you get back to authentication, you often use or pass in a token to the headers. 62 00:04:59,250 --> 00:05:04,200 So for our case, you are going to stick to the response header for now. 63 00:05:04,650 --> 00:05:12,000 So for the response header, what we are going to do is that we need to tell the user that his or her 64 00:05:12,000 --> 00:05:18,630 request was successful or not, and we can do so by writing a header. 65 00:05:18,630 --> 00:05:23,850 In this way we're going to make use of write head as that. 66 00:05:24,180 --> 00:05:27,810 And this right here we pass in two arguments. 67 00:05:27,840 --> 00:05:31,170 The first one is what you call the status code. 68 00:05:31,320 --> 00:05:32,790 One is the status code. 69 00:05:32,790 --> 00:05:40,740 It gives more details or information about the request, whether it was successful or error or code. 70 00:05:40,950 --> 00:05:44,610 So we will dive you more to show you types of status code. 71 00:05:44,610 --> 00:05:46,950 For the meantime, let's stick to 200. 72 00:05:46,980 --> 00:05:48,750 We simply means okay. 73 00:05:48,840 --> 00:05:55,050 If everything is okay, it means that we are going to send the status code called 200. 74 00:05:55,320 --> 00:05:59,280 The next agreement is what you call key value per. 75 00:05:59,580 --> 00:06:02,430 So it goes like this as an object. 76 00:06:02,430 --> 00:06:10,830 So for this we are going to tell the server or the response, the kind of data that it needs to send 77 00:06:10,830 --> 00:06:20,730 to the user, and we call it as content type and pass in as a JSON content and then type and then semicolon 78 00:06:20,730 --> 00:06:26,910 and then the value that must be in double code because this is a decent format. 79 00:06:27,300 --> 00:06:31,290 Next is what kind of data do we want to send to the user? 80 00:06:31,560 --> 00:06:37,920 If we go back to API development, we are going to retain what is called JSON data. 81 00:06:38,010 --> 00:06:43,950 But for our case, let's just send a plain text, going to be text slash plane. 82 00:06:43,950 --> 00:06:52,830 Now this line of code gives more information about the response and most importantly, we are telling 83 00:06:52,830 --> 00:06:57,540 the server, please, this is a kind of data that we need to send to the user. 84 00:06:57,750 --> 00:06:59,730 That's the first line of code. 85 00:07:00,000 --> 00:07:03,930 The next step is definitely we need to send something to the user. 86 00:07:03,930 --> 00:07:11,760 If the user tries to visit our endpoint to have access to our server and are going to use response dot 87 00:07:11,760 --> 00:07:12,540 right. 88 00:07:13,140 --> 00:07:19,680 And this is a function and here you pass in the data that you want to send to the user. 89 00:07:19,950 --> 00:07:23,100 For the meantime, let's just say that hello. 90 00:07:23,900 --> 00:07:28,850 This is my first web server. 91 00:07:29,420 --> 00:07:30,010 Perfect. 92 00:07:30,020 --> 00:07:34,970 So all what our server is doing is to send this data called. 93 00:07:34,970 --> 00:07:37,790 Hello, this is my first server. 94 00:07:38,520 --> 00:07:42,140 And lastly is we need to end the response. 95 00:07:42,150 --> 00:07:49,830 So on the response, we have what is called dot ent, meaning we have ended the response. 96 00:07:50,160 --> 00:07:56,880 The next step is if you try to run the server or a file, nothing seems to be happening. 97 00:07:56,880 --> 00:08:01,440 So note I'm using up our key to navigate through my history. 98 00:08:01,440 --> 00:08:08,280 Now I have node server the JS and you can see that nothing seems to be happening well. 99 00:08:08,280 --> 00:08:15,960 So after this one we need to listen to the server because a server must be always 24 seven. 100 00:08:15,960 --> 00:08:23,490 So what comes back from this is what we call the actual server and it name can be anything. 101 00:08:23,490 --> 00:08:28,470 We are assigning the response coming back from this to what is called a server. 102 00:08:28,680 --> 00:08:34,200 And if you try to console log server, let's see what we have on it. 103 00:08:34,260 --> 00:08:36,720 Now back to my terminal here. 104 00:08:37,049 --> 00:08:46,590 Let's run the application and you can see that we have a bunch of methods on that and what we want is 105 00:08:46,590 --> 00:08:48,120 what we call listen. 106 00:08:48,450 --> 00:08:51,420 So on the server that we got. 107 00:08:51,420 --> 00:08:58,200 So let's have a beautiful comment here and says listen to the server. 108 00:08:58,320 --> 00:09:06,390 So on the server we have a method called lesson and this lesson takes into arguments. 109 00:09:06,390 --> 00:09:10,140 The first one is what we call the port. 110 00:09:10,530 --> 00:09:19,770 Well, a port is a number on which the server will listen to, or technically a port is a number assigned 111 00:09:19,770 --> 00:09:27,270 to uniquely identify a connection endpoint and to direct data to a specific service. 112 00:09:27,450 --> 00:09:32,400 So a port is a number of which our server is going to listen to. 113 00:09:32,850 --> 00:09:40,380 So I'm going to pass in here a number and it can be anything but make sure that the number or the port 114 00:09:40,380 --> 00:09:43,470 is going to be used by different application. 115 00:09:43,470 --> 00:09:49,770 So I will show you how in case I'm going to use a port that has been used by a different application 116 00:09:49,770 --> 00:09:51,000 on your system. 117 00:09:51,390 --> 00:09:58,890 So most at times make use of 80, 80 or let's say 5000 or 7000 or 9000. 118 00:09:58,890 --> 00:10:02,160 So let's use 7000 for this purpose. 119 00:10:02,340 --> 00:10:07,590 The next step is we pass in a callback function to tell the user that, Hey. 120 00:10:08,620 --> 00:10:10,720 The server is up and running. 121 00:10:10,720 --> 00:10:11,920 Let's use our function. 122 00:10:11,920 --> 00:10:14,350 This time around we can use normal function. 123 00:10:14,470 --> 00:10:21,340 So inside a callback when our server get connected, we want to send this message since that server 124 00:10:21,340 --> 00:10:24,880 is up and running. 125 00:10:25,180 --> 00:10:27,820 All right, so moment of truth. 126 00:10:27,910 --> 00:10:32,140 Now let's try to run the server again. 127 00:10:32,140 --> 00:10:35,050 Make means of node and then the server. 128 00:10:35,320 --> 00:10:43,690 And now I told you, you see something here and we are going to see this kind of message a lot, which 129 00:10:43,690 --> 00:10:45,610 is a D in use. 130 00:10:45,640 --> 00:10:54,400 It simply means that the address already in use, meaning this part that you specify is being used by 131 00:10:54,400 --> 00:10:57,160 different application or my operating system. 132 00:10:57,670 --> 00:11:03,610 So anytime you see this kind of message, it tells you that the part you are using is already being 133 00:11:03,610 --> 00:11:03,910 used. 134 00:11:03,910 --> 00:11:05,530 So let's change the port. 135 00:11:05,680 --> 00:11:07,750 Let's make it 9000. 136 00:11:08,110 --> 00:11:10,960 So moment of truth, let's clear the console. 137 00:11:10,960 --> 00:11:18,100 Now let's run application and now you can see that server is up and running. 138 00:11:18,580 --> 00:11:22,300 So how can a user access our server? 139 00:11:22,510 --> 00:11:31,180 Definitely the user need to have a euro, but because we have not deployed this particular server or 140 00:11:31,180 --> 00:11:37,060 application, we are going to have access to what is called local host. 141 00:11:37,360 --> 00:11:43,830 So now the you are or the endpoint is going to be at HTTP. 142 00:11:43,870 --> 00:11:50,940 Let me have a comment at HTTP semicolon for s large voice slash local. 143 00:11:51,760 --> 00:11:58,840 Host and then semicolon, the name of our port which is 9000, which is this. 144 00:11:59,260 --> 00:12:00,490 So what is a look? 145 00:12:00,660 --> 00:12:09,880 Host In computer networking localhost is a host name that refers to the current device used to access 146 00:12:09,880 --> 00:12:10,330 it. 147 00:12:11,120 --> 00:12:19,250 Since we have not deployed the application, we are going to use the localhost, which is the host name 148 00:12:19,250 --> 00:12:21,290 that refers to the current device. 149 00:12:21,290 --> 00:12:24,320 That is my operating system or my machine. 150 00:12:24,710 --> 00:12:33,080 So if I copy this, you are error and now I open my browser and paste it and hit enter. 151 00:12:33,110 --> 00:12:36,170 Now if we see that, we have something here. 152 00:12:36,200 --> 00:12:36,890 Hello. 153 00:12:36,920 --> 00:12:39,440 This is my first web server. 154 00:12:39,710 --> 00:12:42,790 You can see we have the response back. 155 00:12:42,800 --> 00:12:43,280 Hello. 156 00:12:43,310 --> 00:12:45,950 This is my first web server. 157 00:12:46,430 --> 00:12:50,920 But let's change the kind of data we are returning back. 158 00:12:50,930 --> 00:12:54,500 So here instead of playing, let's make it a HTML. 159 00:12:54,530 --> 00:12:56,930 We are returning a HTML for the meantime. 160 00:12:56,960 --> 00:13:01,930 Now, any time you make changes to the server, we need to restart it. 161 00:13:01,940 --> 00:13:03,700 So now back to my terminal. 162 00:13:03,800 --> 00:13:06,500 Let's shut down the server and then run again. 163 00:13:06,530 --> 00:13:08,650 Now let's refresh the page. 164 00:13:08,660 --> 00:13:12,290 Now, if we see that we have the same text, that is. 165 00:13:12,290 --> 00:13:15,620 Hello, this is my first web server. 166 00:13:16,100 --> 00:13:25,690 So a takeaway here is that any time a user visits our URL, any function in here gets called. 167 00:13:25,700 --> 00:13:29,270 So any function we put in here is going to be called. 168 00:13:29,270 --> 00:13:35,210 So let's try to console.log and let's say that someone. 169 00:13:38,010 --> 00:13:40,080 Has visited. 170 00:13:40,940 --> 00:13:41,840 The. 171 00:13:42,630 --> 00:13:44,920 Simple as that. 172 00:13:44,940 --> 00:13:53,500 So now let's restart the server because I've made changes to the file and now let's run the application. 173 00:13:53,520 --> 00:13:55,200 Now check the terminal. 174 00:13:55,230 --> 00:13:59,580 It could see that someone has visited the server. 175 00:14:00,000 --> 00:14:02,310 Let's go through what is going on here. 176 00:14:02,490 --> 00:14:08,700 Any time a user visits our you are all the code inside the server is going to run. 177 00:14:08,700 --> 00:14:14,730 So first of all, it gets here and says, okay, now I'm going to send status code 200, meaning everything 178 00:14:14,730 --> 00:14:15,630 is okay. 179 00:14:15,630 --> 00:14:23,300 And here the user is requesting for a plaintext, which is a HTML and line about hand. 180 00:14:23,310 --> 00:14:31,650 Here we are sending the data to the user and after sending the data we need to end the response here. 181 00:14:32,410 --> 00:14:35,020 That is the basic flow of a server. 182 00:14:35,230 --> 00:14:44,440 In the next video, we will talk about how we can render a HTML page using our server.