WEBVTT 00:03.880 --> 00:04.750 Hey, did everyone. 00:04.840 --> 00:05.320 They sure. 00:05.320 --> 00:08.530 And welcome to another video in the documentation section. 00:08.620 --> 00:14.440 So now we have a full understanding of how the basic documentation works, but it is also equally important 00:14.440 --> 00:19.790 that we do a little bit of more in-depth learning more about the get request per post request. 00:19.810 --> 00:25.450 Grouping them together, maybe having different kind of header requests and a whole bunch of other things 00:25.450 --> 00:26.860 that we are going to talk about. 00:27.160 --> 00:31.810 Now for this, we are going to create a new project and the goal of this project to understand a little 00:31.810 --> 00:36.520 bit more about Express and a little bit more about the documentation in this project. 00:36.520 --> 00:40.540 We won't be separating the files into controllers and the and the routes. 00:40.540 --> 00:44.710 I know a lot of you have already heard about that through my other courses or somewhere else. 00:44.710 --> 00:46.600 We will be doing that very soon. 00:46.600 --> 00:47.470 Not yet. 00:47.500 --> 00:50.620 The focus here is to learn more about documentation. 00:50.620 --> 00:52.360 So we'll be doing exactly that. 00:52.360 --> 00:53.800 We'll create a new project. 00:53.800 --> 00:58.720 We'll understand how to explore more things using EXPRESS, and we'll be writing documentation for that 00:58.720 --> 00:59.530 variety. 00:59.560 --> 01:04.030 Now for this, we'll be again using the same package and everything, same that we have seen so far. 01:04.030 --> 01:09.340 So make sure these tabs are opened up into some of your browser and I'll give you the presentation so 01:09.340 --> 01:10.060 it helps you. 01:10.060 --> 01:15.190 And again, we'll be using the most famous one, which is Swagger UI Express because it is most compatible 01:15.190 --> 01:16.300 with the Express. 01:16.480 --> 01:19.360 And apart from that, let me walk you through a couple of more basics. 01:19.360 --> 01:25.090 So what all we'll be using for the documentation, we'll learn that how we can provide more options. 01:25.090 --> 01:29.680 Maybe you are having multiple URL support and your request goes through multiple of the channels. 01:29.680 --> 01:36.040 So we can work with that and I'll show you how you can inject variables in the entirety of the documentation. 01:36.040 --> 01:41.290 And we'll be creating a new express project which will be having multiple routes and we'll write documentation 01:41.290 --> 01:41.980 for that. 01:42.040 --> 01:48.520 Most importantly, we will be using the open API version 3.0 or anything beyond three. 01:48.640 --> 01:53.950 Now the difference is that what you have seen so far in the tutorial or maybe in the blog articles also 01:53.950 --> 01:55.690 they might be a little bit outdated. 01:55.690 --> 01:59.530 Doesn't mean that the 2.0 or two x version is not supported. 01:59.530 --> 02:04.360 It is still yet fully supported and a whole lot of documentation still follow that kind of routine. 02:04.360 --> 02:05.350 We won't be doing that. 02:05.350 --> 02:11.140 We want to go as modern as possible, so we'll be referring the documentation of 3.0 as an open source 02:11.260 --> 02:13.570 API recommendation and we'll be writing. 02:13.570 --> 02:14.290 Same for that. 02:14.290 --> 02:18.970 So make sure you don't just blindly copy paste from all the StackOverflow things that you see around 02:18.970 --> 02:22.960 because 3.0 doesn't have too much of the things around on the web. 02:22.960 --> 02:24.610 So make sure you keep an eye on that. 02:24.700 --> 02:28.120 A lot of structure that you're going to see on the Web is actually 2.0. 02:28.130 --> 02:33.430 So make sure you refer all the time the official guidelines and not the other blogs and stuff if they 02:33.430 --> 02:34.420 are not updated. 02:34.600 --> 02:35.060 Okay. 02:35.410 --> 02:39.490 So this is all what we'll be doing and let's go ahead and create a new project. 02:39.490 --> 02:42.910 So for this, I'll fire up my code. 02:43.030 --> 02:44.500 My V is my terminal. 02:44.500 --> 02:45.580 You can also do that. 02:45.580 --> 02:50.050 So if I do a quick LZ, I can see I have a social app as of now. 02:50.200 --> 02:52.330 Now let's go ahead and create a new directory. 02:52.330 --> 02:57.490 So I'm going to go ahead and call this one as my my docs would be fine. 02:57.490 --> 02:59.470 My docs ae yeah, that's fine. 02:59.560 --> 03:01.480 Let's go ahead and seed into that. 03:01.480 --> 03:02.530 My docs fine. 03:02.530 --> 03:05.170 And here this time we won't be filling up all the details. 03:05.170 --> 03:11.650 So I'm going to say just in NPM in a dash, why this allows to skip all the options and you can go ahead 03:11.650 --> 03:16.570 and later on enter all these options manually yourself and let's fire up our code editor. 03:16.570 --> 03:19.480 And by the way, we can install all the things from here as well. 03:19.660 --> 03:21.430 You can do that from VZ code as well. 03:21.490 --> 03:27.070 So this time I obviously know that I'll be using EXPRESS and I'll be using the Express, this swagger 03:27.070 --> 03:27.940 UI Express. 03:27.940 --> 03:29.350 So let's go ahead and use that. 03:29.350 --> 03:30.640 I forgot this one. 03:30.640 --> 03:34.660 So we're going to just say that I want the swagger UI express. 03:34.660 --> 03:39.310 Sometimes it's confusing to remember that whether they have these dots or not. 03:39.310 --> 03:41.950 So we're going to go ahead and use this. 03:42.760 --> 03:48.280 And apart from this, we will be needing one more thing which is again recommended or mentioned in the 03:48.280 --> 03:49.750 documentation itself. 03:49.750 --> 03:54.130 So let's go a little bit on to the bottom section here. 03:54.130 --> 03:55.650 There we go, yaml JS. 03:56.020 --> 04:00.880 So this is one we'll be working on, so go ahead and copy paste that. 04:00.880 --> 04:03.700 So these are the three major ones that we'll be using. 04:03.700 --> 04:08.290 I already have mentioned to you that how Node one is being used as a dev dependency, but this time 04:08.290 --> 04:12.640 I'm going to go ahead and install that as fully you now know and completely understand that what's the 04:12.640 --> 04:13.840 difference and all of that. 04:13.840 --> 04:17.560 So I won't be repeating that part again, so let's go ahead and install that. 04:17.560 --> 04:19.450 And this shouldn't take too much of time. 04:19.630 --> 04:23.710 Once this is all done, I would like to just open up my Visual Studio code up here. 04:23.800 --> 04:26.020 That Visual Studio V is code. 04:26.860 --> 04:27.730 So there we go. 04:27.730 --> 04:28.360 Let's open up. 04:28.360 --> 04:29.020 Yes, of course. 04:29.020 --> 04:32.320 I do trust this and let's open this up. 04:32.320 --> 04:33.850 Expand this a little bit. 04:33.850 --> 04:34.690 There we go. 04:34.690 --> 04:39.010 Now, let's see, in the package that JSON, we see all the node one and everything is up here. 04:39.040 --> 04:45.700 I would like to add a start script and that start script will simply say that please run Node Mom and 04:45.700 --> 04:49.360 I would love to run my index js with it, so save this. 04:49.360 --> 04:50.320 This is all good. 04:50.320 --> 04:58.630 We have already seen that in case of writing these documentation we need node mom dot json file. 04:58.630 --> 05:00.190 This is already done with us. 05:00.340 --> 05:01.870 And in this we are going to simply. 05:02.050 --> 05:06.190 See, I need you to monitor these extensions, which is just a long string. 05:06.190 --> 05:15.010 So Dot G's, dot JZ X and we will be going for dot yaml and this is all that we need as of now. 05:16.450 --> 05:19.960 Once this is all done, let's go ahead and create a simple index file. 05:19.960 --> 05:21.550 So let's go ahead and do that index. 05:21.730 --> 05:26.350 JS And I'm pretty sure that a whole lot of you are now fully aware of how to do that. 05:26.350 --> 05:29.350 So first thing is to require the express we have already done that. 05:29.350 --> 05:31.480 So should be shouldn't be a much of a deal. 05:31.480 --> 05:33.280 So we're going to go ahead and say express. 05:33.280 --> 05:36.190 The next thing is to create a simple variable with the express. 05:36.190 --> 05:37.480 So let's call this one Zap. 05:37.480 --> 05:39.040 Feel free to call it anything else. 05:39.280 --> 05:43.390 And we're going to go ahead and say Express is going to be responsible for this one. 05:43.510 --> 05:48.460 After that, we simply go ahead and say, Hey, app, please listen and we need to define the port number 05:48.460 --> 05:53.020 since we have already understood the importance of declaring the port into available and all of that, 05:53.020 --> 05:54.430 I wouldn't be doing that again. 05:54.430 --> 06:00.670 And this actually gives you a callback and you can go ahead and simply say console.log and we can just 06:00.670 --> 06:10.510 simply say Server is running at Port 4000 and of course, triple dot. 06:10.540 --> 06:11.620 These are important. 06:11.620 --> 06:13.150 Not important, just for fun. 06:13.150 --> 06:16.150 Okay, moving on then we have to simply create a route. 06:16.150 --> 06:20.680 So we're going to simply say app, dot, get and you know, the basic idea of it, we need to have a 06:20.680 --> 06:23.350 root something up here and then a callback. 06:23.350 --> 06:27.460 This says request, this says response and we go ahead and do like this. 06:27.460 --> 06:33.070 Then simply we can send a response and we can simply go ahead and say hello from AE. 06:33.070 --> 06:38.320 So notice how quickly we were able to move forward because obviously we have done this in the past, 06:38.320 --> 06:39.400 so this is all good. 06:39.520 --> 06:43.660 Now moving further, we are going to go back up here and we are going to say, hey, we know that we 06:43.660 --> 06:46.360 are bringing in swagger, so we need all of these lines. 06:46.360 --> 06:48.520 So of course, if you remember them, that's great. 06:48.520 --> 06:52.780 Otherwise you can go ahead and just grab them from the documentation itself. 06:52.780 --> 06:55.690 So I'm going to go ahead and grab it from the documentation. 06:56.170 --> 06:58.780 Some people just always like to write them. 06:58.780 --> 07:03.790 I think if you know what you're doing, then writing or just bringing them up makes a kind of a sane 07:03.790 --> 07:04.240 thing. 07:04.420 --> 07:07.240 Now this actually in order to run need a swagger dot yaml. 07:07.240 --> 07:09.520 Feel free to rename this file if you want. 07:09.520 --> 07:14.800 I'm not interested in that, so I'm going to go ahead and say swagger if I can write that. 07:14.800 --> 07:18.580 So I got a dot yaml and it looks great. 07:19.690 --> 07:21.610 Okay, so this one also looks great. 07:21.610 --> 07:27.430 Hopefully we haven't made any typos so we can go ahead and run the command and PM start and this should 07:27.430 --> 07:28.270 be up and running. 07:28.270 --> 07:29.110 So there we go. 07:29.440 --> 07:34.330 And now let's go back onto our favorite browser, whatever that is, and we're going to go ahead and 07:34.330 --> 07:35.380 move on to local host. 07:35.380 --> 07:37.780 It says really tiny hello from AE. 07:38.050 --> 07:40.180 Okay, so this is the basic setup that we have done. 07:40.180 --> 07:44.680 In the next video, we'll start writing the documentation and don't you worry, I'll break them up into 07:44.680 --> 07:48.460 shorter videos so that each topic actually addressed one single subject. 07:48.460 --> 07:50.320 Let's go ahead and catch up in the next video.