1
00:00:00,018 --> 00:00:02,880
-: In the last section we added our middleware

2
00:00:02,880 --> 00:00:05,730
of morgan and bodyParser.

3
00:00:05,730 --> 00:00:07,110
One thing that we still haven't done yet

4
00:00:07,110 --> 00:00:09,848
is set up our server to handle any actual routes

5
00:00:09,848 --> 00:00:10,681
(mouse clicking)

6
00:00:10,681 --> 00:00:11,550
or respond with any data.

7
00:00:11,550 --> 00:00:14,610
So no matter how I make a request to the server

8
00:00:14,610 --> 00:00:16,988
it's always gonna respond with cannot get slash.

9
00:00:16,988 --> 00:00:18,510
(mouse clicking)

10
00:00:18,510 --> 00:00:21,090
Let's fix that up by adding some route handlers

11
00:00:21,090 --> 00:00:23,220
to our express application.

12
00:00:23,220 --> 00:00:25,140
I like to keep all of my route handlers

13
00:00:25,140 --> 00:00:27,990
outside of this main index.js file

14
00:00:27,990 --> 00:00:30,420
and just keep index.js around for

15
00:00:30,420 --> 00:00:33,000
basically initialization of my server.

16
00:00:33,000 --> 00:00:35,308
Instead, I'm gonna move all of my route handlers

17
00:00:35,308 --> 00:00:38,099
to a separate file, which I'm gonna call

18
00:00:38,099 --> 00:00:40,170
router.js (keyboard tapping)

19
00:00:40,170 --> 00:00:43,140
So I'm making a new file called router.js

20
00:00:43,140 --> 00:00:47,087
inside of my server directory.
(mouse clicking)

21
00:00:47,087 --> 00:00:49,830
Now here's how this router is going to work.

22
00:00:49,830 --> 00:00:53,613
We're going to export a function from this file.

23
00:00:54,450 --> 00:00:58,140
We will import that function into this file

24
00:00:58,140 --> 00:01:01,170
and then we will pass app into that function.

25
00:01:01,170 --> 00:01:03,780
In other words, we should just basically assume

26
00:01:03,780 --> 00:01:06,810
that we're going to have access to the app over here.

27
00:01:06,810 --> 00:01:09,851
So to export code in a node js environment

28
00:01:09,851 --> 00:01:10,684
(keyboard tapping)

29
00:01:10,684 --> 00:01:13,549
We write module.exports

30
00:01:13,549 --> 00:01:15,630
and I'm gonna assign that to a function

31
00:01:15,630 --> 00:01:18,149
that's gonna be called with our app.

32
00:01:18,149 --> 00:01:21,060
So let's wire this up now.

33
00:01:21,060 --> 00:01:23,400
Back inside of index.js.
(keyboard tapping)

34
00:01:23,400 --> 00:01:27,370
I'll say const router is require

35
00:01:28,710 --> 00:01:30,000
and this is the file we created.

36
00:01:30,000 --> 00:01:33,960
So we'll use dot forward slash router

37
00:01:33,960 --> 00:01:36,468
and then down inside of our app setup,

38
00:01:36,468 --> 00:01:38,760
we will call our router.

39
00:01:38,760 --> 00:01:39,593
Excuse me.

40
00:01:39,593 --> 00:01:41,703
we will call the router with our app.

41
00:01:43,200 --> 00:01:44,190
Cool.

42
00:01:44,190 --> 00:01:46,650
So now over here, inside this function

43
00:01:46,650 --> 00:01:48,840
we have access to our express app,

44
00:01:48,840 --> 00:01:52,709
which is basically the brains of our entire application.

45
00:01:52,709 --> 00:01:54,390
(mouse clicking)

46
00:01:54,390 --> 00:01:57,540
So remember what we're trying to do here is define a route

47
00:01:57,540 --> 00:01:59,100
that the user can visit.

48
00:01:59,100 --> 00:02:01,260
Just something that we can say, yeah, this is,

49
00:02:01,260 --> 00:02:03,510
you know our app is working so far.

50
00:02:03,510 --> 00:02:06,360
So to add route handlers to express

51
00:02:06,360 --> 00:02:09,460
we say app.get

52
00:02:11,430 --> 00:02:12,460
forward slash

53
00:02:13,440 --> 00:02:15,715
function like so.

54
00:02:15,715 --> 00:02:16,548
(keyboard tapping)

55
00:02:16,548 --> 00:02:18,652
So this is a very repeatable unit functionality right here

56
00:02:18,652 --> 00:02:21,913
and it'd be really good if you got a solid grasp on this

57
00:02:21,913 --> 00:02:24,153
kind of set from the get go.

58
00:02:26,940 --> 00:02:30,780
On app we call a function called get.

59
00:02:30,780 --> 00:02:33,480
Now this get right here maps directly up to the type

60
00:02:33,480 --> 00:02:35,970
of http request that's gonna be issued

61
00:02:35,970 --> 00:02:37,260
and we want to handle.

62
00:02:37,260 --> 00:02:41,550
So we can say app.get if we are expecting a post request

63
00:02:41,550 --> 00:02:43,860
we would say app.post.
(keyboard tapping)

64
00:02:43,860 --> 00:02:45,690
But in this case we're gonna say that we're expecting

65
00:02:45,690 --> 00:02:48,600
a get request to come in.

66
00:02:48,600 --> 00:02:52,450
The first argument to .get is the route that's going to be

67
00:02:54,300 --> 00:02:56,550
you know the route that we're trying to handle.

68
00:02:56,550 --> 00:02:58,860
So if our user just visits our app

69
00:02:58,860 --> 00:03:03,273
which is essentially foward slash, then run this function.

