1 00:00:02,040 --> 00:00:03,780 To add more instructions 2 00:00:03,780 --> 00:00:07,500 and tell NodeJS what to do if we got a request 3 00:00:07,500 --> 00:00:11,870 that's coming in, we go back to line three here. 4 00:00:11,870 --> 00:00:16,129 And here, we can do something which we already saw before 5 00:00:16,129 --> 00:00:19,050 in the previous JavaScript course sections 6 00:00:19,050 --> 00:00:22,540 when we worked with event listeners. 7 00:00:22,540 --> 00:00:25,430 We can point at a function here 8 00:00:25,430 --> 00:00:28,880 and pass a pointer at another function 9 00:00:28,880 --> 00:00:32,393 as a parameter value to create server. 10 00:00:33,520 --> 00:00:36,000 For this, I'll add a function here, 11 00:00:36,000 --> 00:00:38,780 and I'll name it handleRequest, 12 00:00:38,780 --> 00:00:41,100 though this name is up to you. 13 00:00:41,100 --> 00:00:44,480 But this is a function that should handle incoming requests, 14 00:00:44,480 --> 00:00:46,563 hence this name should make sense. 15 00:00:47,610 --> 00:00:51,310 Now, that's a regular standard JavaScript function 16 00:00:51,310 --> 00:00:54,210 as we saw it before in the course already. 17 00:00:54,210 --> 00:00:55,560 Now, here for createServer, 18 00:00:56,680 --> 00:01:01,091 we can pass handleRequest as a parameter value 19 00:01:01,091 --> 00:01:03,770 but we don't execute it here. 20 00:01:03,770 --> 00:01:05,770 We don't add parentheses, 21 00:01:05,770 --> 00:01:09,930 instead we omit those and we just use the function name here 22 00:01:09,930 --> 00:01:13,800 as we did it for event handlers earlier in the course. 23 00:01:13,800 --> 00:01:16,780 We just point at this function. 24 00:01:16,780 --> 00:01:19,400 And with that, we let NodeJS know 25 00:01:19,400 --> 00:01:21,950 that it's this handleRequest function 26 00:01:21,950 --> 00:01:26,720 that should be executed once we got an incoming request 27 00:01:26,720 --> 00:01:29,830 because createServer as a first argument, 28 00:01:29,830 --> 00:01:34,460 as a first parameter value wants a requestListener. 29 00:01:34,460 --> 00:01:38,258 And a requestListener in the end should just be a function. 30 00:01:38,258 --> 00:01:41,305 A function that then itself 31 00:01:41,305 --> 00:01:45,460 takes certain parameter values though. 32 00:01:45,460 --> 00:01:49,720 To be precise, a function that takes a parameter value 33 00:01:49,720 --> 00:01:52,270 that describes the incoming request 34 00:01:52,270 --> 00:01:54,530 and hence I'll name it request. 35 00:01:54,530 --> 00:01:56,960 And a second parameter value 36 00:01:56,960 --> 00:01:59,753 that takes a response object 37 00:01:59,753 --> 00:02:03,423 that will allow us to send back a response later. 38 00:02:04,860 --> 00:02:06,480 Now, it can be confusing 39 00:02:06,480 --> 00:02:09,770 that we have a function with these parameter values here, 40 00:02:09,770 --> 00:02:12,760 which we then pass as a parameter value itself 41 00:02:12,760 --> 00:02:16,050 to another function or method. 42 00:02:16,050 --> 00:02:19,430 But createServer simply wants a function 43 00:02:19,430 --> 00:02:21,350 as a parameter value 44 00:02:21,350 --> 00:02:25,190 that then itself takes these two parameter values 45 00:02:25,190 --> 00:02:29,040 because values for request and response 46 00:02:29,040 --> 00:02:31,700 will be passed into this function 47 00:02:31,700 --> 00:02:35,090 once NodeJS executes this function for us 48 00:02:35,090 --> 00:02:38,860 whenever a request is reaching that server. 49 00:02:38,860 --> 00:02:43,010 So whenever a request is reaching this NodeJS server, 50 00:02:43,010 --> 00:02:45,780 NodeJS will execute this function for us, 51 00:02:45,780 --> 00:02:47,980 and it will pass in an object 52 00:02:47,980 --> 00:02:50,540 with more data about the request 53 00:02:50,540 --> 00:02:52,740 and another object that allows us 54 00:02:52,740 --> 00:02:54,490 to send back a response 55 00:02:54,490 --> 00:02:57,653 that's all done automatically by NodeJS. 56 00:02:58,500 --> 00:03:01,500 And therefore now in this handleRequest function, 57 00:03:01,500 --> 00:03:04,310 we can now work with this request, 58 00:03:04,310 --> 00:03:06,690 and for example, extract data from it, 59 00:03:06,690 --> 00:03:10,393 and/or prepare a response that should be sent back. 60 00:03:11,550 --> 00:03:14,650 Now, at the moment, I don't wanna work with the request. 61 00:03:14,650 --> 00:03:17,480 At the moment, I wanna focus on the response instead 62 00:03:17,480 --> 00:03:19,580 and ignore the request for now. 63 00:03:19,580 --> 00:03:23,129 At the moment, we need no data from the incoming request 64 00:03:23,129 --> 00:03:26,440 but we definitely should send back a response 65 00:03:26,440 --> 00:03:28,400 because if you create a web server 66 00:03:28,400 --> 00:03:32,150 that does not send back responses to requests, 67 00:03:32,150 --> 00:03:34,640 it will be an invalid web server 68 00:03:34,640 --> 00:03:37,040 and browsers will show errors 69 00:03:37,040 --> 00:03:39,000 when they try to talk to it 70 00:03:39,000 --> 00:03:42,330 because a web server needs to send back responses 71 00:03:42,330 --> 00:03:44,580 for incoming requests. 72 00:03:44,580 --> 00:03:47,540 Therefore here, inside of handleRequest, 73 00:03:47,540 --> 00:03:49,940 we can now use this response object 74 00:03:49,940 --> 00:03:53,390 to prepare and send back a response. 75 00:03:53,390 --> 00:03:56,190 And for this, using the dot notation, 76 00:03:56,190 --> 00:03:59,060 we got various properties and methods 77 00:03:59,060 --> 00:04:01,230 that we can utilize here. 78 00:04:01,230 --> 00:04:03,220 Now, I'm not getting auto completion here 79 00:04:03,220 --> 00:04:07,140 because my IDE here doesn't understand that handleRequest 80 00:04:07,140 --> 00:04:09,920 will be used here for createServer 81 00:04:09,920 --> 00:04:12,113 but I'll still show you properties and methods 82 00:04:12,113 --> 00:04:14,120 that you can use. 83 00:04:14,120 --> 00:04:18,070 And it all starts with the statusCode property, 84 00:04:18,070 --> 00:04:20,579 written like that with a capital C, 85 00:04:20,579 --> 00:04:23,670 that you can set on the response. 86 00:04:23,670 --> 00:04:25,650 So this is not a method you can call 87 00:04:25,650 --> 00:04:27,850 but a property you can set. 88 00:04:27,850 --> 00:04:30,622 And statusCodes simply are ways 89 00:04:30,622 --> 00:04:35,622 of telling a browser whether a request succeeded or not. 90 00:04:36,110 --> 00:04:38,230 If you wanna communicate a success, 91 00:04:38,230 --> 00:04:41,489 you should set it to 200 typically. 92 00:04:41,489 --> 00:04:42,660 On the other hand, 93 00:04:42,660 --> 00:04:46,040 you might have seen the statusCode 404 before 94 00:04:46,040 --> 00:04:50,070 if you visited any website before in your life 95 00:04:50,070 --> 00:04:52,250 because that's a status code, which is used 96 00:04:52,250 --> 00:04:55,210 to communicate from a server to the browser 97 00:04:55,210 --> 00:04:58,180 that the browser tried to access a website 98 00:04:58,180 --> 00:04:59,610 that doesn't exist 99 00:04:59,610 --> 00:05:03,053 or a page, a part of a website that doesn't exist. 100 00:05:06,640 --> 00:05:09,370 Now here I wanna communicate a success case, 101 00:05:09,370 --> 00:05:12,173 hence I'll set the statusCode to 200. 102 00:05:13,410 --> 00:05:14,530 Now, in the next line, 103 00:05:14,530 --> 00:05:16,740 after setting that statusCode, 104 00:05:16,740 --> 00:05:19,400 I now wanna again use response 105 00:05:19,400 --> 00:05:21,520 and send the response, 106 00:05:21,520 --> 00:05:25,090 so tell NodeJS that I'm done preparing the response, 107 00:05:25,090 --> 00:05:27,650 and also set the data 108 00:05:27,650 --> 00:05:30,413 that should be part of the response. 109 00:05:30,413 --> 00:05:33,880 For example, the text or the HTML code 110 00:05:33,880 --> 00:05:36,410 that should be shown by the browser. 111 00:05:36,410 --> 00:05:40,160 Before we did create HTML files for that, 112 00:05:40,160 --> 00:05:43,170 now here since we control what happens on the server 113 00:05:43,170 --> 00:05:47,150 with NodeJS, we can define the HTML code 114 00:05:47,150 --> 00:05:50,630 that should be sent back here in our JavaScript code 115 00:05:50,630 --> 00:05:52,830 because since you learned before, 116 00:05:52,830 --> 00:05:55,800 one of the ideas of using server-side code 117 00:05:55,800 --> 00:06:00,070 is that you can generate HTML code dynamically 118 00:06:00,070 --> 00:06:04,070 so that you write code that generates HTML code. 119 00:06:04,070 --> 00:06:06,380 And that's what I'll do here. 120 00:06:06,380 --> 00:06:09,400 For this, we can use the end method on the response 121 00:06:09,400 --> 00:06:11,690 to end preparing the response 122 00:06:11,690 --> 00:06:13,600 and to send it to the client. 123 00:06:13,600 --> 00:06:18,170 And to end, you can pass the data that should be sent. 124 00:06:18,170 --> 00:06:22,420 And here we could send a very basic piece of HTML code 125 00:06:22,420 --> 00:06:25,030 where we create a h1 element, 126 00:06:25,030 --> 00:06:26,590 opening and closing tags, 127 00:06:26,590 --> 00:06:30,223 and between that, Hello World! 128 00:06:31,321 --> 00:06:34,670 Now, of course, writing HTML code like this 129 00:06:34,670 --> 00:06:36,360 will be way more cumbersome 130 00:06:36,360 --> 00:06:38,100 than putting it into files 131 00:06:38,100 --> 00:06:40,780 but this only be a temporary solution. 132 00:06:40,780 --> 00:06:43,490 You will soon learn how to use files again. 133 00:06:43,490 --> 00:06:46,440 For the moment, just write it as text 134 00:06:46,440 --> 00:06:50,070 without body and head and anything like that here 135 00:06:50,070 --> 00:06:51,843 in this end method. 136 00:06:52,770 --> 00:06:54,050 And if you do all of that, 137 00:06:54,050 --> 00:06:56,120 you can now save this file 138 00:06:56,120 --> 00:06:59,800 and now we'll execute this file again. 139 00:06:59,800 --> 00:07:02,900 So let's now test whether everything worked. 140 00:07:02,900 --> 00:07:06,323 For that, again, I'll use this integrated terminal. 141 00:07:07,190 --> 00:07:09,370 And just as before, 142 00:07:09,370 --> 00:07:12,253 I wanna execute this app.js file with it. 143 00:07:13,300 --> 00:07:17,740 For this here, I'll again write node blank 144 00:07:17,740 --> 00:07:19,623 and then app.js. 145 00:07:20,880 --> 00:07:24,660 And if you hit Enter, you'll notice something interesting. 146 00:07:24,660 --> 00:07:27,660 You don't get an error and you don't get any special output 147 00:07:27,660 --> 00:07:31,730 but you also don't get back into the command mode. 148 00:07:31,730 --> 00:07:33,890 You can't write another command. 149 00:07:33,890 --> 00:07:35,410 I mean, you can type here 150 00:07:35,410 --> 00:07:38,020 but actually, it's kind of blocked. 151 00:07:38,020 --> 00:07:40,090 You're not entering a new line. 152 00:07:40,090 --> 00:07:41,730 Just to show you the comparison, 153 00:07:41,730 --> 00:07:43,730 if I press Control + C, 154 00:07:43,730 --> 00:07:45,980 which stops this running process 155 00:07:45,980 --> 00:07:48,090 and gets out of this blocked mode, 156 00:07:48,090 --> 00:07:50,120 this is the normal entry mode 157 00:07:50,120 --> 00:07:53,330 where you have some information in front of your cursor. 158 00:07:53,330 --> 00:07:54,500 It will be different for you 159 00:07:54,500 --> 00:07:57,320 but you have something in front of your cursor. 160 00:07:57,320 --> 00:07:59,560 And if I hit Enter, for example, here, 161 00:07:59,560 --> 00:08:03,300 then you see new lines are being started. 162 00:08:03,300 --> 00:08:06,300 Now, if I type node app.js as I did before, 163 00:08:06,300 --> 00:08:07,480 this does not happen. 164 00:08:07,480 --> 00:08:08,900 I do get a new line 165 00:08:08,900 --> 00:08:11,630 but not with that part in front of the cursor, 166 00:08:11,630 --> 00:08:14,350 and that means that actually, this process, 167 00:08:14,350 --> 00:08:16,680 which we started with node app.js 168 00:08:16,680 --> 00:08:19,820 is still running and hasn't finished yet. 169 00:08:19,820 --> 00:08:21,990 And that is actually what we want here 170 00:08:21,990 --> 00:08:24,010 and what should be expected 171 00:08:24,010 --> 00:08:27,484 because we did now start our own server. 172 00:08:27,484 --> 00:08:30,480 By executing this NodeJS code, 173 00:08:30,480 --> 00:08:32,690 we started our own server. 174 00:08:32,690 --> 00:08:36,750 And such a server isn't a process that stops suddenly. 175 00:08:36,750 --> 00:08:38,960 Instead, it should keep on running 176 00:08:38,960 --> 00:08:42,390 because it should keep on handling requests. 177 00:08:42,390 --> 00:08:44,450 If our server would stop, 178 00:08:44,450 --> 00:08:45,960 browsers would not be able 179 00:08:45,960 --> 00:08:47,470 to send requests to it, 180 00:08:47,470 --> 00:08:49,970 and that's not what we want here. 181 00:08:49,970 --> 00:08:51,890 Therefore, this is what should happen 182 00:08:51,890 --> 00:08:56,350 that this process is now stuck and not stopped. 183 00:08:56,350 --> 00:08:58,280 You can always finish it manually 184 00:08:58,280 --> 00:09:01,870 by hitting Control + C as I mentioned before. 185 00:09:01,870 --> 00:09:06,160 Now that's our own web server running on our local machine 186 00:09:06,160 --> 00:09:09,840 and don't worry, it will not be exposed to other people 187 00:09:09,840 --> 00:09:12,890 in the world unless your local network setup 188 00:09:12,890 --> 00:09:16,080 is allowing requests from other computers. 189 00:09:16,080 --> 00:09:17,990 But by default, that should not be the case 190 00:09:17,990 --> 00:09:20,600 and it's not changed by this code 191 00:09:20,600 --> 00:09:23,560 but we can now send the request to this server 192 00:09:23,560 --> 00:09:25,730 from inside our own computer 193 00:09:25,730 --> 00:09:28,890 since the server is running on our computer. 194 00:09:28,890 --> 00:09:31,330 So even without the network being opened up, 195 00:09:31,330 --> 00:09:33,870 we can still send the request to the server 196 00:09:33,870 --> 00:09:37,083 if we use a browser installed on the same computer. 197 00:09:38,080 --> 00:09:40,420 So therefore here I'll go back to my browser 198 00:09:40,420 --> 00:09:45,270 and here you can now enter localhost:3000. 199 00:09:45,270 --> 00:09:48,490 Localhost is simply an alias that refers 200 00:09:48,490 --> 00:09:50,190 to your local computer, 201 00:09:50,190 --> 00:09:52,800 so it's like amazon.com but just the address 202 00:09:52,800 --> 00:09:54,490 of your local computer, 203 00:09:54,490 --> 00:09:59,430 and then :3000 is used to target a specific port. 204 00:09:59,430 --> 00:10:01,290 And here I'm using 3000 205 00:10:01,290 --> 00:10:04,060 because that's the port on which I'm listening. 206 00:10:04,060 --> 00:10:05,770 If you used the different port here, 207 00:10:05,770 --> 00:10:08,680 you need to enter the different port number here 208 00:10:08,680 --> 00:10:09,880 after the colon. 209 00:10:09,880 --> 00:10:14,880 But I do recommend that you do follow along with 3000. 210 00:10:15,000 --> 00:10:16,350 And if you now hit Enter, 211 00:10:16,350 --> 00:10:18,513 you should see Hello World! here. 212 00:10:19,510 --> 00:10:20,950 And you will actually see 213 00:10:20,950 --> 00:10:22,660 that if you inspect this, 214 00:10:22,660 --> 00:10:26,950 this is an h1 element, Hello World! 215 00:10:26,950 --> 00:10:29,340 because I did send back my response 216 00:10:29,340 --> 00:10:31,850 with this h1 element inside of it. 217 00:10:31,850 --> 00:10:34,416 That's the response data. 218 00:10:34,416 --> 00:10:38,110 Now, we also have a head and body tag around that 219 00:10:38,110 --> 00:10:40,890 because that's added automatically by the browser 220 00:10:40,890 --> 00:10:42,740 if it's missing in the response 221 00:10:42,740 --> 00:10:46,363 but the response itself is only this h1 tag here. 222 00:10:47,410 --> 00:10:49,650 We can also see this, by the way, 223 00:10:49,650 --> 00:10:51,110 if you go to the dev tools 224 00:10:51,110 --> 00:10:53,340 and there the network tab, 225 00:10:53,340 --> 00:10:55,400 and you then reload the page 226 00:10:55,400 --> 00:10:57,280 by pressing this reload icon. 227 00:10:57,280 --> 00:11:00,870 Here you see all the requests your browser might be sending, 228 00:11:00,870 --> 00:11:04,940 and here you should see this request to localhost:3000 229 00:11:04,940 --> 00:11:06,770 and if you click on it, 230 00:11:06,770 --> 00:11:09,523 you see more information about this request. 231 00:11:10,660 --> 00:11:13,420 And here you see a preview of the response, 232 00:11:13,420 --> 00:11:14,890 but if you click on response, 233 00:11:14,890 --> 00:11:17,250 you'll also see the response data itself, 234 00:11:17,250 --> 00:11:20,563 and here you see it's only this h1 text. 235 00:11:21,970 --> 00:11:24,010 And this is now a website 236 00:11:24,010 --> 00:11:26,060 that is displayed by the browser 237 00:11:26,060 --> 00:11:28,770 just as it was before in the course, 238 00:11:28,770 --> 00:11:32,860 but the code, the HTML code that is being displayed 239 00:11:32,860 --> 00:11:35,440 is now not actually code that we wrote 240 00:11:35,440 --> 00:11:39,070 in some HTML file, which we then clicked on 241 00:11:39,070 --> 00:11:41,720 or served with the development server 242 00:11:41,720 --> 00:11:45,150 but instead, it's some HTML response 243 00:11:45,150 --> 00:11:47,780 that is generated and sent back 244 00:11:47,780 --> 00:11:50,713 by our own NodeJS server. 245 00:11:51,590 --> 00:11:56,050 And therefore, this NodeJS server now also replaces 246 00:11:56,050 --> 00:11:58,040 this development server extension, 247 00:11:58,040 --> 00:12:00,870 which we used before in Visual Studio Code, 248 00:12:00,870 --> 00:12:02,068 because now we don't need 249 00:12:02,068 --> 00:12:06,100 that extra development server created by the extension 250 00:12:06,100 --> 00:12:10,923 since we do create our very own server with NodeJS here. 251 00:12:11,980 --> 00:12:14,240 Now, the advantages of using NodeJS 252 00:12:14,240 --> 00:12:16,190 might not yet be obvious 253 00:12:16,190 --> 00:12:18,130 since we still have, in the end, 254 00:12:18,130 --> 00:12:21,310 static pre-written HTML code here, 255 00:12:21,310 --> 00:12:23,690 but this is a crucial first step 256 00:12:23,690 --> 00:12:26,154 to dive deeper into NodeJS 257 00:12:26,154 --> 00:12:29,380 because this is basically the main entry point 258 00:12:29,380 --> 00:12:32,463 of any website that you are building with NodeJS. 259 00:12:33,380 --> 00:12:36,090 You always start by setting up a server 260 00:12:36,090 --> 00:12:39,710 and then you can add more features in a next step, 261 00:12:39,710 --> 00:12:42,460 and that's what we'll do throughout the rest of the course 262 00:12:42,460 --> 00:12:44,963 but these are the crucial basics. 263 00:12:46,280 --> 00:12:47,560 Now, with that for the moment, 264 00:12:47,560 --> 00:12:51,150 I'll stop this running NodeJS server here 265 00:12:51,150 --> 00:12:54,590 by going into the terminal and hitting Control + C, 266 00:12:54,590 --> 00:12:55,930 and this will stop it. 267 00:12:55,930 --> 00:12:57,490 And once you stopped it, 268 00:12:57,490 --> 00:13:00,210 if you visit localhost:3000 again, 269 00:13:00,210 --> 00:13:01,510 you'll get an error 270 00:13:01,510 --> 00:13:04,310 because this server isn't running anymore. 271 00:13:04,310 --> 00:13:07,410 Whenever you wanna continue working on the code, 272 00:13:07,410 --> 00:13:10,850 you therefore have to re-execute node app.js 273 00:13:10,850 --> 00:13:13,500 to start that server again. 274 00:13:13,500 --> 00:13:15,560 But that's something we'll do later. 275 00:13:15,560 --> 00:13:18,800 For the moment, this is what I wanna finish with 276 00:13:18,800 --> 00:13:21,680 and now it's time to dive deeper into NodeJS 277 00:13:21,680 --> 00:13:23,263 and what we can build with it.