1 00:00:00,560 --> 00:00:07,160 In this video, let's refactor our code to use what is called express routing. 2 00:00:07,490 --> 00:00:13,820 As it stands right now, you can see how our server file is being getting bloated. 3 00:00:14,060 --> 00:00:18,620 The purpose for the server file is to start our server. 4 00:00:18,650 --> 00:00:23,570 All other business logic must be on a separate file. 5 00:00:23,630 --> 00:00:28,280 So let's see how we are going to refactor this inside the root. 6 00:00:28,280 --> 00:00:36,740 And for users, let's create one file and call it as users root or users dot JS. 7 00:00:37,670 --> 00:00:41,860 And here we are going to use the routing from experts. 8 00:00:41,870 --> 00:00:50,690 We need to require a IDs as press and what we want from the express is core router. 9 00:00:50,690 --> 00:00:56,270 So I'll make use of router is equal to express dot router. 10 00:00:57,110 --> 00:01:08,570 On the router we have all the http method talking about get posts put delete, but this is how I would 11 00:01:08,570 --> 00:01:10,720 like to name my variable. 12 00:01:10,730 --> 00:01:14,200 So I'm going to be as user route. 13 00:01:14,930 --> 00:01:15,740 All right. 14 00:01:15,740 --> 00:01:19,760 So the first one is going to be the register. 15 00:01:20,450 --> 00:01:30,050 It's going to be as user route dot post and pass in the round as we did before version one and then 16 00:01:30,050 --> 00:01:39,950 users and then the register then pass in the callback function as req response and has that. 17 00:01:39,950 --> 00:01:45,050 And this one is the same as we did on the server file. 18 00:01:45,140 --> 00:01:51,950 So let's fill out the logic so we can go ahead and then copy the logic inside that. 19 00:01:51,950 --> 00:01:56,720 So I will select that and inside here I'll paste it. 20 00:01:56,720 --> 00:02:00,290 So now how are you going to make use of this? 21 00:02:00,410 --> 00:02:10,669 Well, we are going to export this one and then pass it as a mirror to experts, going to be as users 22 00:02:10,669 --> 00:02:12,810 route or user route. 23 00:02:12,830 --> 00:02:19,130 So inside the server file, let's go ahead and then require the route. 24 00:02:19,130 --> 00:02:25,430 So here, make use of user routes and I have the auto import. 25 00:02:25,430 --> 00:02:28,330 So how are we going to make use of it? 26 00:02:28,340 --> 00:02:36,620 Well, let's arrange our import because we need to have all the environment variable before running 27 00:02:36,650 --> 00:02:39,950 our route and even before our server run. 28 00:02:39,950 --> 00:02:47,600 So this one will be up here and all other custom import must be low with the default modules or the 29 00:02:47,600 --> 00:02:49,700 modules that we installed. 30 00:02:49,910 --> 00:02:52,790 All right, so now how are we going to use it? 31 00:02:52,790 --> 00:02:55,540 That's why I name here as middleware. 32 00:02:55,580 --> 00:02:58,940 We are going to use it as a murderer. 33 00:02:59,000 --> 00:03:02,510 So how are we going to use it on the app? 34 00:03:02,510 --> 00:03:07,640 We have a method called use and this app dot use. 35 00:03:07,640 --> 00:03:15,620 Also accept any HTTP method, whether it is get post, delete or update. 36 00:03:15,620 --> 00:03:26,180 So for the meantime, let me pass in this endpoint like forward slash API and then forward slash something. 37 00:03:28,080 --> 00:03:37,560 And I'll pass in the callback as req response and ask that. 38 00:03:38,070 --> 00:03:42,990 So inside here I can go ahead and then send some text. 39 00:03:42,990 --> 00:03:49,110 For the meantime, I would say that I will call always. 40 00:03:50,070 --> 00:03:51,690 All right, so let's save it. 41 00:03:51,690 --> 00:03:57,660 And now let's get back to the client here and let's try to make a request. 42 00:03:57,660 --> 00:04:02,640 For the meantime, let's change this one to API and then something. 43 00:04:04,510 --> 00:04:05,950 And it sent. 44 00:04:06,940 --> 00:04:09,170 You can see that I will always call. 45 00:04:09,190 --> 00:04:11,680 If I change this one to get. 46 00:04:12,480 --> 00:04:14,670 You see, I go back to the same response. 47 00:04:14,670 --> 00:04:18,890 If I change this one to any of these ones, it will be called. 48 00:04:18,899 --> 00:04:24,930 So we are going to take that one as an advantage to be able to plug in the routing. 49 00:04:24,960 --> 00:04:32,310 So now let's move this one for now, because we have this function inside the user's root here. 50 00:04:32,490 --> 00:04:36,450 So I can go ahead and then use that one and let it for what? 51 00:04:36,450 --> 00:04:39,270 We have imported it here as that. 52 00:04:39,270 --> 00:04:42,630 So we are going to remove this function called here. 53 00:04:43,020 --> 00:04:47,160 And I'm going to plug in the user's root. 54 00:04:47,280 --> 00:04:47,700 All right. 55 00:04:47,700 --> 00:04:50,070 So now it goes like this. 56 00:04:50,550 --> 00:04:54,870 When I call this root, first of all, is going to match this. 57 00:04:54,960 --> 00:04:59,920 And next step is is going to run our root here, which is this. 58 00:04:59,940 --> 00:05:05,160 So behind the scene, our End Point looks something like this. 59 00:05:05,220 --> 00:05:10,140 First of all, is going to be as API for a slash something. 60 00:05:13,050 --> 00:05:20,340 And then first, last, when you got here, is going to look up the next endpoint here and it's going 61 00:05:20,340 --> 00:05:25,530 to be as the say is going to append so I can pass it here. 62 00:05:25,530 --> 00:05:31,320 So this is the entire new URL if I make use of this one. 63 00:05:31,710 --> 00:05:35,130 So we need to modify the endpoints. 64 00:05:35,160 --> 00:05:38,190 First of all, we need to have the base. 65 00:05:38,190 --> 00:05:41,670 You are looking at the user's root. 66 00:05:41,670 --> 00:05:51,300 We have the base you are starting from API version one users have a look, so now we can put this one 67 00:05:51,300 --> 00:05:52,050 as base. 68 00:05:52,050 --> 00:05:59,190 You are inside the app user so I can remove this one and outpaced the base. 69 00:05:59,190 --> 00:06:00,210 You are error. 70 00:06:00,240 --> 00:06:02,070 Remove this forward slash. 71 00:06:02,220 --> 00:06:07,110 So we need to modify this one a little bit because we have used the base. 72 00:06:07,110 --> 00:06:10,410 You are l inside the app dot you. 73 00:06:10,410 --> 00:06:13,380 So I'm going to remove this one now. 74 00:06:13,380 --> 00:06:15,750 Everything remains the same. 75 00:06:15,750 --> 00:06:23,250 So when I save this one and I make a request, let me change this one back to register and this one 76 00:06:23,550 --> 00:06:26,730 post and hit sent where we got an error. 77 00:06:26,760 --> 00:06:29,700 I think we missed something wrong here. 78 00:06:29,730 --> 00:06:31,170 Well, it's this one. 79 00:06:31,170 --> 00:06:33,180 Let's remove this one from here. 80 00:06:34,170 --> 00:06:39,630 Save it and let's make the request and we can see that it works fine. 81 00:06:39,630 --> 00:06:47,880 So let's go ahead and then refactor the entire users here so now I can cut all the users root here. 82 00:06:47,880 --> 00:06:55,080 Let's select from here down here, and I will cut it from here. 83 00:06:55,740 --> 00:06:58,530 And let me get back to the user's root. 84 00:06:58,530 --> 00:07:03,540 And here I'm going to remove this one and then paste that. 85 00:07:03,930 --> 00:07:10,350 So the difference here is we are going to change instead of app, we are going to use user's root. 86 00:07:10,350 --> 00:07:19,650 So I'll select one and press command D have multiple selection and I would change this one to use this 87 00:07:19,650 --> 00:07:20,310 root. 88 00:07:20,310 --> 00:07:27,990 So let's remove the API users from each of the endpoint. 89 00:07:39,350 --> 00:07:40,130 All right. 90 00:07:40,130 --> 00:07:43,730 So now we have refracted the easiest route. 91 00:07:43,760 --> 00:07:48,380 So let me bring this one here and the users route. 92 00:07:51,020 --> 00:07:51,770 I start. 93 00:07:51,770 --> 00:07:54,090 So let's test the endpoints. 94 00:07:54,110 --> 00:07:56,510 So this one is for register. 95 00:07:56,930 --> 00:07:57,740 It works. 96 00:07:58,310 --> 00:07:59,040 It worked. 97 00:07:59,060 --> 00:08:05,450 Look in fine details, fine profile, fine work for the poor. 98 00:08:05,930 --> 00:08:08,610 We got an error, so let's check it out. 99 00:08:08,630 --> 00:08:09,560 What is wrong? 100 00:08:12,060 --> 00:08:13,530 Profile. 101 00:08:16,630 --> 00:08:18,880 Supposed to be profile. 102 00:08:20,860 --> 00:08:22,750 Voice slash ID. 103 00:08:22,990 --> 00:08:25,470 All right, so let's try again. 104 00:08:25,480 --> 00:08:26,350 It worked. 105 00:08:26,740 --> 00:08:27,910 And then. 106 00:08:28,390 --> 00:08:30,220 Sorry, it's this one, rather. 107 00:08:32,000 --> 00:08:33,950 And then upload photo. 108 00:08:33,980 --> 00:08:34,700 It worked. 109 00:08:34,730 --> 00:08:35,990 Cover image. 110 00:08:36,020 --> 00:08:36,750 It worked. 111 00:08:36,770 --> 00:08:38,330 Password Update. 112 00:08:39,200 --> 00:08:43,690 Whet user update it worked and then look out. 113 00:08:43,700 --> 00:08:44,870 It also worked. 114 00:08:44,900 --> 00:08:50,570 Now I can see that our server file is becoming more cleaner than before. 115 00:08:50,780 --> 00:08:53,930 The next one is about the post route. 116 00:08:53,930 --> 00:08:58,250 So as we did for users, we can go ahead and do that one quickly. 117 00:08:58,250 --> 00:09:03,830 So I'm going to create one file and call this one as post dot G's. 118 00:09:03,830 --> 00:09:12,470 And inside the user is let me copy this one and paste it here and change this one to post route. 119 00:09:14,240 --> 00:09:21,680 And next step is let's go ahead and then cat or the post route inside the server file. 120 00:09:21,980 --> 00:09:26,930 So it starts from here and it's up to here. 121 00:09:26,960 --> 00:09:35,390 Cut it and let's get back to post root and paste it here and change app to post root. 122 00:09:38,290 --> 00:09:42,340 And let's remove the base u r l as we did before. 123 00:09:59,460 --> 00:10:03,750 The last step is less export module. 124 00:10:04,210 --> 00:10:08,890 Exports is equal to the post route. 125 00:10:09,070 --> 00:10:13,450 Next step is let's require it here as post route. 126 00:10:13,900 --> 00:10:16,480 The auto import is fine, which is this. 127 00:10:16,930 --> 00:10:18,780 And let's plug in. 128 00:10:18,790 --> 00:10:20,800 Let's remove this comment. 129 00:10:23,700 --> 00:10:34,800 And he wouldn't it be apt to use the base you are L was API version one and then the post and our pass 130 00:10:34,800 --> 00:10:36,940 in the post route. 131 00:10:36,960 --> 00:10:40,020 Let's try to make sure that it also work. 132 00:10:41,480 --> 00:10:43,070 Crates of posts. 133 00:10:43,900 --> 00:10:44,630 It's fine. 134 00:10:44,650 --> 00:10:45,070 Fetch. 135 00:10:45,070 --> 00:10:46,600 All is fine. 136 00:10:47,170 --> 00:10:49,120 Details is fine. 137 00:10:49,150 --> 00:10:52,510 Delete is fine and update. 138 00:10:52,510 --> 00:10:54,010 It's also fine. 139 00:10:54,280 --> 00:10:57,370 The last one will be the comment. 140 00:10:57,370 --> 00:11:00,220 So let's create one file. 141 00:11:00,250 --> 00:11:00,900 Comments. 142 00:11:00,910 --> 00:11:01,280 Dot. 143 00:11:01,300 --> 00:11:02,050 Just. 144 00:11:03,050 --> 00:11:07,250 And let's copy this import here and paste it here. 145 00:11:08,130 --> 00:11:09,270 As we did. 146 00:11:09,300 --> 00:11:12,870 Let's catch the comment from the server file. 147 00:11:13,050 --> 00:11:17,730 It also starts from here and up to here. 148 00:11:18,000 --> 00:11:23,760 So paste that one and change this one to the comments route. 149 00:11:29,050 --> 00:11:32,350 And let's rename this one to comment. 150 00:11:34,500 --> 00:11:35,550 Let's look at the base. 151 00:11:35,550 --> 00:11:40,470 You are going to be API version one and then the comment. 152 00:11:49,100 --> 00:11:50,330 And that is it. 153 00:11:50,360 --> 00:11:58,220 Last step is less export as module exports are going to be coming throughout and less required each 154 00:11:58,220 --> 00:12:00,590 year as comments route. 155 00:12:04,320 --> 00:12:07,530 So let's remove these comments. 156 00:12:08,310 --> 00:12:12,690 And make use of app to use and pass in the base. 157 00:12:12,690 --> 00:12:20,970 You are API version one and then the comments and then the comment route. 158 00:12:21,600 --> 00:12:27,120 All right, so let's test the comments as well. 159 00:12:27,150 --> 00:12:27,990 Great. 160 00:12:31,710 --> 00:12:33,800 And there we go. 161 00:12:33,810 --> 00:12:42,360 Now, we have improved the application a little bit by having a few code on the server file. 162 00:12:42,960 --> 00:12:51,810 The last help we need to implement to have complete MVC design pattern is to restructure the code inside 163 00:12:51,810 --> 00:12:52,860 the root. 164 00:12:52,860 --> 00:12:55,290 So let's get into that in the next video.