1 00:00:01,030 --> 00:00:04,400 ‫We're almost ready to deploy our application now. 2 00:00:04,400 --> 00:00:05,860 ‫But before we do that, 3 00:00:05,860 --> 00:00:07,750 ‫there is actually a couple of things 4 00:00:07,750 --> 00:00:09,410 ‫that we should take care of. 5 00:00:09,410 --> 00:00:10,883 ‫And so let's do that now. 6 00:00:12,640 --> 00:00:14,570 ‫And the first thing that I want to do 7 00:00:14,570 --> 00:00:15,837 ‫is to install a package 8 00:00:15,837 --> 00:00:19,060 ‫that's gonna compress all our responses. 9 00:00:19,060 --> 00:00:22,820 ‫So basically, whenever we send a text response to a client, 10 00:00:22,820 --> 00:00:26,020 ‫no matter if that's JSON or HTML code. 11 00:00:26,020 --> 00:00:27,520 ‫With the compression package, 12 00:00:27,520 --> 00:00:30,820 ‫that text will then be dramatically compressed. 13 00:00:30,820 --> 00:00:33,990 ‫All right, so let's install here. 14 00:00:33,990 --> 00:00:38,123 ‫Npm install, and simply, compression. 15 00:00:39,400 --> 00:00:40,233 ‫All right. 16 00:00:41,200 --> 00:00:42,863 ‫So let's include that here. 17 00:00:51,061 --> 00:00:53,160 ‫Now, so this will then expose 18 00:00:53,160 --> 00:00:54,983 ‫a very simple middle layer function 19 00:00:54,983 --> 00:00:56,820 ‫that we simply have to plug 20 00:00:56,820 --> 00:00:59,020 ‫into our middle layer stack. 21 00:00:59,020 --> 00:01:00,773 ‫So let's do that somewhere here. 22 00:01:02,110 --> 00:01:05,260 ‫Close to the end, doesn't really matter. 23 00:01:05,260 --> 00:01:07,133 ‫So app.use, 24 00:01:08,060 --> 00:01:10,570 ‫enter in there call compression. 25 00:01:10,570 --> 00:01:13,400 ‫So this here will then return a middle left function 26 00:01:13,400 --> 00:01:15,620 ‫which is then again going to compress 27 00:01:15,620 --> 00:01:17,910 ‫all the text that is sent to clients. 28 00:01:17,910 --> 00:01:20,520 ‫So it's not going to be working for images 29 00:01:20,520 --> 00:01:23,240 ‫because these are usually already compressed. 30 00:01:23,240 --> 00:01:26,393 ‫So for example, a JPEG format is already compressed. 31 00:01:28,090 --> 00:01:30,780 ‫So this is only going to be working for text. 32 00:01:30,780 --> 00:01:33,490 ‫So once our website is actually deployed, 33 00:01:33,490 --> 00:01:37,490 ‫we will then test if this compression is actually active. 34 00:01:37,490 --> 00:01:40,540 ‫Anyway, the next step before deploying our app 35 00:01:40,540 --> 00:01:43,820 ‫is to get rid of most of the console.logs 36 00:01:43,820 --> 00:01:45,460 ‫that we still have in our code. 37 00:01:45,460 --> 00:01:48,230 ‫And that's just because these logins will end up 38 00:01:48,230 --> 00:01:50,053 ‫in our hosting platform logs. 39 00:01:50,990 --> 00:01:54,690 ‫And so we don't want to pollute these logs in production. 40 00:01:54,690 --> 00:01:55,730 ‫Okay. 41 00:01:55,730 --> 00:01:58,173 ‫So let's just quickly search here for console. 42 00:02:01,310 --> 00:02:03,563 ‫And as you can see, there are a lot of them. 43 00:02:04,400 --> 00:02:06,830 ‫So this one is already commented out. 44 00:02:06,830 --> 00:02:09,563 ‫So I'm not going to work on that one. 45 00:02:11,010 --> 00:02:13,870 ‫But this one here, let's actually get rid of. 46 00:02:13,870 --> 00:02:15,370 ‫And so now, one by one, 47 00:02:15,370 --> 00:02:17,620 ‫we will take a look at all of them 48 00:02:17,620 --> 00:02:19,230 ‫and the ones that are not relevant 49 00:02:19,230 --> 00:02:21,700 ‫we will simply comment them out. 50 00:02:21,700 --> 00:02:22,880 ‫All right. 51 00:02:22,880 --> 00:02:26,330 ‫Here in the error controller we also have a ton of them 52 00:02:26,330 --> 00:02:28,033 ‫but some are actually relevant. 53 00:02:29,570 --> 00:02:31,130 ‫Now, not this one. 54 00:02:31,130 --> 00:02:33,130 ‫Let's actually get completely rid of it. 55 00:02:36,970 --> 00:02:38,240 ‫Also not this one, 56 00:02:38,240 --> 00:02:40,190 ‫but then here we have these three 57 00:02:40,190 --> 00:02:41,920 ‫that we actually created on purpose 58 00:02:41,920 --> 00:02:45,520 ‫so that they end up in our hosting platform logs. 59 00:02:45,520 --> 00:02:46,353 ‫Okay. 60 00:02:46,353 --> 00:02:49,140 ‫So remember that we set it up in a way 61 00:02:49,140 --> 00:02:52,290 ‫that when there is an error on the render website 62 00:02:52,290 --> 00:02:54,160 ‫then we'd then get a log 63 00:02:54,160 --> 00:02:56,150 ‫of the error that actually happened. 64 00:02:56,150 --> 00:02:58,550 ‫Together with this emoji here. 65 00:02:58,550 --> 00:03:00,470 ‫And so each time we see this, 66 00:03:00,470 --> 00:03:02,950 ‫we can then easily identify in our logs 67 00:03:02,950 --> 00:03:05,890 ‫that something bad happened on our side. 68 00:03:05,890 --> 00:03:08,310 ‫Okay, and so we have a couple more here. 69 00:03:08,310 --> 00:03:11,250 ‫For example, for other unknown errors where we 70 00:03:11,250 --> 00:03:14,720 ‫do not want to leak the error details to the client. 71 00:03:14,720 --> 00:03:17,293 ‫And so these ones are okay to keep them. 72 00:03:18,380 --> 00:03:20,250 ‫This one we also want to keep 73 00:03:20,250 --> 00:03:22,140 ‫in order to inform us in the logs 74 00:03:22,140 --> 00:03:24,523 ‫that the database connection was successful. 75 00:03:25,440 --> 00:03:27,186 ‫These ones here as well. 76 00:03:27,186 --> 00:03:30,500 ‫This one here is actually in the import-dev-data 77 00:03:30,500 --> 00:03:32,153 ‫so they are not important at all. 78 00:03:34,290 --> 00:03:36,523 ‫Anyway, all the logs here, let's keep them. 79 00:03:38,610 --> 00:03:41,298 ‫Then here, we have this one here, 80 00:03:41,298 --> 00:03:45,020 ‫that we only really did in order to use this middle layer. 81 00:03:45,020 --> 00:03:48,200 ‫So let's actually turn off this middle layer. 82 00:03:48,200 --> 00:03:50,140 ‫Which again we only really used 83 00:03:50,140 --> 00:03:52,733 ‫to test this post find middle layer. 84 00:03:54,520 --> 00:03:56,533 ‫Next up in the user model. 85 00:03:57,710 --> 00:04:00,690 ‫Well, this one we also do not want. 86 00:04:00,690 --> 00:04:03,293 ‫This was just once more for testing purposes. 87 00:04:04,210 --> 00:04:06,370 ‫Then we have package JSON, 88 00:04:06,370 --> 00:04:08,593 ‫so these are actually not even come to the logs. 89 00:04:08,593 --> 00:04:10,470 ‫Then we have to bundle 90 00:04:10,470 --> 00:04:13,180 ‫where we are not going to change anything. 91 00:04:13,180 --> 00:04:14,943 ‫Then we have index.js. 92 00:04:17,180 --> 00:04:20,030 ‫So that's our client side JavaScript. 93 00:04:20,030 --> 00:04:22,473 ‫So let's get rid of this console.log here. 94 00:04:25,848 --> 00:04:28,840 ‫Then we also have some more here in logout 95 00:04:28,840 --> 00:04:30,640 ‫but this one let's actually keep it. 96 00:04:31,600 --> 00:04:33,263 ‫Some more in stripe. 97 00:04:34,210 --> 00:04:36,840 ‫And we're not interested here in the session. 98 00:04:36,840 --> 00:04:38,940 ‫But this one here when there is an error 99 00:04:38,940 --> 00:04:40,133 ‫is actually okay. 100 00:04:41,660 --> 00:04:43,560 ‫And then in server.js, 101 00:04:43,560 --> 00:04:44,760 ‫we have these ones here, 102 00:04:44,760 --> 00:04:47,160 ‫which we actually, again, did on purpose. 103 00:04:47,160 --> 00:04:51,120 ‫So that they really end up showing in our log files. 104 00:04:51,120 --> 00:04:53,170 ‫And don't worry if you don't really know 105 00:04:53,170 --> 00:04:55,120 ‫what I mean with log files. 106 00:04:55,120 --> 00:04:56,790 ‫You will see once we actually put 107 00:04:56,790 --> 00:04:59,490 ‫our application onto Heroku. 108 00:04:59,490 --> 00:05:02,980 ‫So I will show you with the log files by then, all right. 109 00:05:02,980 --> 00:05:06,360 ‫Anyway, all of these console.logs here 110 00:05:06,360 --> 00:05:07,373 ‫are on purpose. 111 00:05:08,550 --> 00:05:10,010 ‫And so is this one here 112 00:05:10,010 --> 00:05:12,533 ‫about the successful database connection. 113 00:05:13,410 --> 00:05:14,320 ‫This one here as well 114 00:05:14,320 --> 00:05:17,410 ‫informing us the port where the app is running. 115 00:05:17,410 --> 00:05:20,063 ‫And this one, and this one are also important. 116 00:05:21,440 --> 00:05:22,680 ‫All right. 117 00:05:22,680 --> 00:05:25,080 ‫And so with this we took care of all the 118 00:05:25,080 --> 00:05:27,880 ‫unnecessary console.logs that we're only just 119 00:05:27,880 --> 00:05:30,210 ‫polluting our log outputs. 120 00:05:30,210 --> 00:05:33,893 ‫Okay, so let's close all of these files here. 121 00:05:40,020 --> 00:05:41,230 ‫All right. 122 00:05:41,230 --> 00:05:42,460 ‫And now, next step, 123 00:05:42,460 --> 00:05:45,190 ‫let's change URLs or API codes 124 00:05:45,190 --> 00:05:47,073 ‫in the client side, JavaScript. 125 00:05:48,540 --> 00:05:51,720 ‫So for example here in login.js, 126 00:05:51,720 --> 00:05:54,170 ‫right now we do this API codes 127 00:05:54,170 --> 00:05:56,300 ‫to this development API. 128 00:05:56,300 --> 00:05:58,803 ‫So here, we of course, have our development URL. 129 00:06:00,293 --> 00:06:01,126 ‫And so like this, 130 00:06:01,126 --> 00:06:03,090 ‫it's not going to work in production 131 00:06:03,090 --> 00:06:04,840 ‫because obviously from there, 132 00:06:04,840 --> 00:06:08,740 ‫we are not gonna be able to access any development URL. 133 00:06:08,740 --> 00:06:10,000 ‫And the same up here. 134 00:06:10,000 --> 00:06:13,050 ‫But fortunately, there is a very simple solution. 135 00:06:13,050 --> 00:06:17,360 ‫So all we need to do is to really get rid of this part. 136 00:06:17,360 --> 00:06:19,760 ‫So if we just delete it like this, 137 00:06:19,760 --> 00:06:22,740 ‫then we're gonna end up with this relative URL. 138 00:06:22,740 --> 00:06:24,810 ‫And since the API and the website 139 00:06:24,810 --> 00:06:27,060 ‫are hosted on the same server 140 00:06:27,060 --> 00:06:29,430 ‫this is gonna work perfectly fine. 141 00:06:29,430 --> 00:06:31,410 ‫So doing it like this is a bit like 142 00:06:31,410 --> 00:06:35,550 ‫specifying the path to images in the HTML. 143 00:06:35,550 --> 00:06:38,670 ‫For example, here in the overview page, 144 00:06:38,670 --> 00:06:40,230 ‫where we have these images, 145 00:06:40,230 --> 00:06:42,660 ‫we just simply say "/img" 146 00:06:42,660 --> 00:06:44,990 ‫and that will then go to the current URL 147 00:06:44,990 --> 00:06:48,510 ‫and will then add that path onto to that. 148 00:06:48,510 --> 00:06:49,343 ‫Okay. 149 00:06:49,343 --> 00:06:51,980 ‫And so the same thing is going to be happening here. 150 00:06:51,980 --> 00:06:52,930 ‫Okay. 151 00:06:52,930 --> 00:06:56,620 ‫Now again, this only works because the API and the website 152 00:06:56,620 --> 00:06:59,310 ‫are basically using the same URL. 153 00:06:59,310 --> 00:07:01,810 ‫So we're hosting them on the same place. 154 00:07:01,810 --> 00:07:03,660 ‫But if you were hosting your website 155 00:07:03,660 --> 00:07:05,880 ‫or your front end on one URL, 156 00:07:05,880 --> 00:07:08,260 ‫and then your API on another URL, 157 00:07:08,260 --> 00:07:11,110 ‫then it wouldn't work like this, okay. 158 00:07:11,110 --> 00:07:14,730 ‫But in this simple application we can just do it like this 159 00:07:14,730 --> 00:07:17,173 ‫because we have this very simple set up. 160 00:07:20,160 --> 00:07:22,880 ‫So let's delete it here in login. 161 00:07:22,880 --> 00:07:26,030 ‫In the index I believe we don't have any URLs. 162 00:07:27,560 --> 00:07:28,563 ‫Yeah that's right. 163 00:07:29,460 --> 00:07:31,140 ‫Also not in the alerts. 164 00:07:31,140 --> 00:07:34,063 ‫Not in Mapbox I believe. 165 00:07:36,090 --> 00:07:36,923 ‫Nope. 166 00:07:38,280 --> 00:07:39,763 ‫But certainly in stripe. 167 00:07:40,780 --> 00:07:42,523 ‫So to get our session. 168 00:07:43,890 --> 00:07:46,880 ‫So we can just do the exact same thing here. 169 00:07:46,880 --> 00:07:48,430 ‫And also in the updateSettings. 170 00:07:52,940 --> 00:07:54,350 ‫Okay. 171 00:07:54,350 --> 00:07:55,183 ‫Give it a save. 172 00:07:55,183 --> 00:07:56,800 ‫And all of them. 173 00:07:56,800 --> 00:07:59,780 ‫And so that one is fixed as well. 174 00:07:59,780 --> 00:08:02,890 ‫And now finally, and continuing working on 175 00:08:02,890 --> 00:08:04,460 ‫the client side JavaScript, 176 00:08:04,460 --> 00:08:06,473 ‫we need to create our final bundle. 177 00:08:07,370 --> 00:08:08,250 ‫All right. 178 00:08:08,250 --> 00:08:11,420 ‫So right now, this is our bundle JavaScript file. 179 00:08:11,420 --> 00:08:13,680 ‫But remember that this was just created 180 00:08:13,680 --> 00:08:15,453 ‫using the watch function. 181 00:08:17,607 --> 00:08:18,920 ‫So in our package.json 182 00:08:18,920 --> 00:08:22,350 ‫we have this watch.js script which will just create 183 00:08:22,350 --> 00:08:25,540 ‫a new bundle whenever we change one of the files. 184 00:08:25,540 --> 00:08:27,030 ‫But without any compression, 185 00:08:27,030 --> 00:08:29,723 ‫or without any performance optimization. 186 00:08:30,720 --> 00:08:33,670 ‫But now that we're really done with all our JavaScript 187 00:08:33,670 --> 00:08:36,430 ‫we are ready to actually build our JavaScript 188 00:08:36,430 --> 00:08:38,200 ‫into a final bundle. 189 00:08:38,200 --> 00:08:42,120 ‫And here we should replace this watch with build, 190 00:08:42,120 --> 00:08:43,730 ‫and so that will then create 191 00:08:43,730 --> 00:08:46,860 ‫our final compressed JavaScript bundle. 192 00:08:46,860 --> 00:08:48,100 ‫All right. 193 00:08:48,100 --> 00:08:50,590 ‫So let's try that out here now. 194 00:08:50,590 --> 00:08:51,963 ‫With npm run. 195 00:08:54,190 --> 00:08:57,023 ‫And once more with tab to auto complete. 196 00:09:00,050 --> 00:09:01,810 ‫So let's see if... 197 00:09:01,810 --> 00:09:03,530 ‫And it's done. 198 00:09:03,530 --> 00:09:06,593 ‫And so let's take a look at our bundle now. 199 00:09:07,610 --> 00:09:10,560 ‫And to see that now, it's really 200 00:09:10,560 --> 00:09:12,003 ‫this nicely compressed. 201 00:09:13,840 --> 00:09:14,800 ‫All right. 202 00:09:14,800 --> 00:09:19,000 ‫Now you also see that we have a ton of these new files here 203 00:09:19,000 --> 00:09:23,110 ‫and that's because you're in our file tree. 204 00:09:23,110 --> 00:09:26,230 ‫Parcel actually creates this cache folder. 205 00:09:26,230 --> 00:09:31,230 ‫But we do not want that folder in our git depository. 206 00:09:31,360 --> 00:09:32,193 ‫Right. 207 00:09:32,193 --> 00:09:33,300 ‫So let's add that here. 208 00:09:38,610 --> 00:09:39,610 ‫And so now 209 00:09:39,610 --> 00:09:42,280 ‫you see that automatically as soon as we save it, 210 00:09:42,280 --> 00:09:44,560 ‫it will then go back to 211 00:09:44,560 --> 00:09:47,910 ‫the original files that were updated. 212 00:09:47,910 --> 00:09:48,743 ‫Okay. 213 00:09:48,743 --> 00:09:51,380 ‫So once more, VS Code is really smart 214 00:09:51,380 --> 00:09:54,380 ‫about everything related to git. 215 00:09:54,380 --> 00:09:55,213 ‫All right. 216 00:09:56,550 --> 00:09:57,383 ‫Okay. 217 00:09:57,383 --> 00:09:59,403 ‫And I think that's actually it. 218 00:10:00,755 --> 00:10:03,840 ‫So our application is now prepared to really be deployed. 219 00:10:03,840 --> 00:10:06,800 ‫And so now the last step is to actually commit 220 00:10:06,800 --> 00:10:10,300 ‫all of these modified files to our repository. 221 00:10:10,300 --> 00:10:13,490 ‫So remember that the first step is to add all the files 222 00:10:13,490 --> 00:10:14,643 ‫to the staging area. 223 00:10:15,510 --> 00:10:19,740 ‫So git add, and in this case, all of the files. 224 00:10:19,740 --> 00:10:20,660 ‫All right. 225 00:10:20,660 --> 00:10:24,880 ‫And now all we need to do is git commit, 226 00:10:24,880 --> 00:10:27,907 ‫then the message, and let's say, 227 00:10:27,907 --> 00:10:32,907 ‫"Prepared app for deployment". 228 00:10:34,970 --> 00:10:35,803 ‫Great! 229 00:10:35,803 --> 00:10:38,820 ‫So you see that all our modifications are gone. 230 00:10:38,820 --> 00:10:40,290 ‫Also from here. 231 00:10:40,290 --> 00:10:42,700 ‫Which means that the current working branch, 232 00:10:42,700 --> 00:10:44,333 ‫is so called clean. 233 00:10:45,735 --> 00:10:48,810 ‫And so yeah, we're actually now ready to deploy our app 234 00:10:48,810 --> 00:10:49,823 ‫in the next video.