WEBVTT 0 00:00.810 --> 00:07.980 Now in the last lesson, we set up and we started our server, and our server was listening on the port 1 00:08.040 --> 00:12.270 3000 for any browsers who are trying to get in touch with it. 2 00:12.420 --> 00:19.020 Unfortunately we got an error, where our browser said, “I got in touch with your server at this location 3 00:19.080 --> 00:21.930 3000, but I couldn't get anything back. 4 00:21.990 --> 00:26.690 I can't display you anything because your server isn't giving me anything to display.” 5 00:26.940 --> 00:30.250 So that's what we're going to address in this lesson. 6 00:30.270 --> 00:38.040 Now, what you have to imagine is that this localhost:3000 is basically the same as the route of any web 7 00:38.040 --> 00:38.700 site. 8 00:38.700 --> 00:40.000 So it's the home page. 9 00:40.050 --> 00:43.140 It's the equivalent of going to google.com, 10 00:43.140 --> 00:43.570 right? 11 00:43.740 --> 00:49.050 But in this case our domain is simply called localhost:3000. 12 00:49.230 --> 00:57.450 So this / just represents localhost:3000/, which is the route, or the 13 00:57.450 --> 00:59.720 home page, of our web site. 14 00:59.910 --> 01:07.500 And, again, if I transform it to www.google.com/, then this will go to the home page 15 01:07.590 --> 01:10.700 of Google, and that is what we call the route. 16 01:10.710 --> 01:20.700 So when we load up a web site, say google.com, then our browser will send a request to Google's servers 17 01:21.060 --> 01:29.430 to get some data for this location, and Google servers, when it sees that request, it will send our browser 18 01:29.500 --> 01:37.140 a response, and that response includes the HTML, the CSS and the Javascript that’s needed to render 19 01:37.230 --> 01:38.700 this web site. 20 01:38.750 --> 01:44.430 Now, our server is currently not sending anything back when our browser makes the get requests. 21 01:44.490 --> 01:51.810 So let's change that. Just above the app.listen, we're going to say app.get. 22 01:52.080 --> 01:59.100 And this is a method that's provided by Express that allows us to specify what should happen when a 23 01:59.100 --> 02:04.940 browser gets in touch with our server and makes a get request. 24 02:04.950 --> 02:10.770 Now the first parameter it takes is the location of the get request. 25 02:10.770 --> 02:18.360 So when we type localhost:3000, the get request is being sent to the route of our web site, which 26 02:18.360 --> 02:21.380 is represented by a forward slash. 27 02:21.630 --> 02:24.660 So this is basically our home page. 28 02:24.660 --> 02:31.710 Now when that get request happens, we can trigger a callback function, and this callback function can 29 02:31.710 --> 02:36.610 have two parameters: request and response. 30 02:36.900 --> 02:45.540 So this method, app.get, defines what should happen when someone makes a get request to the home 31 02:45.690 --> 02:46.350 route. 32 02:46.470 --> 02:48.650 So that's the first parameter. 33 02:48.780 --> 02:57.030 And then there's a callback function that tells the server what to do when that request happens. 34 02:57.060 --> 03:04.530 So let's printout this request object that we get when the callback gets triggered and see what it looks 35 03:04.530 --> 03:04.880 like. 36 03:04.980 --> 03:11.970 So I'm just going to console.log the request, and I'm going to hit save l, and I'm going to terminate my 37 03:11.970 --> 03:17.310 server by hitting Control C, and then I'm going to restart it by saying node 38 03:17.360 --> 03:17.870 server.js, 39 03:18.060 --> 03:21.450 with the changes that we've implemented in here. 40 03:22.860 --> 03:29.810 So now let's head over to our browser and we're going to hit enter on localhost:3000 again, and you'll 41 03:29.820 --> 03:35.880 see that we've got the same errors, but this time when we look inside our console, you can see that there's 42 03:35.880 --> 03:42.040 a whole bunch of information that's packaged into this request which is being logged. 43 03:42.180 --> 03:48.780 And this is all of the information that's associated with the request that was made to our server. 44 03:48.870 --> 03:54.850 So, for example, you can see that my browser accepts the following languages, and these are the languages that 45 03:54.900 --> 04:01.180 I'm happy to read, for example simplified Chinese or English. 46 04:01.470 --> 04:08.400 You can also see other things such as what was the URL that I accessed when I triggered this request, 47 04:08.700 --> 04:14.800 and it's got so much more information all about that request that was made to the server. 48 04:15.000 --> 04:18.800 Now the second object here is the response. 49 04:18.840 --> 04:26.760 This is the response that outcome server can make when the request gets triggered at this home location. 50 04:26.760 --> 04:30.090 So currently our server isn't responding with anything, 51 04:30.330 --> 04:32.320 and that's why we're getting this error over here. 52 04:32.330 --> 04:36.220 In fact, Chrome actually tells you that localhost didn't send any data, 53 04:36.240 --> 04:40.390 it’s got an empty response. So let's change that. 54 04:40.500 --> 04:47.700 Let's actually give it a response. So we can tap into the response object, and we can use the send method 55 04:47.790 --> 04:49.520 to send a response. 56 04:49.520 --> 04:56.730 And we’re simply going to send back “Hello”. And now if I go onto the command line, I quit the previous server 57 04:56.730 --> 05:06.440 session, I've saved the new code, and I run my server again, this time when we head over to localhost:3000, 58 05:06.480 --> 05:10.050 you can see that we see the word ‘Hello’ in our browser. 59 05:10.350 --> 05:19.140 And that's because when we typed in localhost:3000, we specified a location of a server. 60 05:19.380 --> 05:27.400 So when we hit enter, the browser will go to that location and make a request to get some data back. 61 05:27.540 --> 05:35.940 And when that request gets made at that home location, then this callback gets triggered, and we send 62 05:36.210 --> 05:40.510 the browser a response, which is just the plain text of ‘Hello’. 63 05:40.860 --> 05:45.990 Now that gets sent back to our browser and it renders it on screen. 64 05:46.200 --> 05:48.770 So you don't have to just send plain text. 65 05:48.780 --> 05:50.450 You can actually send HTML. 66 05:50.460 --> 05:52.880 So let's try sending an h1 67 05:52.920 --> 05:56.330 in this case. Let’s say ‘Hello, world!’ 68 05:58.750 --> 06:04.450 And this is just h1 that's wrapped inside some quotation marks that we're going to send as our 69 06:04.450 --> 06:05.770 response. 70 06:05.770 --> 06:12.270 So now if I hit save, I quit my server again, and run my server with the new code. 71 06:12.370 --> 06:19.640 And now we go to localhost:3000, we get the h1 being sent back with ‘Hello, world!’ 72 06:19.690 --> 06:27.550 Now, in most cases, when people are working with Express and Node.js, you'll see these two parameters 73 06:27.550 --> 06:28.300 shortened. 74 06:28.450 --> 06:36.160 So, as we talked about before, instead of saying event you can say evt, or e, because you can specify 75 06:36.160 --> 06:38.290 whatever you want for these names. 76 06:38.380 --> 06:44.550 But usually what you'll see is req for request and res for response. 77 06:44.680 --> 06:47.880 And that just makes it short but understandable. 78 06:47.920 --> 06:54.040 And this is basically best practice for working with Express, and this is what you'll see out there when 79 06:54.040 --> 06:58.780 you find other people's code and they are creating their Express servers. 80 06:58.780 --> 07:05.170 Now there is quite a lot of new information in this lesson but a lot of it depends on the understanding 81 07:05.200 --> 07:07.650 of how callbacks work. 82 07:07.820 --> 07:15.670 And so if this is at all confusing, then I recommend you to take a look back at our previous module where 83 07:15.670 --> 07:19.880 we talked about Javascript callbacks and higher order functions. 84 07:19.930 --> 07:25.690 So I'll post a link to that in the resources of this lesson just so that you can remind yourself of 85 07:25.690 --> 07:34.000 how we're able to provide an input into this callback function and how this input can get sent back 86 07:34.000 --> 07:37.650 to us when this callback is triggered. 87 07:37.900 --> 07:44.590 And it's a really good idea to create this yourself, mess around with it and send different responses, 88 07:44.620 --> 07:53.190 or log the requests, and just make sure that you're comfortable with this syntax and how it works. 89 07:53.320 --> 07:59.350 Now in the next lesson, I'm going to show you how to create other routes other than just targeting the 90 07:59.350 --> 08:07.150 home page, so we can start creating a multi page web site really easily by adding more lines of code 91 08:07.480 --> 08:09.050 into our server. 92 08:09.310 --> 08:12.580 So for all of that and more, I’ll see you on the next lesson.