1
00:00:00,180 --> 00:00:05,430
All right, and once we have covered of the express library basics now, of course, let's spin the

2
00:00:05,430 --> 00:00:13,050
sucker up and see how we can make a server way easier and with way less headache.

3
00:00:13,560 --> 00:00:17,760
And I'm going to start by removing all the code in my amp.

4
00:00:17,760 --> 00:00:23,070
Just just keep in mind that if you ever need a reference, go to the final one.

5
00:00:23,250 --> 00:00:28,920
And then, of course, actually the basics is going to be where we set up the basic HTP server.

6
00:00:29,160 --> 00:00:35,640
And then, for example, the HDP app example is going to be in the file number two.

7
00:00:36,090 --> 00:00:41,460
And the way we work with Express, we start by setting up some kind of variable.

8
00:00:41,790 --> 00:00:44,610
And of course, we'll have to use the wire.

9
00:00:44,880 --> 00:00:48,730
So we'll go with to require and then we're looking for Xpress library.

10
00:00:48,780 --> 00:00:52,560
Again, we can do that because we have installed a library.

11
00:00:53,160 --> 00:00:56,020
But if you haven't, then of course, you will get the error.

12
00:00:56,310 --> 00:00:57,150
Keep that in mind.

13
00:00:57,150 --> 00:01:05,129
And then we go with CONSED and an app is equal to express to whatever we imported and then we invoke

14
00:01:05,129 --> 00:01:05,300
it.

15
00:01:05,700 --> 00:01:13,350
Now, if you're a bit iffy about the syntax, just keep in mind that it is very similar to our previous

16
00:01:13,350 --> 00:01:23,400
example where we went with HTP, then created the server and as a result we had our server instance.

17
00:01:23,550 --> 00:01:23,980
Correct.

18
00:01:24,270 --> 00:01:25,230
So this is similar.

19
00:01:25,470 --> 00:01:28,920
We're getting a function back from Xpress and we just invoke it.

20
00:01:29,450 --> 00:01:34,390
We right away have our server instance with a bunch of cool methods.

21
00:01:34,710 --> 00:01:41,040
Now, what you will also see on the Web is something like this where since this is a function, we can

22
00:01:41,040 --> 00:01:45,720
invoke it right away and then just call this one up again.

23
00:01:46,350 --> 00:01:54,390
This is really your preference, but mostly you'll see the first option where we first import the module

24
00:01:54,630 --> 00:01:57,030
and only then we invoke it.

25
00:01:57,480 --> 00:02:03,580
So once we have this setup, then of course we have a object with a bunch of useful methods.

26
00:02:04,110 --> 00:02:07,200
Now, the methods that we'll use the most are following.

27
00:02:07,560 --> 00:02:14,730
And I'll get and I'll just copy and paste here and I'll just change it around a little bit post and

28
00:02:14,730 --> 00:02:17,010
put as well as delete.

29
00:02:18,180 --> 00:02:20,490
And also, there's going to be all.

30
00:02:21,830 --> 00:02:22,580
Use.

31
00:02:23,430 --> 00:02:31,830
And I'll listen now listen, we already covered before in the HDP module, and this one is pretty much

32
00:02:31,830 --> 00:02:37,260
the same where we just go with app that listen and then we just say what port we're going to be listening

33
00:02:37,260 --> 00:02:37,420
on.

34
00:02:37,890 --> 00:02:42,760
So in this case, of course, this is going to be 5000 and then we pass in the callback function.

35
00:02:43,050 --> 00:02:47,970
So when we instantiate that server, we will run this function.

36
00:02:47,990 --> 00:02:55,290
And a common convention is just setting up a console log where we say that, yeah, the server is listening

37
00:02:55,500 --> 00:02:57,130
on port, such and such.

38
00:02:57,180 --> 00:03:00,330
Now, for the time being, we're hard coding this value letter.

39
00:03:00,330 --> 00:03:02,970
I'll show you how we can make this one dynamic.

40
00:03:03,150 --> 00:03:06,350
So for now, I'll just seconds a log and server.

41
00:03:06,900 --> 00:03:08,370
He is a listening.

42
00:03:09,880 --> 00:03:13,250
And port, and then we go five thousand.

43
00:03:13,630 --> 00:03:21,820
So let's say this one an hour on my NPM start and I should see in a console server is running or listening

44
00:03:22,000 --> 00:03:23,730
on Port 5000.

45
00:03:23,740 --> 00:03:24,190
Awesome.

46
00:03:24,610 --> 00:03:26,830
So what about the other methods?

47
00:03:27,160 --> 00:03:32,170
And the first four methods here just represent HTP verbs.

48
00:03:32,590 --> 00:03:41,680
Now, if you remember when we talked about the actually TPE request and response messages, well, one

49
00:03:41,680 --> 00:03:47,530
of the things that we were looking for in the request message was the verb.

