1 00:00:01,350 --> 00:00:02,270 ‫Let's now use 2 00:00:02,270 --> 00:00:04,360 ‫a third-party middleware function 3 00:00:04,360 --> 00:00:06,880 ‫from npm called Morgan 4 00:00:06,880 --> 00:00:10,313 ‫in order to make our development life a bit easier. 5 00:00:11,890 --> 00:00:14,450 ‫So, as I mentioned, we're gonna use a middleware 6 00:00:14,450 --> 00:00:18,400 ‫called Morgan which is a very popular logging middleware. 7 00:00:18,400 --> 00:00:21,960 ‫So, a middleware that's gonna allow us to see request data 8 00:00:21,960 --> 00:00:23,640 ‫right in the console. 9 00:00:23,640 --> 00:00:26,320 ‫Okay, so let me go ahead and install it 10 00:00:26,320 --> 00:00:28,863 ‫and you will then see how that works, okay? 11 00:00:28,863 --> 00:00:33,340 ‫So, I don't want to now finish this process here, 12 00:00:33,340 --> 00:00:36,900 ‫so I'm gonna create a new terminal here in VS Code 13 00:00:36,900 --> 00:00:40,300 ‫and so, for that I hit this plus button here 14 00:00:40,300 --> 00:00:42,750 ‫and so, now we get a new terminal 15 00:00:42,750 --> 00:00:44,390 ‫and I don't want to update, 16 00:00:44,390 --> 00:00:48,853 ‫so no, and now npm install morgan. 17 00:00:50,340 --> 00:00:52,500 ‫Okay, now as I mentioned, 18 00:00:52,500 --> 00:00:54,330 ‫this logging middleware 19 00:00:54,330 --> 00:00:57,340 ‫is gonna make our development life a bit easier. 20 00:00:57,340 --> 00:00:58,710 ‫But it still is code 21 00:00:58,710 --> 00:01:01,470 ‫that we will actually include in our application 22 00:01:01,470 --> 00:01:04,630 ‫and so, that's why it's not a development dependency 23 00:01:04,630 --> 00:01:07,270 ‫but just a simple regular dependency, 24 00:01:07,270 --> 00:01:10,800 ‫okay and so, that's why I didn't specify save dev here 25 00:01:10,800 --> 00:01:14,110 ‫because again, it's not a dev dependency really. 26 00:01:14,110 --> 00:01:18,640 ‫Okay, so we have it in our package.json here now, morgan 27 00:01:18,640 --> 00:01:21,763 ‫and so, let's go ahead and require it in our code. 28 00:01:23,190 --> 00:01:26,593 ‫So, again right at the top here const morgan 29 00:01:29,500 --> 00:01:33,450 ‫equals require morgan 30 00:01:33,450 --> 00:01:35,800 ‫and you see again this kind of convention 31 00:01:35,800 --> 00:01:37,530 ‫that the require is gonna expose 32 00:01:37,530 --> 00:01:41,750 ‫if you use the same name as the package name itself. 33 00:01:41,750 --> 00:01:43,850 ‫So, we have our middlewares here, 34 00:01:43,850 --> 00:01:46,590 ‫so let's add it right after this 35 00:01:46,590 --> 00:01:48,623 ‫or actually write as the first one. 36 00:01:49,480 --> 00:01:52,150 ‫Okay, and source code is growing a little bit, 37 00:01:52,150 --> 00:01:53,300 ‫so let's actually go ahead 38 00:01:53,300 --> 00:01:55,670 ‫and add some comments here, 39 00:01:55,670 --> 00:01:57,603 ‫so first middlewares, 40 00:02:01,170 --> 00:02:05,753 ‫then down here we start having our route handlers. 41 00:02:11,510 --> 00:02:15,623 ‫Right, then here let's just say we have our routes. 42 00:02:20,050 --> 00:02:21,950 ‫And then finally down here 43 00:02:21,950 --> 00:02:23,173 ‫we start the server. 44 00:02:28,405 --> 00:02:31,630 ‫Okay, just to make our code a bit more readable 45 00:02:31,630 --> 00:02:33,700 ‫and easier to scan. 46 00:02:33,700 --> 00:02:35,980 ‫So, we have this first middleware 47 00:02:35,980 --> 00:02:38,453 ‫but again let's use ours before that. 48 00:02:39,520 --> 00:02:41,750 ‫So, of course app.use 49 00:02:41,750 --> 00:02:44,223 ‫and now in here we call morgan. 50 00:02:45,300 --> 00:02:47,040 ‫Okay and into this function, 51 00:02:47,040 --> 00:02:48,460 ‫we can pass an argument 52 00:02:48,460 --> 00:02:49,684 ‫which will kind of specify 53 00:02:49,684 --> 00:02:52,310 ‫how we want the logging to look like. 54 00:02:52,310 --> 00:02:54,920 ‫So, we can use some predefined strings for that 55 00:02:54,920 --> 00:02:57,493 ‫and the one that I'm gonna use is called dev. 56 00:02:58,550 --> 00:03:01,140 ‫And actually you can see here the different options 57 00:03:01,140 --> 00:03:03,180 ‫so VS Code is really smart 58 00:03:03,180 --> 00:03:04,613 ‫and can give me the options 59 00:03:04,613 --> 00:03:07,170 ‫that we can pass into this function. 60 00:03:07,170 --> 00:03:08,500 ‫Okay, so as I mentioned, 61 00:03:08,500 --> 00:03:11,080 ‫I'm gonna use the one called dev. 62 00:03:11,080 --> 00:03:13,650 ‫Okay and so that's actually it. 63 00:03:13,650 --> 00:03:15,180 ‫So, we required it 64 00:03:15,180 --> 00:03:16,960 ‫and then here we used it. 65 00:03:16,960 --> 00:03:18,500 ‫So, very simple stuff 66 00:03:18,500 --> 00:03:19,860 ‫but I think it's important 67 00:03:19,860 --> 00:03:23,170 ‫to actually try to understand how this works. 68 00:03:23,170 --> 00:03:25,260 ‫So, calling this morgan function 69 00:03:25,260 --> 00:03:28,407 ‫will return a function similar to this one here 70 00:03:28,407 --> 00:03:29,910 ‫and so, that makes sense 71 00:03:29,910 --> 00:03:32,550 ‫because while this is how a middleware function 72 00:03:32,550 --> 00:03:36,010 ‫has to look like and so, let me actually prove that to you 73 00:03:36,010 --> 00:03:37,720 ‫by looking at the source code 74 00:03:37,720 --> 00:03:38,810 ‫for this package 75 00:03:38,810 --> 00:03:41,170 ‫and that's another very nice exercise 76 00:03:41,170 --> 00:03:43,513 ‫from which we can actually learn quite a bit. 77 00:03:45,090 --> 00:03:50,090 ‫So, let's search for morgan on GitHub, 78 00:03:50,440 --> 00:03:53,430 ‫so usually all these packages are always on GitHub 79 00:03:53,430 --> 00:03:55,620 ‫and so, that's where we can then look 80 00:03:55,620 --> 00:03:57,463 ‫at their open source code. 81 00:03:58,410 --> 00:04:02,160 ‫Okay and morgan is actually a very simple package 82 00:04:02,160 --> 00:04:05,930 ‫and so, all we have to do is to go to this index.js file, 83 00:04:05,930 --> 00:04:08,000 ‫so usually that is the entry point 84 00:04:08,000 --> 00:04:11,233 ‫and in this case, it's kind of the only file that there is. 85 00:04:12,680 --> 00:04:16,020 ‫Okay, now, I'm not gonna over all of this code 86 00:04:16,020 --> 00:04:18,510 ‫but I want to highlight that the main export 87 00:04:18,510 --> 00:04:21,330 ‫from this file here is morgan, 88 00:04:21,330 --> 00:04:23,780 ‫so a function called morgan, 89 00:04:23,780 --> 00:04:24,880 ‫so let's look for that 90 00:04:26,070 --> 00:04:27,623 ‫and actually here it is. 91 00:04:28,460 --> 00:04:31,960 ‫Okay, and so when we required the package in our code, 92 00:04:31,960 --> 00:04:35,520 ‫what will get returned is this morgan function, right? 93 00:04:35,520 --> 00:04:38,190 ‫Again because they use module.export 94 00:04:38,190 --> 00:04:41,110 ‫and that is the default export just like we learned 95 00:04:41,110 --> 00:04:44,650 ‫in the requiring modules lecture one section 96 00:04:44,650 --> 00:04:47,650 ‫or two sections ago, right? 97 00:04:47,650 --> 00:04:49,720 ‫So, again this morgan function here 98 00:04:49,720 --> 00:04:54,720 ‫will be this morgan function here in this code, okay? 99 00:04:55,520 --> 00:04:57,490 ‫So, let's see what this function does 100 00:04:57,490 --> 00:05:00,830 ‫and I don't care about any of this implementation here, 101 00:05:00,830 --> 00:05:02,150 ‫what I really wanted to show you 102 00:05:02,150 --> 00:05:06,000 ‫is that this function actually returns another function 103 00:05:06,000 --> 00:05:07,650 ‫which is the logger 104 00:05:07,650 --> 00:05:09,850 ‫and you see that this function just has 105 00:05:09,850 --> 00:05:11,600 ‫our own middleware functions 106 00:05:11,600 --> 00:05:14,630 ‫has this very typical signature of request, 107 00:05:14,630 --> 00:05:17,020 ‫response and next. 108 00:05:17,020 --> 00:05:18,200 ‫Okay? 109 00:05:18,200 --> 00:05:22,120 ‫So, this function is just like our own middleware functions. 110 00:05:22,120 --> 00:05:24,060 ‫And so, you see that actually in the end 111 00:05:24,060 --> 00:05:26,620 ‫when it's ready, it also calls next, 112 00:05:26,620 --> 00:05:28,250 ‫so just like we do. 113 00:05:28,250 --> 00:05:30,370 ‫So, it's just a very regular middleware function 114 00:05:30,370 --> 00:05:33,393 ‫just like the ones that we write. 115 00:05:33,393 --> 00:05:35,078 ‫Okay? 116 00:05:35,078 --> 00:05:37,067 ‫So, let's go back here 117 00:05:37,067 --> 00:05:40,430 ‫and let's now actually see the result here in our terminal, 118 00:05:40,430 --> 00:05:42,660 ‫so let's go back to that first one, 119 00:05:42,660 --> 00:05:44,500 ‫so this is how we switch between 120 00:05:44,500 --> 00:05:47,423 ‫the different terminals that we have open in VS Code. 121 00:05:49,190 --> 00:05:51,190 ‫Give us some more space here, 122 00:05:51,190 --> 00:05:52,460 ‫actually clear this out 123 00:05:52,460 --> 00:05:54,900 ‫because you might not be able to see the bottom 124 00:05:54,900 --> 00:05:56,710 ‫of the screen so well. 125 00:05:56,710 --> 00:05:59,070 ‫And so yeah, let's now go ahead 126 00:05:59,070 --> 00:06:00,893 ‫and simply create some request, 127 00:06:04,200 --> 00:06:07,240 ‫all right, go back and here we go. 128 00:06:07,240 --> 00:06:09,730 ‫So, we have the information about the request 129 00:06:09,730 --> 00:06:11,170 ‫that we just did. 130 00:06:11,170 --> 00:06:13,060 ‫So, we get the HTTP method, 131 00:06:13,060 --> 00:06:16,250 ‫we get the URL, we get the status code, 132 00:06:16,250 --> 00:06:18,637 ‫the time it took to send back the response 133 00:06:18,637 --> 00:06:21,603 ‫and also the size of the response in bytes. 134 00:06:22,440 --> 00:06:25,550 ‫So, remember we could have used another option here, 135 00:06:25,550 --> 00:06:28,183 ‫for example, tiny was another one, 136 00:06:28,183 --> 00:06:32,370 ‫so that would then probably look a bit different 137 00:06:32,370 --> 00:06:34,680 ‫and it actually looks kind of similar here. 138 00:06:34,680 --> 00:06:36,380 ‫It simply doesn't do this coloring 139 00:06:36,380 --> 00:06:37,710 ‫of this status code 140 00:06:37,710 --> 00:06:40,923 ‫and also it has a slightly different order here. 141 00:06:43,760 --> 00:06:46,893 ‫Okay and if we did something, 142 00:06:48,060 --> 00:06:50,880 ‫if we caused an error, for example, a 404, 143 00:06:50,880 --> 00:06:53,890 ‫let's test that out by using an invalid ID here, 144 00:06:56,380 --> 00:06:59,210 ‫so that will then get another color here, 145 00:06:59,210 --> 00:07:00,410 ‫right, you can see that? 146 00:07:01,246 --> 00:07:03,530 ‫Let's do that again just in case you didn't see it. 147 00:07:03,530 --> 00:07:06,440 ‫And so, yeah, it gives us a different color. 148 00:07:06,440 --> 00:07:09,420 ‫And so, yeah, that can be quite useful for development. 149 00:07:09,420 --> 00:07:11,100 ‫You could actually even save this log 150 00:07:11,100 --> 00:07:13,960 ‫to a file but that's a bit too much 151 00:07:13,960 --> 00:07:15,060 ‫for this small example, 152 00:07:15,060 --> 00:07:16,460 ‫so this is more than enough 153 00:07:16,460 --> 00:07:17,800 ‫and you will see throughout the course 154 00:07:17,800 --> 00:07:20,910 ‫that it's kind of useful to actually have it here. 155 00:07:20,910 --> 00:07:23,620 ‫Okay, this is how we use third-party middleware 156 00:07:23,620 --> 00:07:28,160 ‫from npm and there is a lot of middleware on there 157 00:07:28,160 --> 00:07:30,010 ‫and let me actually show that to you. 158 00:07:31,970 --> 00:07:34,143 ‫So, on the Express site itself, 159 00:07:37,850 --> 00:07:42,290 ‫so expressjs.com and we actually never visited this website, 160 00:07:42,290 --> 00:07:44,170 ‫so it's actually quite nice, 161 00:07:44,170 --> 00:07:46,490 ‫so you have this Getting started 162 00:07:46,490 --> 00:07:49,410 ‫with a couple of articles explaining the basics 163 00:07:49,410 --> 00:07:52,730 ‫of Express and then you have a nice API reference 164 00:07:52,730 --> 00:07:57,400 ‫in our case, 4.x and so, here you have all of the methods 165 00:07:57,400 --> 00:07:58,713 ‫that are on the request, 166 00:07:59,970 --> 00:08:01,980 ‫so methods on properties of course, 167 00:08:01,980 --> 00:08:03,980 ‫so all of this stuff that we have, 168 00:08:03,980 --> 00:08:07,294 ‫for example, requests.body that we already used 169 00:08:07,294 --> 00:08:10,020 ‫or here on the response, 170 00:08:10,020 --> 00:08:12,920 ‫you have, for example, response.json 171 00:08:12,920 --> 00:08:14,610 ‫or response.send 172 00:08:14,610 --> 00:08:16,870 ‫and there's a bunch of other methods 173 00:08:16,870 --> 00:08:19,587 ‫and we will use many of them later on 174 00:08:19,587 --> 00:08:22,840 ‫but then here you have these resources 175 00:08:22,840 --> 00:08:24,210 ‫and the one that I wanna show you 176 00:08:24,210 --> 00:08:27,280 ‫is middleware and so, this is a bunch of middleware 177 00:08:27,280 --> 00:08:28,520 ‫that you can use 178 00:08:28,520 --> 00:08:30,790 ‫and that Express recommends, okay? 179 00:08:30,790 --> 00:08:33,890 ‫And again, we will use some of them a bit later 180 00:08:33,890 --> 00:08:36,220 ‫and actually Express recommends these 181 00:08:36,220 --> 00:08:39,510 ‫because many of these used to be built in in Express 3, 182 00:08:39,510 --> 00:08:40,650 ‫so in a previous version 183 00:08:40,650 --> 00:08:43,550 ‫but were then taken out of Express. 184 00:08:43,550 --> 00:08:46,170 ‫For example, body.parser is one of them 185 00:08:46,170 --> 00:08:48,430 ‫but actually in version four point, 186 00:08:48,430 --> 00:08:51,910 ‫I believe 14 or 16, it was added back 187 00:08:51,910 --> 00:08:56,260 ‫and so that's why we were able to do let's see, 188 00:08:56,260 --> 00:08:57,380 ‫where is it? 189 00:08:57,380 --> 00:09:00,830 ‫Yeah, that's why we were able to use expression.json 190 00:09:00,830 --> 00:09:03,380 ‫in order to parse the data from the body. 191 00:09:03,380 --> 00:09:07,360 ‫Before that, we actually would have to use the body.parser 192 00:09:07,360 --> 00:09:11,620 ‫from npm and use that one to parse the data from the body 193 00:09:11,620 --> 00:09:14,040 ‫but again, they just recently added it back 194 00:09:14,040 --> 00:09:18,210 ‫to reduce the confusion a bit for beginners like yourself. 195 00:09:18,210 --> 00:09:20,130 ‫Okay, so play around a little bit 196 00:09:20,130 --> 00:09:21,950 ‫with this reference. 197 00:09:21,950 --> 00:09:23,120 ‫Take a look at some of the stuff 198 00:09:23,120 --> 00:09:26,032 ‫maybe that we already did if you feel like it 199 00:09:26,032 --> 00:09:28,660 ‫or if not, you can always just move on 200 00:09:28,660 --> 00:09:29,963 ‫right to the next video.