1 00:00:00,330 --> 00:00:08,940 And why don't we start the Express editorial part by setting up the server one more time with straight 2 00:00:08,940 --> 00:00:17,340 up HTP module and in a process, let's struggle, but let's see why we would want to use Express E in 3 00:00:17,340 --> 00:00:18,040 the first place. 4 00:00:18,570 --> 00:00:24,380 So, yes, we'll build one more time server with a module, however. 5 00:00:24,750 --> 00:00:32,700 Now, of course, we'll dive deep into the topics of we kind of skipped over before and not set up the 6 00:00:32,700 --> 00:00:33,200 server. 7 00:00:33,510 --> 00:00:36,870 We know that we would need to require the module. 8 00:00:36,870 --> 00:00:37,110 Right. 9 00:00:37,140 --> 00:00:41,550 So I'm going to come up with some kind of variable and in my case, that is going to be HTP. 10 00:00:41,820 --> 00:00:43,920 And of course, the name is not required. 11 00:00:43,930 --> 00:00:50,040 You can call this whatever you want, but it is somewhat of a convention to call this HTP as far as 12 00:00:50,040 --> 00:00:55,710 the variable name, when we go with or acquire and we just go with HTP again. 13 00:00:55,710 --> 00:01:01,350 Keep in mind this comes built in node so you don't have to install it. 14 00:01:01,590 --> 00:01:05,700 We didn't install it when we ran and PME installed in the last video. 15 00:01:06,210 --> 00:01:09,690 We installed two other dependencies, but this one is built in. 16 00:01:09,690 --> 00:01:10,920 So we don't have to do anything. 17 00:01:11,070 --> 00:01:14,760 We just say require and it's always going to be available to us. 18 00:01:15,120 --> 00:01:17,460 Then we need to set up the server. 19 00:01:17,460 --> 00:01:21,450 And again, convention is calling the server where you can call these Bugs Bunny. 20 00:01:21,690 --> 00:01:24,300 And in order to do that, we go with HTP. 21 00:01:24,540 --> 00:01:30,190 And then on this object, we have a method by the name of create server. 22 00:01:30,590 --> 00:01:39,120 Now, this method takes a callback, which is going to be invoked every time the user hits our server. 23 00:01:39,480 --> 00:01:45,390 And in this callback we have two parameters and again, we can call them whatever we would want. 24 00:01:45,600 --> 00:01:53,490 So again, a common convention is just shorten this up a little bit and call it a request and or so 25 00:01:53,970 --> 00:01:54,550 onerous. 26 00:01:54,750 --> 00:01:58,340 And the first Brammer references of the request object. 27 00:01:58,620 --> 00:02:01,280 And second one is the response object. 28 00:02:01,500 --> 00:02:09,210 And at this point, it should be clear why we have access to those two parameters, because in the HTP 29 00:02:09,210 --> 00:02:16,560 cycle, we have a request message that is coming in every time user requests the research. 30 00:02:16,920 --> 00:02:18,910 And also we have the response message. 31 00:02:19,360 --> 00:02:19,730 Right. 32 00:02:19,920 --> 00:02:21,730 So that's what we need to send out. 33 00:02:21,830 --> 00:02:30,180 So that's why in this function that runs every time user hits the server, we have access to REC and. 34 00:02:31,140 --> 00:02:37,980 So that way we can find info about the incoming request because it makes a total sense if we have access 35 00:02:37,980 --> 00:02:38,660 to that info. 36 00:02:39,210 --> 00:02:41,510 I do want to know what is the method? 37 00:02:41,850 --> 00:02:43,530 So what the user is trying to do. 38 00:02:43,770 --> 00:02:50,850 I do want to know what resource the user is trying to get, whether that is the contact page or about 39 00:02:50,850 --> 00:02:51,090 page. 40 00:02:51,300 --> 00:02:59,070 And also I would want to know whether I'm getting some data, whether user is trying to add something 41 00:02:59,070 --> 00:02:59,930 onto the server. 42 00:03:00,270 --> 00:03:08,910 And as far as the response, well, in order to serve the data, I need to be extremely specific about 43 00:03:08,910 --> 00:03:09,780 what I'm sending. 44 00:03:10,020 --> 00:03:13,380 So I need to explain to the browser what is coming in. 45 00:03:13,710 --> 00:03:14,940 Hopefully that is clear. 46 00:03:15,180 --> 00:03:24,330 And in here we can just go with log and we'll say user hit the server and then we return the object 47 00:03:24,330 --> 00:03:27,020 from this great server on that object. 48 00:03:27,030 --> 00:03:29,730 We have a method by the name of Ellerson. 49 00:03:30,210 --> 00:03:35,940 So in order for the server to work, we need to invoke listen and we need to be a bit more specific 50 00:03:35,940 --> 00:03:39,120 and we need to say, well, what port are we listening for? 51 00:03:39,300 --> 00:03:42,000 And you're probably wondering, well, what's up with this port? 52 00:03:42,360 --> 00:03:45,660 What's up with this five thousand value? 53 00:03:46,050 --> 00:03:49,410 And the best explanation I can give you is this one. 54 00:03:49,830 --> 00:03:53,790 Imagine a scenario where you have some kind of issue with your bank. 55 00:03:54,210 --> 00:03:54,870 What do you do? 56 00:03:55,350 --> 00:03:56,740 Or that could be a phone company. 57 00:03:56,740 --> 00:03:57,570 It doesn't really matter. 58 00:03:57,570 --> 00:03:59,850 But I'm just going to give you a back example. 59 00:04:00,120 --> 00:04:00,750 What do you do? 60 00:04:01,080 --> 00:04:02,580 You call the customer service. 61 00:04:02,760 --> 00:04:04,680 And what is the first question that they ask you? 62 00:04:05,340 --> 00:04:11,580 They say, please describe your issue, so we may better assist with your call. 63 00:04:11,970 --> 00:04:13,980 And what do they do that give you options? 64 00:04:14,220 --> 00:04:14,570 Right. 65 00:04:14,590 --> 00:04:17,130 So they say you want to increase your credit limit. 66 00:04:17,519 --> 00:04:22,560 This is going to be option number one all the way to cancelling the account, which maybe is going to 67 00:04:22,560 --> 00:04:24,510 be option number eight. 68 00:04:24,960 --> 00:04:27,380 So they don't just randomly assist you. 69 00:04:27,390 --> 00:04:29,820 A person may say, hey, what is this issue? 70 00:04:30,300 --> 00:04:33,450 And this is the person that can serve you the best. 71 00:04:33,720 --> 00:04:38,370 So if you proceed, you can assume that you're probably going to be speaking with someone who deals 72 00:04:38,370 --> 00:04:39,900 with that all the time. 73 00:04:40,620 --> 00:04:41,940 And the same goes here. 74 00:04:42,240 --> 00:04:48,930 So if you go online and if you search for PT., this is just going to be a communication standpoint. 75 00:04:49,350 --> 00:04:55,410 And we need to understand that for HTP traffic, we have specific ports. 76 00:04:56,250 --> 00:04:59,460 So for HTP, we actually have port. 77 00:05:00,560 --> 00:05:04,730 Because there are other ports as well, if you keep on scrolling here and by the way, this is a Wikipedia 78 00:05:04,730 --> 00:05:10,250 example, we have Port 20, which is for file transfer protocol. 79 00:05:10,400 --> 00:05:12,100 So this is going to be for data transfer. 80 00:05:12,380 --> 00:05:15,950 Then we have Port 22 for secure shell. 81 00:05:16,340 --> 00:05:23,230 So HTP traffic is only one of the things that we set up on server. 82 00:05:23,510 --> 00:05:28,370 And once our application is in deployment, we have specific ports. 83 00:05:28,370 --> 00:05:34,730 For that we have 80 and that is going to be for just HTP and we also have four for three, which is 84 00:05:34,730 --> 00:05:37,230 going to be 40 secure communication. 85 00:05:37,230 --> 00:05:45,530 And that's why when you go to your core CPI or any other website that uses GPS, you'll notice that. 86 00:05:46,430 --> 00:05:53,840 There is a IP address and then more specifically for three, and you can also think of this as a apartment 87 00:05:53,840 --> 00:05:59,080 building, so every apartment building has the same exact address. 88 00:05:59,090 --> 00:05:59,390 Right. 89 00:05:59,720 --> 00:06:01,430 But the apartments differ. 90 00:06:02,150 --> 00:06:03,420 So the same works here. 91 00:06:03,710 --> 00:06:12,410 So on that server, if I want to access it using S.H. So secure shell, I'm going to use Port 20 to 92 00:06:12,860 --> 00:06:13,050 one. 93 00:06:13,070 --> 00:06:20,810 Then if, for example, I want to use HTP protocol, if I want to access resources that way, then I'm 94 00:06:20,810 --> 00:06:22,670 going to use Port 443. 95 00:06:22,940 --> 00:06:27,170 So once your server is already in production, yes. 96 00:06:27,200 --> 00:06:28,760 These ports are not random. 97 00:06:29,090 --> 00:06:32,570 There are specific ports for specific things we would want to do. 98 00:06:32,600 --> 00:06:34,220 Again, back to our back example. 99 00:06:34,520 --> 00:06:40,520 If I want to cancel the account, then I'm always going to be directed to that person because I'm going 100 00:06:40,520 --> 00:06:41,800 to click option number. 101 00:06:41,990 --> 00:06:47,870 If I want to increase the limit, then of course I'm going to be directed to a different person now 102 00:06:47,870 --> 00:06:49,850 while we're in development. 103 00:06:50,120 --> 00:06:51,710 This is a really arbitrary. 104 00:06:52,730 --> 00:06:57,550 I can go here with five thousand, I can go here with three thousand, eight thousand wherever you want, 105 00:06:57,860 --> 00:07:04,970 I believe the ports between zero and thousand twenty four are already taken, so you shouldn't be using 106 00:07:04,970 --> 00:07:05,150 them. 107 00:07:05,390 --> 00:07:11,020 But in local development, again, this is an arbitrary number and that's why you can use anything you 108 00:07:11,040 --> 00:07:11,570 would want. 109 00:07:11,900 --> 00:07:20,470 And again, the most common example, create react up where we spin up the server on localhost three 110 00:07:20,480 --> 00:07:20,900 thousand. 111 00:07:21,050 --> 00:07:26,750 Then Gadsby has, I believe, eight thousand and Nat'l Fiscella has eighty eighty. 112 00:07:26,930 --> 00:07:28,750 And I can go on and on and on. 113 00:07:29,000 --> 00:07:31,730 So in my case I just went with 5000. 114 00:07:31,730 --> 00:07:35,630 But if you don't like this number, just use a different port. 115 00:07:35,630 --> 00:07:42,650 But of course, please remember the actual value for the port because you'll need it once you need to 116 00:07:42,650 --> 00:07:43,040 access. 117 00:07:43,280 --> 00:07:50,480 Now if you're wondering what happens once we deploy our application, just put the pin on that. 118 00:07:50,720 --> 00:07:57,860 And once we get to deployment, of course, I'm going to cover how actually we set it up that we serve 119 00:07:57,860 --> 00:08:06,080 that traffic on the port area, for example, for HTP or for for four HTP. 120 00:08:06,500 --> 00:08:08,980 And now, of course, we can go into Stroud. 121 00:08:09,080 --> 00:08:17,600 So let me navigate to my browser and I'm just going to go with localhost any thousand and or I'm sorry, 122 00:08:17,780 --> 00:08:22,280 I just said five thousand and for some reason I went to it, which is going to be the Gadsby one. 123 00:08:22,610 --> 00:08:24,800 And you'll see this interesting. 124 00:08:24,800 --> 00:08:27,600 Spiner So what's happening over here? 125 00:08:28,040 --> 00:08:33,770 Well the thing is yeah, the user it the server as you can see, user hit the server. 126 00:08:33,950 --> 00:08:36,350 That is what I see in the terminal. 127 00:08:36,679 --> 00:08:40,460 However, remember, we have the response, right? 128 00:08:40,470 --> 00:08:46,270 So we have access to the response object and now we need to send back some info to the browser. 129 00:08:46,580 --> 00:08:51,740 Otherwise the browser is like, OK, so I hit this resource, but nothing is happening. 130 00:08:52,130 --> 00:08:57,620 And there's a method that we always, always need to include in our response. 131 00:08:57,620 --> 00:08:59,180 And the method name is. 132 00:08:59,180 --> 00:09:01,880 And and I right away I went to the docs, of course. 133 00:09:02,180 --> 00:09:05,450 And if you want to navigate there yourself, please do so. 134 00:09:05,660 --> 00:09:08,840 But I already right away went for response to that. 135 00:09:08,840 --> 00:09:14,900 And and as you can see, this method signals to the server that all the response headers and body have 136 00:09:14,900 --> 00:09:15,380 been sent. 137 00:09:15,710 --> 00:09:20,870 And as a side note, we'll do the headers next video because this one is already getting quite long. 138 00:09:21,290 --> 00:09:28,850 That server should consider this message, complete the method response and must be called on each response. 139 00:09:29,600 --> 00:09:33,920 So for the browser not to be confused, we need to go. 140 00:09:33,920 --> 00:09:35,570 We address that. 141 00:09:35,570 --> 00:09:42,290 And so we that and that is one of the methods that is available on this response object. 142 00:09:42,590 --> 00:09:47,780 And here we can either pass the text or we can set up, for example, HDMI. 143 00:09:48,110 --> 00:09:53,090 And in this case, I'm just going to say home page that said, I'll just pass in the string. 144 00:09:53,330 --> 00:09:57,200 And if we were to go back to localhost five thousand. 145 00:09:57,410 --> 00:09:58,430 There it is. 146 00:09:58,670 --> 00:10:05,450 Now we have our home page response and we can clearly see that in our terminal because every time you 147 00:10:05,450 --> 00:10:11,150 refresh the browser, you have this console log in, a terminal user hit the service. 148 00:10:11,600 --> 00:10:13,250 Hopefully everything is clear. 149 00:10:13,400 --> 00:10:21,050 Again, we have access to the module that is built in node and we just set up some kind of variable. 150 00:10:21,410 --> 00:10:28,730 Most common convention is calling this HTP that on there we have create server method that takes in 151 00:10:28,730 --> 00:10:34,820 the callback, which is going to be invoked every time the user has the server as parameters. 152 00:10:35,000 --> 00:10:42,540 We have a request and response object and comic convention is just calling them reconned right now. 153 00:10:42,560 --> 00:10:45,080 Of course, you can call this stack on Breeda if you want. 154 00:10:45,380 --> 00:10:48,110 But again, common convention is calling insurrectionary. 155 00:10:48,600 --> 00:10:55,820 And the reason why we have access to those objects is because in the HTP cycle, that's what happens. 156 00:10:56,000 --> 00:11:02,900 We have a request message that is coming in whether we can find a bunch of useful info about the request 157 00:11:02,900 --> 00:11:03,710 that is coming in. 158 00:11:03,980 --> 00:11:09,110 And then, of course, we need to respond to the browser in a meaningful manner. 159 00:11:09,290 --> 00:11:16,100 So that's why we also have the response object and in every response we should always have. 160 00:11:16,100 --> 00:11:23,630 And this is going to signal that the communication is over and then we just need to set up the port. 161 00:11:23,630 --> 00:11:27,290 And again, in development, we just come up with arbitrary numbers. 162 00:11:27,440 --> 00:11:35,210 And in my case, we go with 5000 and we pass in that port in the DOT lissome method, which is available 163 00:11:35,450 --> 00:11:38,690 when we invoke create server because we get back the object. 164 00:11:38,840 --> 00:11:43,640 Hopefully the basics are clear and now we can start expanding on our knowledge.