0
1
00:00:00,900 --> 00:00:08,580
Now in the last lesson, we looked at how we can use this app.get method, and using a callback function,
1

2
00:00:08,880 --> 00:00:17,100
we can tap into the request that was made to our server, and we managed to log it into our console, and
2

3
00:00:17,100 --> 00:00:23,970
then we looked at how we can send back a response that will get rendered on our browser.
3

4
00:00:24,270 --> 00:00:30,690
Now in this lesson, I want to talk more about this first parameter for our app.get method.
4

5
00:00:30,690 --> 00:00:34,830
Now you can see here we're targeting the home route.
5

6
00:00:34,850 --> 00:00:43,770
Now it's a little bit awkward, because in British English we pronounce route, as in R O U T E, as route,
6

7
00:00:44,130 --> 00:00:48,370
but that can also sound like root as in R O O T.
7

8
00:00:48,420 --> 00:00:54,510
So from now on I'm actually going to use the American pronunciation, which is very odd for me, but it
8

9
00:00:54,510 --> 00:00:59,830
might help you differentiate when I'm trying to say root or when I'm trying to say route.
9

10
00:00:59,850 --> 00:01:06,980
So from now on, when I say root I mean R O O T, when I say route I mean R O U T E.
10

11
00:01:07,140 --> 00:01:11,690
So I hope that makes it easier for you guys to figure out what it is I'm trying to convey.
11

12
00:01:12,000 --> 00:01:18,740
So this first parameter specifies the route that we are going to respond to.
12

13
00:01:18,750 --> 00:01:25,620
So that means when we get a get request from a browser that is targeting this route, which is the home
13

14
00:01:25,620 --> 00:01:29,440
route, then we're going to respond with this callback.
14

15
00:01:29,490 --> 00:01:32,510
Now we can respond to different routes.
15

16
00:01:32,520 --> 00:01:39,270
So for example, if I create another app.get method, and, instead of targeting the home route, I target maybe the
16

17
00:01:39,270 --> 00:01:41,390
contact route,
17

18
00:01:41,940 --> 00:01:44,900
so that simply is /contact,
18

19
00:01:44,910 --> 00:01:52,130
then I can create a callback that has a req and a res, request and a response,
19

20
00:01:52,350 --> 00:01:54,490
and I should really change this
20

21
00:01:54,540 --> 00:02:01,830
now that I've changed the parameter to res, and in this case our response is again going to be to send some
21

22
00:02:01,830 --> 00:02:11,410
information. And the information I'm going to send is simply, “Contact me at angela@gmail.com”.
22

23
00:02:11,450 --> 00:02:14,320
So now we've created another route.
23

24
00:02:14,370 --> 00:02:18,420
Now, as you can imagine, a lot of programming is all about forward planning.
24

25
00:02:18,420 --> 00:02:24,450
So it's kind of saying like what if somebody tried to go to our home page.
25

26
00:02:24,450 --> 00:02:26,950
Well then we're going to respond with this.
26

27
00:02:27,030 --> 00:02:30,660
Now what if somebody tried to go to the contact page.
27

28
00:02:30,780 --> 00:02:33,300
Well then in that case we'll respond with this.
28

29
00:02:33,300 --> 00:02:43,040
So if I hit save now, and I again quit my server, restart my server, and we go on to port 3000,
29

30
00:02:43,380 --> 00:02:49,170
then you can see that when I go to port 3000, this is my home route that I'm hitting up.
30

31
00:02:49,200 --> 00:02:52,990
It's making the request to this location.
31

32
00:02:53,070 --> 00:03:00,690
Now if I go to my contact route, so /contact, and I hit enter, then you can see I'm hitting
32

33
00:03:00,690 --> 00:03:02,230
up a different route,
33

34
00:03:02,490 --> 00:03:05,890
and that gets caught by these lines of code.
34

35
00:03:06,210 --> 00:03:13,050
And in that case my server sends back the information where it says, “Contact me at angela@gmail.com”,
35

