0
1
00:00:00,810 --> 00: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

2
00:00:08,040 --> 00:00:12,270
3000 for any browsers who are trying to get in touch with it.
2

3
00:00:12,420 --> 00:00:19,020
Unfortunately we got an error, where our browser said, “I got in touch with your server at this location
3

4
00:00:19,080 --> 00:00:21,930
3000, but I couldn't get anything back.
4

5
00:00:21,990 --> 00:00:26,690
I can't display you anything because your server isn't giving me anything to display.”
5

6
00:00:26,940 --> 00:00:30,250
So that's what we're going to address in this lesson.
6

7
00:00:30,270 --> 00: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

8
00:00:38,040 --> 00:00:38,700
site.
8

9
00:00:38,700 --> 00:00:40,000
So it's the home page.
9

10
00:00:40,050 --> 00:00:43,140
It's the equivalent of going to google.com,
10

11
00:00:43,140 --> 00:00:43,570
right?
11

12
00:00:43,740 --> 00:00:49,050
But in this case our domain is simply called localhost:3000.
12

13
00:00:49,230 --> 00:00:57,450
So this / just represents localhost:3000/, which is the route, or the
13

14
00:00:57,450 --> 00:00:59,720
home page, of our web site.
14

15
00:00:59,910 --> 00:01:07,500
And, again, if I transform it to www.google.com/, then this will go to the home page
15

16
00:01:07,590 --> 00:01:10,700
of Google, and that is what we call the route.
16

17
00:01:10,710 --> 00: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

18
00:01:21,060 --> 00:01:29,430
to get some data for this location, and Google servers, when it sees that request, it will send our browser
18

19
00:01:29,500 --> 00:01:37,140
a response, and that response includes the HTML, the CSS and the Javascript that’s needed to render
19

20
00:01:37,230 --> 00:01:38,700
this web site.
20

21
00:01:38,750 --> 00:01:44,430
Now, our server is currently not sending anything back when our browser makes the get requests.
21

22
00:01:44,490 --> 00:01:51,810
So let's change that. Just above the app.listen, we're going to say app.get.
22

23
00:01:52,080 --> 00:01:59,100
And this is a method that's provided by Express that allows us to specify what should happen when a
23

24
00:01:59,100 --> 00:02:04,940
browser gets in touch with our server and makes a get request.
24

25
00:02:04,950 --> 00:02:10,770
Now the first parameter it takes is the location of the get request.
25

26
00:02:10,770 --> 00:02:18,360
So when we type localhost:3000, the get request is being sent to the route of our web site, which
26

27
00:02:18,360 --> 00:02:21,380
is represented by a forward slash.
27

28
00:02:21,630 --> 00:02:24,660
So this is basically our home page.
28

29
00:02:24,660 --> 00:02:31,710
Now when that get request happens, we can trigger a callback function, and this callback function can
29

30
00:02:31,710 --> 00:02:36,610
have two parameters: request and response.
30

31
00:02:36,900 --> 00:02:45,540
So this method, app.get, defines what should happen when someone makes a get request to the home
31

32
00:02:45,690 --> 00:02:46,350
route.
32

33
00:02:46,470 --> 00:02:48,650
So that's the first parameter.
33

34
00:02:48,780 --> 00:02:57,030
And then there's a callback function that tells the server what to do when that request happens.
34

35
00:02:57,060 --> 00:03:04,530
So let's printout this request object that we get when the callback gets triggered and see what it looks
35

36
00:03:04,530 --> 00:03:04,880
like.
36

37
00:03:04,980 --> 00: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

38
00:03:11,970 --> 00:03:17,310
server by hitting Control C, and then I'm going to restart it by saying node 
38

39
00:03:17,360 --> 00:03:17,870
server.js,
39

40
00:03:18,060 --> 00:03:21,450
with the changes that we've implemented in here.
40

41
00:03:22,860 --> 00: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

42
00:03:29,820 --> 00: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

43
00:03:35,880 --> 00:03:42,040
a whole bunch of information that's packaged into this request which is being logged.
43

44
00:03:42,180 --> 00:03:48,780
And this is all of the information that's associated with the request that was made to our server.
44

45
00:03:48,870 --> 00:03:54,850
So, for example, you can see that my browser accepts the following languages, and these are the languages that 
45

46
00:03:54,900 --> 00:04:01,180
I'm happy to read, for example simplified Chinese or English.
46