50
00:03:48,010 --> 00:03:54,160
And yes, I set up some more meaningful examples where we'll see all of them in action.

51
00:03:54,700 --> 00:03:57,070
For now, just remember two things first.

52
00:03:57,980 --> 00:04:05,480
And this just represents what the user is trying to do, whether reader data in certain data, update

53
00:04:05,480 --> 00:04:11,820
data or delete data, and by default, all browsers perform a request.

54
00:04:12,260 --> 00:04:16,820
So that's why we have here and get that post put and delete.

55
00:04:17,180 --> 00:04:20,120
Now all just works with all of them.

56
00:04:20,480 --> 00:04:24,440
And we'll see that in a second when we set up the four or four page.

57
00:04:24,800 --> 00:04:32,150
So essentially a response, if you cannot find the resource on a server and abduct use is responsible

58
00:04:32,360 --> 00:04:33,410
for middleware.

59
00:04:33,660 --> 00:04:40,490
And since it's such a crucial part of express, of course, I prepared more examples on that where we

60
00:04:40,490 --> 00:04:42,840
cover everything from scratch.

61
00:04:42,890 --> 00:04:47,510
So for now, just remember, this is middleware, but don't lose your sleep over.

62
00:04:47,510 --> 00:04:50,410
It will cover it a little bit later in the course.

63
00:04:50,690 --> 00:04:52,920
So we have apps that listen beautiful.

64
00:04:52,940 --> 00:04:54,670
We're listening on five thousand.

65
00:04:55,070 --> 00:05:01,940
But since I know that all the browsers are performing a get request, I simply go with app dot get.

66
00:05:02,910 --> 00:05:09,810
And then I need to specifically add two things, a path, so what resource the user is trying to access

67
00:05:10,110 --> 00:05:12,870
and it would make sense if we would start with road.

68
00:05:13,200 --> 00:05:13,620
Correct.

69
00:05:13,920 --> 00:05:17,030
And then the second thing is the callback function.

70
00:05:17,250 --> 00:05:27,020
So this callback function will be invoked every time a user is performing a get a request on out.

71
00:05:27,360 --> 00:05:33,780
So basically on argument and then this callback function gets the same two arguments.

72
00:05:34,050 --> 00:05:38,010
We go with request as well as the response.

73
00:05:38,400 --> 00:05:44,640
So this is going to deal with incoming request message and then this is going to deal with our response.

74
00:05:45,030 --> 00:05:50,070
And inexpressive we go with rice and then the method name is send.

75
00:05:50,420 --> 00:05:53,970
So in here we can pass the string, we can pass in the email.

76
00:05:54,150 --> 00:05:59,340
And I'm just going to simply start with home and page, so we save this one.

77
00:06:00,160 --> 00:06:06,530
Now, of course, I'm going to navigate to my browser and say localhost and five thousand.

78
00:06:06,840 --> 00:06:08,030
And there it is.

79
00:06:08,250 --> 00:06:14,850
Now we should have homepage if you don't again please troubleshoot because otherwise it's not going

80
00:06:14,850 --> 00:06:17,540
to make sense what we are about to do next.

81
00:06:17,550 --> 00:06:20,870
But if you see the home page, you are in good shape.

82
00:06:21,270 --> 00:06:29,760
So we're listening for your request on our route and that every time the user navigates to the road

83
00:06:30,000 --> 00:06:32,290
and of course we just send back the homepage.

84
00:06:32,520 --> 00:06:39,750
Now, if you want, you can of course, log on user yet of the resource or something like that doesn't

85
00:06:39,750 --> 00:06:40,370
really matter.

86
00:06:40,650 --> 00:06:47,430
And if you go back to the browser and if you refresh paradise, we have user hit the resource.

87
00:06:47,430 --> 00:06:47,840
Awesome.

88
00:06:48,270 --> 00:06:55,530
And just like in our previous example, the basics one, let's set up the about page as well as the

89
00:06:55,530 --> 00:06:56,160
404.

90
00:06:56,880 --> 00:07:04,050
So I'm going to go back to my app Jass and right above the app not listen, I'm going to go with another

91
00:07:04,080 --> 00:07:07,850
app, not get and in this case I'm looking for about.

92
00:07:08,250 --> 00:07:10,140
So that's the resource.

93
00:07:10,440 --> 00:07:13,920
And of course, in here again, we have rec and rest.

94
00:07:14,340 --> 00:07:21,030
And then as far as the response, well, I'll cheat a little bit and I'll just say or not sand and we're

95
00:07:21,030 --> 00:07:23,340
going to go with about Page.

96
00:07:23,820 --> 00:07:27,290
And then of course, I would want to handle the four or four as well.

97
00:07:28,080 --> 00:07:35,220
So if the user comes to my server and tries to access a resource that doesn't exist, then what am I

98
00:07:35,220 --> 00:07:36,000
going to send back?

99
00:07:36,420 --> 00:07:38,470
And we can take a look at the default one.