36
00:03:13,560 --> 00:03:16,440
and that's what we see on our web page.
36

37
00:03:16,560 --> 00:03:22,980
So you can specify in this scenario what should happen, in this scenario what should happen, and you can
37

38
00:03:22,980 --> 00:03:28,020
start setting up the code for a lot of different routes.
38

39
00:03:28,020 --> 00:03:30,420
So now here's a challenge.
39

40
00:03:30,420 --> 00:03:38,490
I want you to create a new route so that when I go to the About page of my web site at localhost, I want
40

41
00:03:38,490 --> 00:03:41,950
to be able to see a quick brief bio for who you are,
41

42
00:03:41,970 --> 00:03:42,290
right?
42

43
00:03:42,300 --> 00:03:44,450
So this is like a personal page essentially.
43

44
00:03:44,490 --> 00:03:52,860
The home page just says, “Hello, world”, the contact page has my contact details, and then when I go to the
44

45
00:03:52,860 --> 00:03:58,850
About page it should now have a brief bio of who owns this web site.
45

46
00:03:58,890 --> 00:04:07,050
So go ahead and set up a new route for the About page and send back some information about yourself.
46

47
00:04:07,140 --> 00:04:12,480
So pause the video now and complete that challenge.
47

48
00:04:12,480 --> 00:04:12,810
All right.
48

49
00:04:12,810 --> 00:04:19,130
So we've already set up two routes, one for the home route and one for the contact route.
49

50
00:04:19,350 --> 00:04:21,460
So now we're going to set up a new one.
50

51
00:04:21,510 --> 00:04:28,200
And, again, we're going to target get requests that are made to the about route.
51

52
00:04:28,380 --> 00:04:36,150
And when that does happen, we're going to use a callback function with a request and a response.
52

53
00:04:36,150 --> 00:04:41,490
Now the response we're going to make is, again, we're going to send some information, and we're going to
53

54
00:04:41,490 --> 00:04:49,070
say, “My name is Angela and I love beer and code.”
54

55
00:04:49,080 --> 00:04:54,140
So now our server is able to respond to three routes.
55

56
00:04:54,240 --> 00:04:59,220
So if the user goes to our home page, this happens, if the user goes to our contact page,
56

57
00:04:59,220 --> 00:04:59,900
this happens,
57

58
00:04:59,990 --> 00:05:03,920
and if the user goes to the About page, then this should happen.
58

59
00:05:03,920 --> 00:05:07,850
So let's hit save, let's stop our server,
59

60
00:05:08,030 --> 00:05:12,700
start our server with the new code, and refresh.
60

61
00:05:12,920 --> 00:05:17,210
Now our About page has a response from our server.
61

62
00:05:17,450 --> 00:05:21,240
When we go to localhost:3000/about, we get back,
62

63
00:05:21,260 --> 00:05:24,980
“My name is Angela and I love beer and code.”
63

64
00:05:25,520 --> 00:05:32,360
So you can set up basically as many routes as you wish, and that means that you can start building up
64

65
00:05:32,360 --> 00:05:35,730
your web site to have a lot of different pages.
65

66
00:05:35,750 --> 00:05:41,690
For example, you can have a page about your hobbies, you can have a page about your CV, and you can see that
66

67
00:05:41,690 --> 00:05:44,930
this is a lot easier than creating a new index.html,
67

68
00:05:44,950 --> 00:05:52,040
about.html, a contact.html, that we were doing in the earlier modules when we're
68

69
00:05:52,040 --> 00:05:54,970
relying only on HTML.
69

70
00:05:55,010 --> 00:06:03,090
Now, just before I end this lesson, I want to show you something that I've kept to myself until now.
70

71
00:06:03,320 --> 00:06:11,210
Now I hope by this point you've realized that it's pretty painful to constantly having to end your server
71

72
00:06:11,300 --> 00:06:16,780
and restart your server every single time you add some new code to the 
72

73
00:06:16,840 --> 00:06:17,780
server.js.
73