47
00:04:01,470 --> 00:04:08,400
You can also see other things such as what was the URL that I accessed when I triggered this request,
47

48
00:04:08,700 --> 00:04:14,800
and it's got so much more information all about that request that was made to the server.
48

49
00:04:15,000 --> 00:04:18,800
Now the second object here is the response.
49

50
00:04:18,840 --> 00:04:26,760
This is the response that outcome server can make when the request gets triggered at this home location.
50

51
00:04:26,760 --> 00:04:30,090
So currently our server isn't responding with anything,
51

52
00:04:30,330 --> 00:04:32,320
and that's why we're getting this error over here.
52

53
00:04:32,330 --> 00:04:36,220
In fact, Chrome actually tells you that localhost didn't send any data,
53

54
00:04:36,240 --> 00:04:40,390
it’s got an empty response. So let's change that.
54

55
00:04:40,500 --> 00: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

56
00:04:47,790 --> 00:04:49,520
to send a response.
56

57
00:04:49,520 --> 00: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

58
00:04:56,730 --> 00: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

59
00:05:06,480 --> 00:05:10,050
you can see that we see the word ‘Hello’ in our browser.
59

60
00:05:10,350 --> 00:05:19,140
And that's because when we typed in localhost:3000, we specified a location of a server.
60

61
00:05:19,380 --> 00: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

62
00:05:27,540 --> 00:05:35,940
And when that request gets made at that home location, then this callback gets triggered, and we send
62

63
00:05:36,210 --> 00:05:40,510
the browser a response, which is just the plain text of ‘Hello’.
63

64
00:05:40,860 --> 00:05:45,990
Now that gets sent back to our browser and it renders it on screen.
64

65
00:05:46,200 --> 00:05:48,770
So you don't have to just send plain text.
65

66
00:05:48,780 --> 00:05:50,450
You can actually send HTML.
66

67
00:05:50,460 --> 00:05:52,880
So let's try sending an h1
67

68
00:05:52,920 --> 00:05:56,330
in this case. Let’s say ‘Hello, world!’
68

69
00:05:58,750 --> 00:06:04,450
And this is just h1 that's wrapped inside some quotation marks that we're going to send as our
69

70
00:06:04,450 --> 00:06:05,770
response.
70

71
00:06:05,770 --> 00:06:12,270
So now if I hit save, I quit my server again, and run my server with the new code.
71

72
00:06:12,370 --> 00:06:19,640
And now we go to localhost:3000, we get the h1 being sent back with ‘Hello, world!’
72

73
00:06:19,690 --> 00:06:27,550
Now, in most cases, when people are working with Express and Node.js, you'll see these two parameters
73

74
00:06:27,550 --> 00:06:28,300
shortened.
74

75
00:06:28,450 --> 00:06:36,160
So, as we talked about before, instead of saying event you can say evt, or e, because you can specify
75

76
00:06:36,160 --> 00:06:38,290
whatever you want for these names.
76

77
00:06:38,380 --> 00:06:44,550
But usually what you'll see is req for request and res for response.
77

78
00:06:44,680 --> 00:06:47,880
And that just makes it short but understandable.
78

79
00:06:47,920 --> 00:06:54,040
And this is basically best practice for working with Express, and this is what you'll see out there when
79

80
00:06:54,040 --> 00:06:58,780
you find other people's code and they are creating their Express servers.
80

81
00:06:58,780 --> 00: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

82
00:07:05,200 --> 00:07:07,650
of how callbacks work.
82

83
00:07:07,820 --> 00: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

84
00:07:15,670 --> 00:07:19,880
we talked about Javascript callbacks and higher order functions.
84

85
00:07:19,930 --> 00: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

86
00:07:25,690 --> 00:07:34,000
how we're able to provide an input into this callback function and how this input can get sent back
86

87
00:07:34,000 --> 00:07:37,650
to us when this callback is triggered.
87

88
00:07:37,900 --> 00:07:44,590
And it's a really good idea to create this yourself, mess around with it and send different responses,
88

89
00:07:44,620 --> 00:07:53,190
or log the requests, and just make sure that you're comfortable with this syntax and how it works.
89

90
00:07:53,320 --> 00: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

91
00:07:59,350 --> 00:08:07,150
home page, so we can start creating a multi page web site really easily by adding more lines of code
91

92
00:08:07,480 --> 00:08:09,050
into our server.
92

93
00:08:09,310 --> 00:08:12,580
So for all of that and more, I’ll see you on the next lesson.