WEBVTT 0 00:01.490 --> 00:08.590 This is the exciting bit because now we're going to create a server 😕! But don't panic, don't feel overwhelmed. 1 00:08.930 --> 00:11.470 This course is not about server side code at all. 2 00:11.870 --> 00:12.950 I'm just trying to show you... 3 00:12.950 --> 00:16.730 remember, I'm just trying to show you the difference between using multipart and the default encoding 4 00:16.730 --> 00:17.080 type. 5 00:17.360 --> 00:20.300 But in order to do so, we need a server, so kind of call this a bonus. 6 00:21.050 --> 00:24.590 But you don't have to fully understand how server side code works. 7 00:24.770 --> 00:32.930 So in our HTML, we have seen that when we submit this form, we're submitting it to a URL, a server, on... 8 00:32.930 --> 00:35.790 our localhost, at port 8000. 9 00:35.930 --> 00:40.220 And right now, um, let's just open this with Live Server. 10 00:41.870 --> 00:42.760 (sound: well, this is awkward) 11 00:42.890 --> 00:45.630 You know what, this is actually not very nice looking, is it? 12 00:45.790 --> 00:47.510 And if I just got here... 13 00:48.950 --> 00:50.660 and we put paragraph tags. 14 00:52.170 --> 00:54.230 I know this isn't the best way. 15 00:56.230 --> 00:59.120 But, it hopefully just makes it look better. 16 01:00.750 --> 01:01.960 Let's go back. There you go. 17 01:02.130 --> 01:02.920 It looks a lot better. 18 01:03.000 --> 01:08.700 (sound: yeah) If we now try and submit this, as you see we're going to get an error because we haven't defined... 19 01:08.700 --> 01:09.900 our localhost, have we? 20 01:09.900 --> 01:11.180 We haven't defined that server. 21 01:11.340 --> 01:12.720 So that's exactly what we're going to do now. 22 01:12.990 --> 01:13.860 So let's go here. 23 01:14.130 --> 01:14.690 Right now... 24 01:14.700 --> 01:18.690 I want to create a Node server. It's going to be super exciting. 25 01:18.840 --> 01:20.960 Don't worry if you don't fully understand what's going on. 26 01:20.970 --> 01:24.720 This is not a course about server side code, but I just want you to know what it is I'm doing. 27 01:24.720 --> 01:32.580 The first step, right, is we have to create a server on our local machine that's listening on post 8000... 28 01:32.580 --> 01:36.110 and we can set up any file to do this, a JavaScript file. 29 01:36.480 --> 01:39.050 So let's just call ours, I don't know, echo.js. 30 01:39.720 --> 01:45.960 Okay, now within Node there's one very, very key module and this module is called HTTP. 31 01:46.140 --> 01:51.300 You can kind of think of a "module" as an overriding "object" that gives us access to a lot of properties 32 01:51.300 --> 01:51.940 and methods. 33 01:51.990 --> 01:58.310 So if we require this HTTP into our file, it just means we get access to a whole lot of things. 34 01:58.320 --> 02:03.810 And one of these things is a another object called the Server object, and that allows us to set up... 35 02:03.990 --> 02:04.510 a server. 36 02:04.680 --> 02:05.780 So let's get into it. 37 02:06.570 --> 02:09.870 The first thing I want to do is bring in that HTTP object. 38 02:10.380 --> 02:13.310 We use the keyword "require" and there we go, 39 02:13.440 --> 02:15.950 it really is as simple as this. 40 02:17.140 --> 02:20.020 Now I want us to define our server. 41 02:22.890 --> 02:32.730 We know that the host name, hostname, we defined as "localhost", so it's just going to be from our local... 42 02:32.730 --> 02:37.380 machine, and the port name or the port number was 8000, 43 02:37.860 --> 02:38.150 right. 44 02:38.190 --> 02:41.940 If we go back to our index file, there we go. Its "localhost" and its 8000. 45 02:42.720 --> 02:43.750 That's all we've done here. 46 02:44.220 --> 02:48.570 Now I want to define our server. 47 02:50.250 --> 02:51.010 How do we do that 🤷‍♂️? 48 02:51.030 --> 02:55.140 Well, let's create a new variable, this time we're going to call it server. 49 02:56.570 --> 03:05.810 We have to access this HTTP module and we put that entire module into a variable called HTTP. On that... 50 03:05.840 --> 03:09.720 object, we have a method called createServer(). 51 03:09.980 --> 03:11.680 OK, so this is nothing I've written. 52 03:11.690 --> 03:13.640 This comes purely from Node.js. 53 03:15.330 --> 03:21.390 Now we're going to use the arrow syntax here, just to set up our entire server. If you don't know what... 54 03:21.390 --> 03:24.300 this is, please check out my JavaScript Complete Grandmaster ♟ course. 55 03:24.540 --> 03:28.430 Now, this createServer() takes two inputs, two arguments. 56 03:28.440 --> 03:30.360 It takes the requests, 57 03:30.360 --> 03:35.730 and when the request is finished being processed by the server, the server gives us a response back. 58 03:35.740 --> 03:38.000 Okay, so a request and a response... 59 03:38.130 --> 03:39.330 those are what those two are. 60 03:39.990 --> 03:41.190 What's the first thing I want to do? 61 03:41.200 --> 03:42.600 I want to console log a few things out. 62 03:42.800 --> 03:45.410 It's always just good to know what's happening when you're coding. 63 03:45.990 --> 03:49.200 So let's console log, let's use template literals... 64 03:50.230 --> 03:54.430 let's create a newline, and then I want to bring in those objects, right, we've created. We've got... 65 03:54.430 --> 04:00.370 this object, the request object in a variable called "req" and the response object in a variable called... 66 04:00.370 --> 04:03.730 "res", so I want to access that right now. 67 04:03.850 --> 04:07.530 And in order to do so, I want us to use the dollar sign $ and curly brackets {}. 68 04:07.540 --> 04:10.420 That's why, or that's the benefit of using template literals. 69 04:10.840 --> 04:11.370 Here we go. 70 04:11.470 --> 04:15.570 I want to access our request object, and just see the method of our request. 71 04:15.580 --> 04:18.460 We know we've set it as POST. If we go to our index... 72 04:19.630 --> 04:21.340 the method is set to POST. 73 04:22.640 --> 04:23.550 But I want to prove it. 74 04:23.720 --> 04:29.210 I want us to look at the request object and I want us to access its method type. Okay, so that's the first... 75 04:29.210 --> 04:29.920 thing I want to do. 76 04:30.650 --> 04:33.470 And then why don't we just look at the, just to show you something else... 77 04:33.470 --> 04:34.770 we can look at the request URL. 78 04:35.210 --> 04:35.840 Very simple. 79 04:36.020 --> 04:36.860 Very straightforward. 80 04:36.950 --> 04:38.390 That's the first thing I want to console. 81 04:38.930 --> 04:40.760 And then why don't we console log... 82 04:40.760 --> 04:41.710 you can do a whole lot... 83 04:41.720 --> 04:42.700 it's actually really interesting... 84 04:42.710 --> 04:46.530 what what about the headers? We can console log out the headers. Okay, 85 04:46.580 --> 04:47.570 that's something else we can do. 86 04:48.930 --> 04:54.860 Now, I want to start getting a bit more detailed as to what happens when the request gets data. 87 04:55.230 --> 04:56.820 What are we going to do with all the data? 88 04:57.750 --> 05:01.110 So we access our request object, and that has another method called "on". 89 05:01.430 --> 05:06.090 OK, and when we get data, we want to execute a function. 90 05:07.570 --> 05:12.640 And we're going to take that chunk of data, and I just want to console log it out. 91 05:14.040 --> 05:15.390 So let's say "BODY"... 92 05:16.870 --> 05:19.180 and let's console log out each chunk. 93 05:20.980 --> 05:21.540 There we go. 94 05:22.880 --> 05:29.750 The final thing I want to do is when we get the response, let's just say we want to end with a message, 95 05:29.900 --> 05:39.080 "Hello World". Whew, I know this might be a bit confusing to you, but again, this is not about server side... 96 05:39.080 --> 05:39.380 code. 97 05:39.380 --> 05:43.010 I'm setting this up very quickly, giving you a few things to look at and think about. 98 05:44.000 --> 05:45.950 But we haven't quite finished. 99 05:45.950 --> 05:50.840 We've defined our server. Oh, I've got two headings the same. Define our server... 100 05:51.770 --> 05:57.210 hostname and port. Define our server request and response. 101 05:58.310 --> 06:01.700 The final thing we need to do, is we need to use our server, 102 06:01.700 --> 06:02.080 right. 103 06:02.150 --> 06:06.100 We've kind of set up its structure, but we haven't yet implemented it. 104 06:06.230 --> 06:07.550 We haven't told it to do anything. 105 06:07.550 --> 06:10.220 So let's access our server variable that we've just defined... 106 06:10.670 --> 06:18.590 and on there is another method called "listen". This is what we want. And we want it to listen on the... 107 06:18.590 --> 06:18.850 port... 108 06:18.860 --> 06:22.100 number we defined above, and on the hostname... 109 06:22.130 --> 06:23.120 we defined above. 110 06:24.290 --> 06:26.600 And, of course, the callback. 111 06:28.020 --> 06:28.830 What do we want to happen here? 112 06:28.870 --> 06:37.830 Well, let's just console log when this is successful, "Server" ... let's just do template literals again, Server is running... 113 06:38.190 --> 06:39.960 at http://... 114 06:41.660 --> 06:47.740 localhost, and just for fun, let's just check we have the right port. 115 06:47.940 --> 06:50.090 Whew, okay, do you think this is going to look OK? 116 06:50.120 --> 06:51.640 I think we've pretty much done, right. 117 06:52.660 --> 06:54.310 That should work. 118 06:54.470 --> 06:56.000 All we need to do now is run a terminal. 119 06:56.110 --> 06:56.920 Let me just open it up. 120 06:59.110 --> 06:59.650 So here we go. 121 06:59.680 --> 07:04.870 We're in our terminal. All we need to do is use the keyword "node", and then we need to run our file. And in order to run... 122 07:04.870 --> 07:08.220 the file, we just type it out into the terminal. And there we go. 123 07:08.530 --> 07:15.250 We've already got servers running at localhost:8000 🥂. (sound: ooh yeah) 124 07:15.340 --> 07:16.370 There's our code, right? 125 07:16.390 --> 07:17.350 We're listening on the port... 126 07:17.770 --> 07:22.840 and when the server is set up, and it is listening and it's all up and running, we execute this console log... 127 07:22.840 --> 07:26.320 on it's callback, which basically is telling us that the server is running. 128 07:29.260 --> 07:30.100 Isn't this awesome? 129 07:30.670 --> 07:31.530 Anyway, well done. 130 07:31.540 --> 07:35.860 If this is the first time you've ever set up a server, if you haven't even installed Node on your... 131 07:35.860 --> 07:37.950 PC, don't worry. 132 07:37.960 --> 07:39.100 Just watch these lectures. 133 07:39.100 --> 07:42.490 Just follow along. Because we need to stick with the course... 134 07:42.490 --> 07:44.410 and that is all about forms 📝, it's not about server code. 135 07:44.860 --> 07:50.230 So in the next lecture, let's switch back to our form 📝, and let's start playing around with... 136 07:50.320 --> 07:54.070 multipart and the default encoding type. See you now.