74
00:06:17,900 --> 00:06:25,730
Now if you head over to nodemon.io, this is a utility that you can install using NPM that will
74

75
00:06:25,790 --> 00:06:32,900
monitor for changes in your source code, and it will automatically restart your server when it detects
75

76
00:06:32,930 --> 00:06:34,610
any changes in your code.
76

77
00:06:34,610 --> 00:06:42,350
So this will save us from insanity, and all you have to do is just go into your Hyper Terminal, and type
77

78
00:06:42,500 --> 00:06:46,690
these commands ‘npm install -g nodemon’.
78

79
00:06:46,700 --> 00:06:49,020
Now it doesn't matter where you install this.
79

80
00:06:49,040 --> 00:06:51,070
It doesn't have to be inside your package.
80

81
00:06:51,080 --> 00:06:54,960
It can be in your root or in your home directory.
81

82
00:06:54,980 --> 00:06:59,420
Once you've installed it, it will be available across all of your projects.
82

83
00:06:59,420 --> 00:07:04,280
So let's head over to our terminal, and we can say ‘npm install -g
83

84
00:07:04,680 --> 00:07:14,840
nodemon’, and hit enter, and it will take a little while to install, and now when it's done we can go to
84

85
00:07:14,990 --> 00:07:20,380
the location where our server.js resides, which happens to be my-express-server,
85

86
00:07:20,570 --> 00:07:23,000
and then we can simply say ‘nodemon’
86

87
00:07:23,090 --> 00:07:27,830
and then the file name of our server, which happens to be server.js.
87

88
00:07:27,920 --> 00:07:33,710
So now, once I hit enter, Nodemon activates, and it will start monitoring for changes.
88

89
00:07:33,710 --> 00:07:41,390
So if I go in here and I add another route, say app.get, let's say this is my hobbies page, and I have
89

90
00:07:41,390 --> 00:07:53,870
a callback, req, res, and we res.send maybe a ul that has a li, say something like coffee,
90

91
00:07:54,140 --> 00:07:55,690
code,
91

92
00:07:55,980 --> 00:08:05,230
and beer. So now that I'm done with my code, we need to watch over here. When I save my file here,
92

93
00:08:05,300 --> 00:08:11,110
so my shortcut is Command S, yours might be different depending on whether you're on Windows or Mac,
93

94
00:08:11,240 --> 00:08:19,910
but when I save this server.js file, then Nodemon will restart automatically, and it will keep to the port
94

95
00:08:19,970 --> 00:08:22,090
that we've specified in our server.
95

96
00:08:22,250 --> 00:08:29,710
So that means that my server is active and refreshed to the latest version of the code at all times,
96

97
00:08:30,080 --> 00:08:35,420
and I don't have to go through that painful process of Command C, restarting. It gets a little bit
97

98
00:08:35,420 --> 00:08:36,870
tiring after a while.
98

99
00:08:36,890 --> 00:08:38,670
So that is Nodemon.
99

100
00:08:38,930 --> 00:08:43,430
It will save your sanity and it's a really really cool tool to use.
100

101
00:08:43,460 --> 00:08:50,720
So, in this lesson, we learnt all about routes that we can set up to preempt what the user might try to
101

102
00:08:50,720 --> 00:08:53,810
navigate to using their browser.
102

103
00:08:53,840 --> 00:09:00,050
Now, in the next lesson, we're going to be building a calculator web site, and we're going to use what
103

104
00:09:00,050 --> 00:09:05,150
we learnt in these lessons so far to build a full web site.
104

105
00:09:05,180 --> 00:09:08,550
It's going to look pretty simple but it's going to work great.
105

106
00:09:08,600 --> 00:09:15,440
And in the process we'll see how we can get our server to do a lot of the code processing and make all
106

107
00:09:15,440 --> 00:09:19,750
of the code run on our backend rather than on our front end.
107

108
00:09:19,880 --> 00:09:22,990
So for all of that and more, I’ll see you on the next lesson.