100
00:07:38,760 --> 00:07:43,500
So if I'm going to go with about, I should see the about page.

101
00:07:43,500 --> 00:07:49,500
But if I go with, for example, a contact page, let's see what the Express is doing.

102
00:07:49,770 --> 00:07:52,290
And in this case, I have cannot get the contact.

103
00:07:52,560 --> 00:08:00,960
And if I inspect, I can clearly see that in my network tab I have contact and this is a four or four.

104
00:08:01,230 --> 00:08:03,220
So that's going to be the default response.

105
00:08:03,310 --> 00:08:09,360
Now I can alter this, of course, and I can set up my own forum for response.

106
00:08:09,630 --> 00:08:15,720
So I'm going to load app and this is the case where I'm going to use all methods because again, user

107
00:08:15,720 --> 00:08:22,560
can do multiple things on a server and I want to cover them all, not just getting the resource or inserting

108
00:08:22,560 --> 00:08:23,820
the resource or whatever.

109
00:08:24,060 --> 00:08:25,150
I want to cover them all.

110
00:08:25,470 --> 00:08:28,060
So that's why I'm going to use my own method.

111
00:08:28,080 --> 00:08:34,890
Again, this just handles all HTP verbs, whether gatepost or whatever.

112
00:08:35,100 --> 00:08:38,010
And again, this method takes two arguments.

113
00:08:38,220 --> 00:08:42,330
First, one is going to be the path and the second one is going to be a callback function.

114
00:08:42,600 --> 00:08:45,350
And as far as the path, I can say all of them.

115
00:08:45,810 --> 00:08:51,450
So whatever resource you are trying to access, the response is going to be exactly the same.

116
00:08:51,450 --> 00:08:55,810
If I cannot find the resource, then I'll just send back this response.

117
00:08:56,070 --> 00:09:02,130
So again, I have a callback function rock and whereas in here and then we're going to go with arrays

118
00:09:02,220 --> 00:09:03,270
that sand.

119
00:09:03,480 --> 00:09:12,060
And just like in our HDB example, I'm going to go with having one and we'll say resource not found

120
00:09:12,660 --> 00:09:14,520
and let's close the one.

121
00:09:14,880 --> 00:09:17,790
But of course, I also would want the status.

122
00:09:18,450 --> 00:09:19,470
So that would make sense.

123
00:09:19,800 --> 00:09:21,680
I don't want to send back two hundred.

124
00:09:22,050 --> 00:09:23,390
That would be very confusing.

125
00:09:23,970 --> 00:09:28,770
So before we invoke some method, I can also add status here.

126
00:09:29,190 --> 00:09:30,750
And as you can see, I can change it.

127
00:09:31,140 --> 00:09:33,570
So have res not status.

128
00:09:33,780 --> 00:09:37,730
So this is where I'll pass in my status code and then I go Whitsun.

129
00:09:38,070 --> 00:09:45,300
So in our not found example, of course I would want to pass in the status code of, for or for that

130
00:09:45,300 --> 00:09:46,560
is going to be more correct.

131
00:09:46,830 --> 00:09:47,970
And the same goes here.

132
00:09:48,180 --> 00:09:54,780
Technically we can rely on Express and it does a decent job of adding those status codes.

133
00:09:55,110 --> 00:10:02,160
But a more common approach is explicitly setting up the status code so that what you have more can.

134
00:10:02,190 --> 00:10:04,760
Control of water sent back to the browser.

135
00:10:05,030 --> 00:10:14,230
So here I go with Araz and that sand, but before I set up that method, I set up a status one first

136
00:10:14,500 --> 00:10:16,070
and I go with two hundred.

137
00:10:16,450 --> 00:10:19,420
So this just means that the request was successful.

138
00:10:19,670 --> 00:10:24,490
So similarly, I'll do that in about an hour ago with status.

139
00:10:24,760 --> 00:10:28,990
We passed in the two hundred and then we set up a change.

140
00:10:29,330 --> 00:10:35,550
And so now if I go back to my browser and if I refresh now, of course I have results not found.

141
00:10:35,920 --> 00:10:37,060
That is my heading one.

142
00:10:37,300 --> 00:10:43,990
And I can clearly see my photographer for any for example, I'm looking for about where it is.

143
00:10:43,990 --> 00:10:46,940
I have my about page as well as the home page.

144
00:10:46,960 --> 00:10:51,910
So if we go to localhost and five thousand, that's going to be our route.

145
00:10:52,150 --> 00:10:54,600
That is going to be our bridge.

146
00:10:54,880 --> 00:10:55,420
All right.

147
00:10:55,420 --> 00:10:57,550
And we're done with our basic example.

148
00:10:57,790 --> 00:11:06,070
Hopefully you can see that it is already way less code than just using the built in module.

149
00:11:07,000 --> 00:11:13,900
In the next example, you'll see how Xpress truly shines when it comes to setting up a server.