WEBVTT 00:03.700 --> 00:05.140 Hey there, everyone that they share. 00:05.140 --> 00:09.160 And in this video, we're going to be injecting a whole lot of configuration because obviously we need 00:09.160 --> 00:11.320 body parts to handle the Jasons. 00:11.320 --> 00:13.120 We need to handle the files as well. 00:13.120 --> 00:16.180 We need to handle the cookies as well, Morgan as well. 00:16.180 --> 00:19.090 And I will also be injecting the swagger documentation. 00:19.090 --> 00:24.100 I won't be writing it throughout because it will extract and consume like a really lot of extra videos. 00:24.670 --> 00:28.690 We will also deviate from a path already we have gone through quite in depth of that, but still I'll 00:28.690 --> 00:29.170 inject it. 00:29.170 --> 00:31.510 Maybe you want to write it onto your some free time. 00:31.510 --> 00:32.770 You can go ahead and do that. 00:32.770 --> 00:34.870 We'll configure the project according to that. 00:34.870 --> 00:36.880 So first let's see what all we have installed. 00:36.880 --> 00:40.330 We have even got the Morgan up here to just go ahead and scroll at the very end of it. 00:40.330 --> 00:45.370 This is where they give you a majority of the functionality this needs to go into J So we're going to 00:45.370 --> 00:49.660 be calling, Hey, Morgan, let's go ahead and inject this one up here. 00:50.170 --> 00:53.050 So inside, yes, we can close the rest of the other guys. 00:53.050 --> 00:54.040 We don't need it. 00:54.130 --> 00:58.030 So at the top of it, once the express is all done, we're going to be requiring this. 00:58.030 --> 01:00.520 MORGAN Hit a couple of lines of enter. 01:00.550 --> 01:06.040 Now, the important thing about the Morgan is it needs to come before you are creating any of the roots 01:06.040 --> 01:06.370 up here. 01:06.370 --> 01:11.740 So notice here, there we go, we create ABCD, get before that we need to use this Morgan and all of 01:11.740 --> 01:11.920 that. 01:11.920 --> 01:16.510 Feel free to use this one or maybe have a tiny they have a lot of configuration. 01:16.510 --> 01:17.710 It's up to you to read it. 01:17.710 --> 01:18.640 Read it up here. 01:18.790 --> 01:21.010 We are going to go ahead and inject it up here. 01:21.010 --> 01:22.360 So there we go about use. 01:22.360 --> 01:23.680 It's a kind of a middleware. 01:23.680 --> 01:24.790 So there we go. 01:24.790 --> 01:26.860 And let me go ahead and write a comment here. 01:26.860 --> 01:32.620 This is simply a morgan middleware. 01:33.340 --> 01:35.380 Save that as soon as you do this. 01:35.530 --> 01:39.580 Now, you have to just stop the server once and you need to start it one more time. 01:39.580 --> 01:42.040 Again, these are the Morgan configuration. 01:42.040 --> 01:45.490 They actually work like this, so go ahead and kind of restart that. 01:45.610 --> 01:47.320 Now, what is going to happen after that? 01:47.320 --> 01:51.820 If you go up here back onto any of the local root, you go ahead and hit reload on here. 01:51.820 --> 01:53.440 Now you have made a request up here. 01:53.440 --> 01:57.250 Now notice here we have got some of the crash because probably there is something missing up here. 01:57.400 --> 01:59.800 So it says, hey, it took an ID request and all of that. 01:59.800 --> 02:03.490 So we we won't be using this ID and method and a whole lot of things. 02:03.490 --> 02:06.430 We will be going with the classic method of tiny. 02:06.610 --> 02:12.250 So this is a default package I guess, and it should be working right out of the box, otherwise we'll 02:12.250 --> 02:12.760 see it. 02:13.750 --> 02:15.700 Let's reload that and there we go. 02:15.700 --> 02:20.050 So this is what happens when you give it a tiny in case you didn't noticed, I'll show you one more 02:20.050 --> 02:20.620 time. 02:20.620 --> 02:23.620 So let me expand this a little bit and. 02:24.790 --> 02:26.620 Kind of a clean this up. 02:26.620 --> 02:28.060 So how can I clean this? 02:30.320 --> 02:31.190 No, I cannot. 02:31.190 --> 02:35.330 Let me stop this and clean this now and run this again. 02:35.540 --> 02:36.200 So there we go. 02:36.230 --> 02:37.430 This is up and running now. 02:37.430 --> 02:42.800 And if I go ahead and hit a reload on any of the route, what Morgan does is just gives you this, that 02:42.800 --> 02:48.980 there was a get request on this route, which is slash API, slash V1, slash dummy and the time and 02:48.980 --> 02:50.450 how much time it does took. 02:50.480 --> 02:54.020 Now, again, this totally depends on how you want to configure the Morgan. 02:54.020 --> 03:00.680 I usually go with the tiny one, but they give you Morgan like dev roles and common and there is no 03:00.680 --> 03:02.120 shortage of all of them. 03:02.570 --> 03:08.390 So again, this only logs four x and five x of the responses, not the others in case this is dev. 03:08.750 --> 03:10.160 It is really configurable. 03:10.160 --> 03:12.290 That's all I wanted to show to you. 03:12.440 --> 03:12.800 Okay. 03:12.800 --> 03:15.020 So we have got now Morgan being configured. 03:15.020 --> 03:19.370 Now we can monitor all the requests that are coming back and forth and it's a little bit easier to handle 03:19.370 --> 03:20.270 the situation. 03:21.620 --> 03:26.360 Now, this Morgan is all done so we can go ahead and add our regular middleware verse. 03:26.360 --> 03:29.960 So we're going to call this one as regular middle viewers. 03:29.960 --> 03:31.580 So what are these regular middle wears? 03:31.580 --> 03:36.110 These are the some which we need to bring it up here, but some are just here in the app. 03:36.110 --> 03:37.790 So we're going to say dot use. 03:37.790 --> 03:42.830 And in case you know that we have already discussed that that express need to handle the JSON as well. 03:42.830 --> 03:43.460 So there we go. 03:43.460 --> 03:45.070 It handles the JSON as well. 03:45.170 --> 03:49.970 Maybe it might want to handle some of the things which are coming up into the body itself. 03:49.970 --> 03:52.220 So we need to have this express as well. 03:52.220 --> 03:56.870 So we're going to say express dot URL and coded and we have already discussed that. 03:56.870 --> 04:02.060 Why we need to provide one more option which is extended equals true. 04:02.690 --> 04:03.150 Okay. 04:03.170 --> 04:04.700 So these are the most basic one. 04:04.700 --> 04:08.870 But we also know that we need to handle cookies as well as images. 04:08.870 --> 04:10.880 So let's go ahead and require that part. 04:11.180 --> 04:16.190 So we're going to go ahead and say and in fact, for the Morgan as well, for the consistency sake, 04:16.190 --> 04:17.810 I'm going to go ahead and put const. 04:19.490 --> 04:21.090 KONST There we go. 04:21.110 --> 04:25.110 So the first thing we're going to need is let's go ahead and grab a cookie parser. 04:25.130 --> 04:27.410 So cookie parser. 04:27.920 --> 04:32.450 And that's going to be coming up from require cookie parser. 04:33.050 --> 04:35.090 We will be needing some of the file upload as well. 04:35.090 --> 04:37.610 So let's bring that file up, express file upload as well. 04:37.610 --> 04:45.800 So we're going to say file upload that will be coming from require express file upload. 04:45.800 --> 04:46.490 There we go. 04:46.760 --> 04:52.820 And again, the classic way of using them up is let me go ahead and add another comment for you. 04:53.090 --> 05:01.700 So this is going to be for cookies and file middleware. 05:03.220 --> 05:04.000 There we go. 05:04.300 --> 05:08.440 Now, obviously, if somebody might be checking out your code, he will just get impressed that everything 05:08.440 --> 05:11.310 is nicely commented out and is being mentioned pretty nicely. 05:11.320 --> 05:14.800 So let's go ahead and say that this is going to simply say use. 05:14.800 --> 05:16.030 I want to use. 05:16.510 --> 05:18.700 Come on to use. 05:18.700 --> 05:23.170 I want to use the cookie parser just like that and I want to upload the file as well. 05:23.170 --> 05:27.220 So I'm going to say use this one is going to be file upload. 05:28.120 --> 05:28.420 Okay. 05:28.480 --> 05:34.210 So hopefully all of these basic configurations are done at least as of now, for now. 05:34.390 --> 05:41.140 But we also want to go ahead and inject some of the some of the previous work as well, like the documentation 05:41.140 --> 05:41.590 work. 05:41.590 --> 05:45.910 So for this, I'll upload one of the previous code that we wrote in the earlier section. 05:45.910 --> 05:47.020 So this is all we need. 05:47.020 --> 05:51.520 We need to install a YAML Jess and we need a swagger yaml again. 05:51.520 --> 05:55.330 This is the thing that we have already done and there is no harm in bringing something from your own 05:55.330 --> 05:55.960 written code. 05:55.960 --> 05:57.070 So again, don't panic out. 05:57.070 --> 05:59.140 And well, this is absolutely okay. 05:59.230 --> 06:02.320 So we just need basically three of these lines. 06:02.320 --> 06:05.380 So we need to have swagger, document, file, upload. 06:05.380 --> 06:08.680 We have already done through that and this line as well. 06:08.680 --> 06:12.910 So we're going to go ahead and copy this and we'll bring it up here as well. 06:13.330 --> 06:24.820 So let's go ahead and add this one up here and let's add a comment for swagger documentation. 06:25.720 --> 06:26.320 There we go. 06:26.320 --> 06:30.670 And one thing here is that file upload is already being done. 06:30.670 --> 06:32.590 So we are not worried about this part. 06:33.500 --> 06:35.760 And this part is in with this guy. 06:35.780 --> 06:36.710 So there we go. 06:37.190 --> 06:41.420 Now, obviously, this is not going to work because there is a little bit of more configuration required. 06:41.420 --> 06:45.180 But first thing is YAML and swagger express UI need to be installed. 06:45.200 --> 06:55.880 So let's go ahead and clean this up and say NPM install first is Yamal JS and the second one is swagger 06:56.270 --> 06:59.600 dash UI, Dash Express. 07:00.260 --> 07:04.190 And again, in case you are wondering what this is, the section two was all about it. 07:04.190 --> 07:08.630 We had so much of in-depth in depth talk about this one, so please don't panic out on that. 07:08.810 --> 07:11.510 Let's go ahead and create a file onto this here. 07:11.840 --> 07:13.400 I'll create a file up here. 07:15.340 --> 07:19.930 Which is swagger dot yaml. 07:21.520 --> 07:26.160 Now obviously this file is not going to be recorded automatically, so we need to create a node manga's, 07:26.870 --> 07:28.160 not just JSON. 07:28.160 --> 07:34.280 So we're going to go ahead and say node on DOT JSON. 07:34.280 --> 07:36.560 So it gives us all the node configuration. 07:36.560 --> 07:40.520 Again, we can bring the configuration and save us some time directly from here. 07:40.520 --> 07:44.390 So not on JSON, it just basically is an extension list. 07:44.390 --> 07:45.830 So let's go ahead and have that. 07:45.830 --> 07:47.750 What are the existing extensions that we have? 07:47.750 --> 07:49.310 First, let's see that. 07:50.480 --> 07:53.120 Obviously this is saying, hey, problem are there. 07:53.840 --> 07:56.220 Yeah, I'll give you the file and path and everything. 07:56.240 --> 07:57.080 Don't you worry. 07:57.740 --> 07:58.100 Okay. 07:58.130 --> 07:59.840 Looks like it's not giving us as of now. 07:59.840 --> 08:01.130 But let's go ahead and have this one. 08:01.130 --> 08:05.540 So extensions are all done and ready and in the app dogs, let's save this one. 08:05.540 --> 08:11.330 So now we have YAML and all of these things coming up nicely and we have app use a middleware for this 08:11.330 --> 08:15.320 one and we have a loading of Swagger Docs as well. 08:15.320 --> 08:17.360 So hopefully this should be all okay. 08:18.230 --> 08:20.330 And where is my swagger docs? 08:22.480 --> 08:22.990 There we go. 08:23.020 --> 08:25.000 So A.T.M. should be all okay. 08:25.030 --> 08:28.330 Let's go ahead and try to run it one more time to see let's see that. 08:28.330 --> 08:30.490 How many of the bugs we need to fix them up? 08:30.970 --> 08:33.490 Okay, so this looks everything is all good now. 08:33.490 --> 08:36.280 And we are also monitoring JSP, Gsx and YAML. 08:36.280 --> 08:38.350 In case we need to add any other extension. 08:38.350 --> 08:40.050 We'll just come back and add this one. 08:40.060 --> 08:42.640 Let's bring up a little bit more of the documentation here. 08:42.640 --> 08:46.810 So Swagger, YAML and let's also bring up all of this one here. 08:47.080 --> 08:55.120 So tell the server's components and this much we are going to be bringing up into the swagger YAML. 08:56.170 --> 08:57.850 Let's quickly configure this one. 08:58.000 --> 09:01.420 This is not to learn a swagger express and all of that. 09:01.420 --> 09:05.560 This is a full fledged t shirt store API. 09:06.280 --> 09:08.650 The discussion is AE a course. 09:11.870 --> 09:17.570 A course to create create a API. 09:18.820 --> 09:21.760 For E com store. 09:22.180 --> 09:22.750 Come on. 09:23.290 --> 09:23.890 There we go. 09:23.890 --> 09:26.500 Subversion and all of these are fine. 09:26.650 --> 09:27.160 Definitely. 09:27.160 --> 09:29.080 This is not the proper email. 09:29.110 --> 09:31.750 I would like to come up with the different email. 09:32.470 --> 09:33.610 Probably my own email. 09:34.900 --> 09:35.030 Okay. 09:35.140 --> 09:36.170 So this is all good. 09:36.190 --> 09:42.130 Servers are all looking fine and we are having a local host slash API slash. 09:42.130 --> 09:43.600 This time we are going with the v one. 09:43.600 --> 09:45.460 So yeah, v two is not available. 09:45.490 --> 09:48.400 This is working right out of the box components. 09:48.400 --> 09:50.260 We are having the cookie and the beer are wrath. 09:50.260 --> 09:51.070 So that is nice. 09:51.070 --> 09:57.220 Let's go back and see if we can bring a little bit more to see if something makes sense up here, at 09:57.220 --> 09:59.560 least giving you some of the basic start. 10:00.190 --> 10:03.520 OC So at this time these are the path. 10:03.520 --> 10:11.320 So we are having just the path of let's just say we want to go for dummy and this is a string tag is 10:11.320 --> 10:19.480 going to be simple home page or just home is fine and summary returns agreed from AE 200 response. 10:19.480 --> 10:20.380 This is all good. 10:20.380 --> 10:22.990 It requests gives you a string and all of that. 10:23.530 --> 10:27.820 So hopefully this should be good and now we should be able to see something onto this route. 10:27.820 --> 10:33.460 So let's go ahead and say that this time we we need to go need to check where we need to go. 10:34.420 --> 10:37.720 We need to go onto slash API, slash docs. 10:38.650 --> 10:45.250 So slash API dash docs and I forgot a slash there. 10:45.250 --> 10:45.910 There we go. 10:47.260 --> 10:51.640 So now even our stored API is an authentication and everything is up here. 10:51.640 --> 10:56.920 So in case you are interested in that, you can actually go ahead and keep on writing this documentation 10:56.920 --> 11:01.330 as well whenever you get time and you can keep a documentation being maintained for this one as well. 11:01.360 --> 11:04.900 Again, as I told you, I won't be maintaining this documentation too much. 11:04.900 --> 11:09.370 I would be focused rather on creating the functionality, working through our app and all of that. 11:09.370 --> 11:12.010 But as of now, the configuration is all done. 11:12.010 --> 11:16.720 Now we need to work on a little bit of the extra things like connecting with the database, connecting 11:16.720 --> 11:21.220 with some of the errors, show you some of the customized error handling and a little bit of that. 11:21.220 --> 11:23.440 So let's go ahead and catch up in the next video.