70
00:03:04,260 --> 00:03:06,704
So there's a very tight mapping between this string

71
00:03:06,704 --> 00:03:08,793
and the function that we pass.

72
00:03:10,440 --> 00:03:13,140
The function that handles our route gets called

73
00:03:13,140 --> 00:03:15,480
with three very important arguments.

74
00:03:15,480 --> 00:03:19,803
They are req, res, and next.

75
00:03:21,750 --> 00:03:25,110
Req is short for request, and it is an object that

76
00:03:25,110 --> 00:03:28,200
represents the incoming http request.

77
00:03:28,200 --> 00:03:30,690
So it's got a lot of data about the actual request

78
00:03:30,690 --> 00:03:31,955
and you know where it's coming from

79
00:03:31,955 --> 00:03:34,216
what route it was looking for

80
00:03:34,216 --> 00:03:37,595
just a bunch of data about the request that was made.

81
00:03:37,595 --> 00:03:41,220
The res, which is a second object here,

82
00:03:41,220 --> 00:03:43,710
is the argument that we have access to,

83
00:03:43,710 --> 00:03:46,320
To essentially it represents the response

84
00:03:46,320 --> 00:03:47,340
that we're going to form up

85
00:03:47,340 --> 00:03:50,400
and send back to whoever made the request.

86
00:03:50,400 --> 00:03:52,624
So whenever we are dealing with the response

87
00:03:52,624 --> 00:03:55,050
this is our area or this is where we get

88
00:03:55,050 --> 00:03:58,704
our ability to respond to our users in some fashion.

89
00:03:58,704 --> 00:04:02,694
Finally, next, next on here is mostly for error handling.

90
00:04:02,694 --> 00:04:05,010
We're talk, we'll talk about it in a little bit

91
00:04:05,010 --> 00:04:07,422
when we start working with some actual users.

92
00:04:07,422 --> 00:04:09,990
Again, for right now, I wanna just respond

93
00:04:09,990 --> 00:04:13,110
with some very static, very plain JSON, just so we know

94
00:04:13,110 --> 00:04:15,410
that everything is working fine for right now.

95
00:04:16,440 --> 00:04:18,450
So to send back some amount of JSON

96
00:04:18,450 --> 00:04:20,310
to whoever's making this request

97
00:04:20,310 --> 00:04:23,963
we can just say res.send.

98
00:04:23,963 --> 00:04:27,300
And then basically whatever we wanna send

99
00:04:27,300 --> 00:04:29,603
in this case I wanna send, how about just an,

100
00:04:29,603 --> 00:04:32,430
an array of strings. I think that'll do.

101
00:04:32,430 --> 00:04:37,430
So I can send an array of about water bottle, Phone, paper,

102
00:04:41,054 --> 00:04:44,220
and if you were curious about what's on my desk right now

103
00:04:44,220 --> 00:04:47,130
as I record this video it is a water bottle, phone,

104
00:04:47,130 --> 00:04:52,094
and some paper just in case you're curious.

105
00:04:52,094 --> 00:04:53,820
All right, let's give this a shot.

106
00:04:53,820 --> 00:04:56,970
So node mon probably just restarted our server.

107
00:04:56,970 --> 00:04:57,900
Looks good.

108
00:04:57,900 --> 00:04:59,700
It's restarted, it's screen right here.

109
00:04:59,700 --> 00:05:01,830
If you have any typos, you'll see them in the

110
00:05:01,830 --> 00:05:04,170
in the terminal right here.

111
00:05:04,170 --> 00:05:06,630
You can see that as I was going through and saving work

112
00:05:06,630 --> 00:05:08,460
I probably made a typo or two

113
00:05:08,460 --> 00:05:10,110
and so I got an error message in there,

114
00:05:10,110 --> 00:05:11,550
but node monitor restarted

115
00:05:11,550 --> 00:05:13,300
and everything recovered just fine.

116
00:05:14,820 --> 00:05:17,100
So my expectation is that I should be able to make a

117
00:05:17,100 --> 00:05:20,850
get request to forward slash and I should see an array

118
00:05:20,850 --> 00:05:23,910
of water, bottle, phone, and paper.

119
00:05:23,910 --> 00:05:27,090
Let's give this a shot over in Chrome.

120
00:05:27,090 --> 00:05:30,210
I'm on local host:3090.

121
00:05:30,210 --> 00:05:33,060
I'll refresh and sure enough,

122
00:05:33,060 --> 00:05:35,610
I got water bottle, phone paper in an array,

123
00:05:35,610 --> 00:05:37,320
just what I wanted.

124
00:05:37,320 --> 00:05:39,300
Now, if whatever you're looking at looks a little bit

125
00:05:39,300 --> 00:05:41,130
more garbled than this or you see everything

126
00:05:41,130 --> 00:05:44,220
on a single line is just plain text, that's totally fine.

127
00:05:44,220 --> 00:05:47,190
I have a plugin for Chrome that just formats JSON

128
00:05:47,190 --> 00:05:49,863
in the browser very nicely, as you see right here.

129
00:05:52,710 --> 00:05:53,730
All right, so this looks great.

130
00:05:53,730 --> 00:05:57,300
This is exactly the functionality that we're gonna

131
00:05:57,300 --> 00:05:59,520
duplicate again and again and again

132
00:05:59,520 --> 00:06:01,740
to make route handlers inside of Express.

133
00:06:01,740 --> 00:06:03,960
So this is very good so far.

134
00:06:03,960 --> 00:06:05,670
Let's continue in the next section

135
00:06:05,670 --> 00:06:07,710
and start working on authentication.

136
00:06:07,710 --> 00:06:08,910
I'll see you over there.