1 00:00:02,070 --> 00:00:05,500 Now we wrote our first bit of JavaScript code 2 00:00:05,500 --> 00:00:08,460 that was executed with Node JS, 3 00:00:08,460 --> 00:00:11,520 but of course this code is not too impressive. 4 00:00:11,520 --> 00:00:14,320 We could have executed that same code 5 00:00:14,320 --> 00:00:15,930 in the browser as well. 6 00:00:15,930 --> 00:00:19,090 If we would have added this into a JavaScript file 7 00:00:19,090 --> 00:00:22,240 that is standing colluded in an HTML file 8 00:00:22,240 --> 00:00:24,310 with help of the script element, 9 00:00:24,310 --> 00:00:25,979 basically what we did before. 10 00:00:25,979 --> 00:00:27,710 But of course, the idea now is 11 00:00:27,710 --> 00:00:30,220 that we do write some code that executes 12 00:00:30,220 --> 00:00:33,310 on a server because then, as a next step, 13 00:00:33,310 --> 00:00:35,649 might do useful things for us there 14 00:00:35,649 --> 00:00:38,249 that can't be done in a browser, 15 00:00:38,249 --> 00:00:41,450 like storing user input in a database, 16 00:00:41,450 --> 00:00:44,800 or generate some dynamic HTML code. 17 00:00:44,800 --> 00:00:48,130 I outlined all the reasons for having server-side code 18 00:00:48,130 --> 00:00:51,220 over the last lectures and sections, 19 00:00:51,220 --> 00:00:54,880 and therefore to get there step by step and to get started, 20 00:00:54,880 --> 00:00:58,160 let's now actually write some JavaScript code 21 00:00:58,160 --> 00:01:01,460 that can be executed with Node JS 22 00:01:01,460 --> 00:01:06,460 that will then actually send a response to a browser. 23 00:01:06,680 --> 00:01:08,630 So, that will be responsible for 24 00:01:08,630 --> 00:01:11,200 showing something on the screen. 25 00:01:11,200 --> 00:01:14,040 And for this, we need to use Node JS 26 00:01:14,040 --> 00:01:17,110 and the JavaScript code we execute with it 27 00:01:17,110 --> 00:01:20,680 to build a web server on our own. 28 00:01:20,680 --> 00:01:23,100 Now that's where things can get tricky 29 00:01:23,100 --> 00:01:25,040 to wrap your head around. 30 00:01:25,040 --> 00:01:29,020 We did already host a basic website 31 00:01:29,020 --> 00:01:32,230 on a drag and drop static site host 32 00:01:32,230 --> 00:01:34,330 way earlier in the course. 33 00:01:34,330 --> 00:01:37,870 We used Netlify Drop there, if you'll remember. 34 00:01:37,870 --> 00:01:40,330 Now, there, we used a hosting provider 35 00:01:40,330 --> 00:01:45,260 that created a web server and hosted our files for us. 36 00:01:45,260 --> 00:01:48,810 And during development, we used this 37 00:01:48,810 --> 00:01:52,900 Visual studio code extension to Live Server 38 00:01:52,900 --> 00:01:56,290 to have this other reloading experience 39 00:01:56,290 --> 00:01:59,500 where we also served our HTML files 40 00:01:59,500 --> 00:02:01,790 with that development server, 41 00:02:01,790 --> 00:02:02,910 and under the hood, 42 00:02:02,910 --> 00:02:07,780 that also was a pre-configured server running on our machine 43 00:02:07,780 --> 00:02:10,020 that was accepting requests 44 00:02:10,020 --> 00:02:14,330 and sending back our HTML files as responses. 45 00:02:14,330 --> 00:02:17,680 That is what this extension did under the hood. 46 00:02:17,680 --> 00:02:21,819 Now that we'll write our own so-called server-side code 47 00:02:21,819 --> 00:02:24,048 using that extension 48 00:02:24,048 --> 00:02:26,800 or deploying our page 49 00:02:26,800 --> 00:02:29,430 on a service like Netlify Drop, 50 00:02:29,430 --> 00:02:32,200 which gives us a pre-configured web server, 51 00:02:32,200 --> 00:02:34,465 will no longer be an option 52 00:02:34,465 --> 00:02:37,870 because if we want to execute our own code 53 00:02:37,870 --> 00:02:40,460 that executes on that remote machine, 54 00:02:40,460 --> 00:02:41,660 on that server, 55 00:02:41,660 --> 00:02:46,660 then we also have to write the server itself ourselves. 56 00:02:46,670 --> 00:02:49,140 And that might sound very complex, 57 00:02:49,140 --> 00:02:52,720 but thankfully, Node JS makes that simple. 58 00:02:52,720 --> 00:02:57,070 As a side note, I'm often saying server-side code, 59 00:02:57,070 --> 00:02:59,100 even though over the next minutes, 60 00:02:59,100 --> 00:03:03,420 we'll write our own basic web server with Node JS. 61 00:03:03,420 --> 00:03:07,490 Still, I always mean the code that runs on a remote machine, 62 00:03:07,490 --> 00:03:10,140 which once you deploy your application, 63 00:03:10,140 --> 00:03:12,810 would be exposed to the worldwide web, 64 00:03:12,810 --> 00:03:16,860 and which would handle incoming requests from your visitors. 65 00:03:16,860 --> 00:03:19,400 Now that's what we now need to write ourselves 66 00:03:19,400 --> 00:03:23,090 with Node JS so that we then, in a second step, 67 00:03:23,090 --> 00:03:27,910 can have full control over how requests are parsed, 68 00:03:27,910 --> 00:03:29,930 which data is extracted, 69 00:03:29,930 --> 00:03:34,080 and which data is sent back as a response 70 00:03:34,080 --> 00:03:35,880 because we no longer just want 71 00:03:35,880 --> 00:03:39,210 to send back HTML files automatically. 72 00:03:39,210 --> 00:03:43,430 The idea of using Node JS is that we have more control 73 00:03:43,430 --> 00:03:47,980 than we did before over what happens on that server. 74 00:03:47,980 --> 00:03:50,770 Now for that we will use certain features 75 00:03:50,770 --> 00:03:53,410 that are built into Node JS. 76 00:03:53,410 --> 00:03:55,800 You might recall this documentation. 77 00:03:55,800 --> 00:03:59,760 I mentioned that Node JS comes with a lot of packages 78 00:03:59,760 --> 00:04:01,840 that expose different features 79 00:04:01,840 --> 00:04:05,488 that you can then use in your Node JS code. 80 00:04:05,488 --> 00:04:10,020 For example, Node JS comes with the HTTP package 81 00:04:10,020 --> 00:04:13,280 that gives us certain functionalities 82 00:04:13,280 --> 00:04:15,660 that we can use in our code 83 00:04:15,660 --> 00:04:18,450 to listen to incoming requests 84 00:04:18,450 --> 00:04:21,269 and to send back responses. 85 00:04:21,269 --> 00:04:23,050 And that is what we need to do 86 00:04:23,050 --> 00:04:25,880 if we want to write our own web server. 87 00:04:25,880 --> 00:04:28,650 We need to write some JavaScript code 88 00:04:28,650 --> 00:04:32,240 that knows how to deal with incoming requests 89 00:04:32,240 --> 00:04:35,920 and that knows how to then send back a response 90 00:04:35,920 --> 00:04:39,860 so that we then can send requests in a second step 91 00:04:39,860 --> 00:04:44,043 to that custom written web server with help of a browser. 92 00:04:44,940 --> 00:04:46,460 So therefore back in app.js, 93 00:04:46,460 --> 00:04:50,240 we will now start by using that built-in package 94 00:04:50,240 --> 00:04:52,320 that helps us with that. 95 00:04:52,320 --> 00:04:54,970 And we do this in our JavaScript file 96 00:04:54,970 --> 00:04:57,230 by using a special keyword, 97 00:04:57,230 --> 00:05:00,420 a special function that's built into Node JS, 98 00:05:00,420 --> 00:05:02,400 called "require." 99 00:05:02,400 --> 00:05:05,810 We execute this as a function by adding parentheses 100 00:05:05,810 --> 00:05:10,810 after its name and then to "require" we pass a string. 101 00:05:11,090 --> 00:05:13,896 And that string now contains the package name 102 00:05:13,896 --> 00:05:18,050 that's built into Node JS that we want to use here. 103 00:05:18,050 --> 00:05:21,820 And in this case, this will be the HTTP package, 104 00:05:21,820 --> 00:05:23,630 which is a package, 105 00:05:23,630 --> 00:05:25,930 for which you can view the documentation as well, 106 00:05:25,930 --> 00:05:28,210 that offers certain functionalities 107 00:05:28,210 --> 00:05:31,153 that help you deal with the requests and responses. 108 00:05:32,170 --> 00:05:34,540 So for this, we require HTTP, 109 00:05:34,540 --> 00:05:38,720 and calling this function will then return an object 110 00:05:38,720 --> 00:05:43,720 full of utility methods and properties provided by Node JS. 111 00:05:45,340 --> 00:05:48,150 So we store it as object in a constant now, 112 00:05:48,150 --> 00:05:50,430 and I'll name this constant HTTP, 113 00:05:50,430 --> 00:05:51,793 but this name is up to you. 114 00:05:52,630 --> 00:05:55,110 We could also turn it into a variable, 115 00:05:55,110 --> 00:05:58,940 but I don't plan on reassigning this to a different value. 116 00:05:58,940 --> 00:06:02,120 And hence I can use a constant instead. 117 00:06:02,120 --> 00:06:05,160 And these are all features we learned about before. 118 00:06:05,160 --> 00:06:09,700 The only new thing here is the "require," a keyword. 119 00:06:09,700 --> 00:06:12,653 This function, which is built into Node JS. 120 00:06:13,600 --> 00:06:16,870 Now with that we are pulling in this HTTP object, 121 00:06:16,870 --> 00:06:18,933 which is full of extra functionality. 122 00:06:20,235 --> 00:06:23,050 And we can now use one of the built-in methods. 123 00:06:23,050 --> 00:06:25,350 And for this, we use HTTP now 124 00:06:25,350 --> 00:06:30,350 and here we can actually execute the create server method. 125 00:06:31,610 --> 00:06:33,600 And this does what the name implies. 126 00:06:33,600 --> 00:06:36,690 It will create a web server. 127 00:06:36,690 --> 00:06:41,690 So even though we'll now not use some external company's 128 00:06:42,090 --> 00:06:44,200 pre-configured web server, 129 00:06:44,200 --> 00:06:47,740 we can still easily set up a custom server 130 00:06:47,740 --> 00:06:50,310 with help of Node JS. 131 00:06:50,310 --> 00:06:52,070 Now, just as a side note, 132 00:06:52,070 --> 00:06:56,400 if we would want to host our Node JS-driven website, 133 00:06:56,400 --> 00:07:00,410 we would still reach out to an external hosting provider 134 00:07:00,410 --> 00:07:03,000 and upload our code to them. 135 00:07:03,000 --> 00:07:04,350 The only difference would be 136 00:07:04,350 --> 00:07:08,410 that we don't use a simple drag and drop hosting provider, 137 00:07:08,410 --> 00:07:10,760 but instead we need a hosting provider 138 00:07:10,760 --> 00:07:12,660 that offers us a computer 139 00:07:12,660 --> 00:07:16,210 that already has Node JS pre-installed, 140 00:07:16,210 --> 00:07:17,420 but we will come back 141 00:07:17,420 --> 00:07:21,500 to deploying and hosting Node JS-driven websites later. 142 00:07:21,500 --> 00:07:24,310 For the moment, let's focus on the code here. 143 00:07:24,310 --> 00:07:26,940 And here we do now create a server 144 00:07:26,940 --> 00:07:30,010 by executing this create server method here, 145 00:07:30,010 --> 00:07:34,543 which exists on this HTTP object, which we do require here. 146 00:07:36,200 --> 00:07:39,950 Now "create server" returns us an object, 147 00:07:39,950 --> 00:07:43,530 which has all this server functionality 148 00:07:43,530 --> 00:07:46,630 that is required under the hood built in. 149 00:07:46,630 --> 00:07:49,300 And we can now store that in a number constant 150 00:07:49,300 --> 00:07:53,223 or a variable, which I will call "server" here. 151 00:07:55,750 --> 00:07:58,970 Now on that server that was created for us, 152 00:07:58,970 --> 00:08:03,250 we can now call the built-in listen method. 153 00:08:03,250 --> 00:08:06,900 And the idea here is that we first create a server 154 00:08:06,900 --> 00:08:10,050 that knows how to handle incoming requests 155 00:08:10,050 --> 00:08:12,520 and send back responses. 156 00:08:12,520 --> 00:08:13,970 And then in the next step, 157 00:08:13,970 --> 00:08:18,970 we start listening on a so-called port number. 158 00:08:19,640 --> 00:08:20,870 Now that's a new concept. 159 00:08:20,870 --> 00:08:23,730 And for that, let me quickly talk about addresses, 160 00:08:23,730 --> 00:08:26,683 which we can enter in the browser to reach a website. 161 00:08:27,570 --> 00:08:29,940 We can enter something like Amazon.com. 162 00:08:29,940 --> 00:08:31,720 That's what we saw before. 163 00:08:31,720 --> 00:08:34,330 And this will then send a request 164 00:08:34,330 --> 00:08:38,159 to Amazon's servers or server, 165 00:08:38,159 --> 00:08:40,563 which then returns the website. 166 00:08:41,440 --> 00:08:43,659 Now when working with a network, 167 00:08:43,659 --> 00:08:46,810 which is what we do when we do send requests, 168 00:08:46,810 --> 00:08:49,740 then we also have the concept of ports. 169 00:08:49,740 --> 00:08:52,530 And every computer has different ports, 170 00:08:52,530 --> 00:08:56,450 which are basically entry points to that computer 171 00:08:56,450 --> 00:08:59,310 that are either opened or closed. 172 00:08:59,310 --> 00:09:01,780 Now by default, for most computers, 173 00:09:01,780 --> 00:09:06,300 most ports are closed by default for security reasons, 174 00:09:06,300 --> 00:09:09,723 because you want to have as little entry points as possible. 175 00:09:10,630 --> 00:09:13,700 Now, when you send the request to Amazon.com, 176 00:09:13,700 --> 00:09:16,490 by default, you send that to port 80, 177 00:09:16,490 --> 00:09:19,100 which can also be expressed by adding a colon 178 00:09:19,100 --> 00:09:22,793 after this name and then 80 here. 179 00:09:23,650 --> 00:09:24,720 No, actually by default, 180 00:09:24,720 --> 00:09:27,760 you typically use 4-4-3 to be precise 181 00:09:27,760 --> 00:09:30,190 because that uses SSL, 182 00:09:30,190 --> 00:09:33,860 which sends the request in a encrypted secure way. 183 00:09:33,860 --> 00:09:38,860 But 80 is also a common port to send an unencrypted request, 184 00:09:38,915 --> 00:09:40,820 and you can test this on your own. 185 00:09:40,820 --> 00:09:44,080 If you enter Amazon.com, colon, 80, 186 00:09:44,080 --> 00:09:45,440 and you hit enter, 187 00:09:45,440 --> 00:09:49,100 you will see that you still visit amazon.com. 188 00:09:49,100 --> 00:09:54,050 If you would instead enter Amazon.com, colon, 100, 189 00:09:54,050 --> 00:09:56,230 it would fail instead. 190 00:09:56,230 --> 00:09:57,580 So this really works. 191 00:09:57,580 --> 00:09:59,443 And this port concept is important. 192 00:10:00,310 --> 00:10:02,120 Now, 80 is the default, 193 00:10:02,120 --> 00:10:04,480 which is why you don't have to enter it. 194 00:10:04,480 --> 00:10:06,710 Instead if you just enter amazon.com, 195 00:10:06,710 --> 00:10:10,560 it's basically sending this to port 80 or 4-4-3, 196 00:10:10,560 --> 00:10:13,690 to be precise, as I mentioned by default. 197 00:10:13,690 --> 00:10:18,140 The browser adds the port for you under the hood, so to say, 198 00:10:18,140 --> 00:10:21,910 but when working with Node JS and creating your own server, 199 00:10:21,910 --> 00:10:23,960 you need to let Node JS know 200 00:10:23,960 --> 00:10:28,110 on which port you want to listen for incoming requests. 201 00:10:28,110 --> 00:10:32,970 And for this cue, "listen," we pass such a port number 202 00:10:32,970 --> 00:10:35,483 as a first parameter value. 203 00:10:36,580 --> 00:10:37,530 Now by default, 204 00:10:37,530 --> 00:10:40,720 we often use something like 3,000 here. 205 00:10:40,720 --> 00:10:43,810 That is a port which is typically not opened, 206 00:10:43,810 --> 00:10:45,470 but during development, 207 00:10:45,470 --> 00:10:48,190 for playing around with our server 208 00:10:48,190 --> 00:10:50,490 and testing whether everything works, 209 00:10:50,490 --> 00:10:54,150 we typically want to use such a non-default port 210 00:10:54,150 --> 00:10:57,450 so that we don't clash with any other services 211 00:10:57,450 --> 00:11:00,763 that might be running on our local development machine. 212 00:11:01,810 --> 00:11:05,740 That's why we pass 3,000 as a number to "listen" 213 00:11:05,740 --> 00:11:09,330 to tell Node JS that once this code executes, 214 00:11:09,330 --> 00:11:11,020 we want to create a server, 215 00:11:11,020 --> 00:11:16,020 and we want to listen to incoming requests on port 3,000. 216 00:11:16,030 --> 00:11:18,580 If we would then later deploy it as code 217 00:11:18,580 --> 00:11:21,490 and move it onto a real remote machine, 218 00:11:21,490 --> 00:11:24,360 which we rented from some hosting provider, 219 00:11:24,360 --> 00:11:29,360 we would swap this for 80 or 4-4-3 in stat basically. 220 00:11:29,500 --> 00:11:33,343 But for development, we can use something like 3,000. 221 00:11:34,450 --> 00:11:36,050 And that was a lot of talking 222 00:11:36,050 --> 00:11:39,170 about creating such a server and listening, 223 00:11:39,170 --> 00:11:42,270 but it is super important that you do understand 224 00:11:42,270 --> 00:11:44,200 what this code does, 225 00:11:44,200 --> 00:11:46,530 because if you don't understand that, 226 00:11:46,530 --> 00:11:51,450 understanding the other concepts will be very, very hard. 227 00:11:51,450 --> 00:11:53,480 Now with that we are creating a server, 228 00:11:53,480 --> 00:11:54,550 and we are listening, 229 00:11:54,550 --> 00:11:57,600 but this server won't be finished yet 230 00:11:57,600 --> 00:12:00,110 because whilst it will be a valid server 231 00:12:00,110 --> 00:12:01,340 that's created here, 232 00:12:01,340 --> 00:12:04,550 this server has no instructions 233 00:12:04,550 --> 00:12:06,070 for what to do 234 00:12:06,070 --> 00:12:08,970 if an actual request reaches it. 235 00:12:08,970 --> 00:12:12,270 We don't define what our response should be, 236 00:12:12,270 --> 00:12:15,240 or if we maybe want to extract some data 237 00:12:15,240 --> 00:12:17,300 from the incoming request. 238 00:12:17,300 --> 00:12:21,410 And the entire reason for using a server-side language 239 00:12:21,410 --> 00:12:25,350 like Node JS is that we want to have more control 240 00:12:25,350 --> 00:12:27,980 and that we maybe want to extract some data 241 00:12:27,980 --> 00:12:30,210 from the incoming request. 242 00:12:30,210 --> 00:12:31,700 And therefore as a next step, 243 00:12:31,700 --> 00:12:35,023 let's now see how we can add more instructions here.