1 00:00:01,150 --> 00:00:03,130 So, after all this time 2 00:00:03,130 --> 00:00:06,850 and all this work building this huge complete project, 3 00:00:06,850 --> 00:00:09,660 it's now finally time to really deploy it 4 00:00:09,660 --> 00:00:13,370 to a web server and really share it with the world. 5 00:00:13,370 --> 00:00:15,510 So, in this video, you will learn how 6 00:00:15,510 --> 00:00:18,467 to deploy a project onto Heroku. 7 00:00:20,167 --> 00:00:22,610 And, the first thing that we actually need to do is 8 00:00:22,610 --> 00:00:25,143 to install Heroku on our computer. 9 00:00:26,870 --> 00:00:30,427 So, let's just search for Heroku NodeJS. 10 00:00:35,020 --> 00:00:38,050 And so, here, we basically have a getting started guide 11 00:00:38,050 --> 00:00:41,530 for NodeJS with Heroku 12 00:00:41,530 --> 00:00:45,000 because you can host all kinds of apps on Heroku 13 00:00:45,000 --> 00:00:48,700 like PHP or Ruby on Rails applications. 14 00:00:48,700 --> 00:00:51,190 So, it doesn't only work for NodeJS. 15 00:00:51,190 --> 00:00:54,420 And, we will take a closer look at Heroku in a second, 16 00:00:54,420 --> 00:00:57,520 but for now, let's just start by installing 17 00:00:57,520 --> 00:00:59,200 this program here. 18 00:00:59,200 --> 00:01:02,630 So, I'm in the setup part of this guide here. 19 00:01:02,630 --> 00:01:05,580 And so, now, please go ahead and install the installer 20 00:01:05,580 --> 00:01:08,540 for your platform, whether that's macOS, 21 00:01:08,540 --> 00:01:10,660 Windows, or Linux. 22 00:01:10,660 --> 00:01:14,660 Or, in this case here, I guess it only works for Ubuntu. 23 00:01:14,660 --> 00:01:17,270 No, actually it says here that it's available 24 00:01:17,270 --> 00:01:19,770 for other Linux as well. 25 00:01:19,770 --> 00:01:22,260 Anyway, please go ahead and install the version 26 00:01:22,260 --> 00:01:24,010 that you need for your computer 27 00:01:24,010 --> 00:01:27,090 and then, in the meantime, while that is installing, 28 00:01:27,090 --> 00:01:30,190 go ahead and create a new account. 29 00:01:30,190 --> 00:01:32,700 So, click here on Sign up 30 00:01:32,700 --> 00:01:36,010 and then open up your free Heroku account. 31 00:01:36,010 --> 00:01:38,890 So, yet another account that you need to create. 32 00:01:38,890 --> 00:01:41,640 So, there really are a lot of different accounts 33 00:01:41,640 --> 00:01:45,140 that you need to create in order to complete this project, 34 00:01:45,140 --> 00:01:49,310 but I guess that's just how modern web development works. 35 00:01:49,310 --> 00:01:51,730 Anyway, after you have your account created, 36 00:01:51,730 --> 00:01:55,050 let's take a quick look here at the Heroku website 37 00:01:55,050 --> 00:01:59,830 just to get an overview of what this platform is all about. 38 00:01:59,830 --> 00:02:01,700 So, Heroku is this platform 39 00:02:01,700 --> 00:02:04,870 which makes it really, really easy and hassle-free 40 00:02:04,870 --> 00:02:07,290 to deploy your web applications. 41 00:02:07,290 --> 00:02:10,360 And, again, they can use any language 42 00:02:10,360 --> 00:02:11,650 that you can imagine. 43 00:02:11,650 --> 00:02:14,600 As you see, NodeJS, Ruby on Rails, 44 00:02:14,600 --> 00:02:17,820 this one I guess is Go, or actually it's Java, 45 00:02:17,820 --> 00:02:22,050 or PHP, Python, this one is Go, right? 46 00:02:22,050 --> 00:02:27,050 And so, all kinds of apps really run on Heroku. 47 00:02:28,380 --> 00:02:30,890 So, let's see what they say here. 48 00:02:30,890 --> 00:02:35,163 And, this is mostly just marketing talk I guess. 49 00:02:36,020 --> 00:02:38,220 So, nothing all too interesting here. 50 00:02:38,220 --> 00:02:40,660 But, of course, you can take a look here 51 00:02:40,660 --> 00:02:42,550 at all these different manuals. 52 00:02:42,550 --> 00:02:45,690 And, actually it is free to get started with Heroku 53 00:02:45,690 --> 00:02:47,900 on a really basic application. 54 00:02:47,900 --> 00:02:51,120 But, of course, once you start to level that up, 55 00:02:51,120 --> 00:02:53,083 you're gonna have to start to pay. 56 00:02:54,400 --> 00:02:56,470 But, here, the free version, as you can see, 57 00:02:56,470 --> 00:02:59,600 comes with all the core platform features. 58 00:02:59,600 --> 00:03:01,820 You can even add custom domains. 59 00:03:01,820 --> 00:03:03,800 But, the only problem with it is 60 00:03:03,800 --> 00:03:06,550 that the application will basically sleep, 61 00:03:06,550 --> 00:03:08,210 so, basically, after 30 minutes 62 00:03:08,210 --> 00:03:10,283 of no one accessing the application. 63 00:03:11,760 --> 00:03:13,460 But, anyway, you can take a look 64 00:03:13,460 --> 00:03:15,660 at all of this on your own. 65 00:03:15,660 --> 00:03:18,870 So, let's now actually go back to our project here. 66 00:03:18,870 --> 00:03:21,430 And, to get started with the deployment process, 67 00:03:21,430 --> 00:03:25,300 let's start by logging into Heroku on our command line. 68 00:03:25,300 --> 00:03:28,370 And, that is going to work because of the installation 69 00:03:28,370 --> 00:03:29,367 that we just did. 70 00:03:30,290 --> 00:03:32,970 All right, let's give it some more space here. 71 00:03:32,970 --> 00:03:36,763 Clean that up and now write heroku login. 72 00:03:40,060 --> 00:03:43,350 So, if your Heroku installation was successful, 73 00:03:43,350 --> 00:03:47,410 upon typing heroku login, you should see this message here, 74 00:03:47,410 --> 00:03:50,100 press any key to open up the browser. 75 00:03:50,100 --> 00:03:52,890 So, just press really any key, as it says, 76 00:03:52,890 --> 00:03:55,663 except Q because that will exit the app. 77 00:03:57,270 --> 00:04:00,880 And so, that is then going to open up a window for you 78 00:04:00,880 --> 00:04:02,243 where you can log in. 79 00:04:04,690 --> 00:04:07,250 And, after that, just like magic, 80 00:04:07,250 --> 00:04:11,110 you will be logged in on Heroku in your command line. 81 00:04:11,110 --> 00:04:13,650 So, it should probably take a bit 82 00:04:14,490 --> 00:04:17,230 and sometimes, it doesn't even work on the first try. 83 00:04:17,230 --> 00:04:19,090 So, actually that happened to me before. 84 00:04:19,090 --> 00:04:20,873 And so, just hit control C. 85 00:04:22,990 --> 00:04:26,680 And so, on a Mac, that really is control C, not command C. 86 00:04:26,680 --> 00:04:28,163 And. Let's try that again. 87 00:04:29,370 --> 00:04:33,493 Press any key, go back to the browser, log in again. 88 00:04:35,980 --> 00:04:38,750 Go back again, and so then that's done. 89 00:04:38,750 --> 00:04:42,480 So, you see, now I'm logged in with my email address. 90 00:04:42,480 --> 00:04:44,890 So, again, this was not the first time 91 00:04:44,890 --> 00:04:47,920 it didn't work for me on the first time. 92 00:04:47,920 --> 00:04:49,500 And so, if that happened to you, 93 00:04:49,500 --> 00:04:53,120 then just do it exactly the way I did it here. 94 00:04:53,120 --> 00:04:55,130 Anyway, now, with this, we are logged 95 00:04:55,130 --> 00:04:57,660 into Heroku here in our console 96 00:04:57,660 --> 00:05:00,993 and so we should now be able to create a new project. 97 00:05:02,360 --> 00:05:05,560 Now, before doing that, we actually need to change something 98 00:05:05,560 --> 00:05:10,480 in our NPM package.json file. 99 00:05:10,480 --> 00:05:11,650 So, this one. 100 00:05:11,650 --> 00:05:13,760 And, that's because Heroku actually uses 101 00:05:13,760 --> 00:05:17,810 our start command here to start up our application. 102 00:05:17,810 --> 00:05:22,040 Now, in production, we do not want to use nodemon here. 103 00:05:22,040 --> 00:05:23,870 We simply want to run our application 104 00:05:23,870 --> 00:05:26,920 using the node command and not nodemon 105 00:05:26,920 --> 00:05:29,950 because that one is really only for development. 106 00:05:29,950 --> 00:05:32,970 And so, let's change that and I will duplicate this line 107 00:05:33,937 --> 00:05:35,587 and then we'll call this one dev. 108 00:05:36,450 --> 00:05:38,953 And then, the start one will only be node. 109 00:05:40,690 --> 00:05:43,810 So, again, in your package.json, you should always 110 00:05:43,810 --> 00:05:46,890 have this start script like this. 111 00:05:46,890 --> 00:05:49,773 So, the node command and then your entry point. 112 00:05:50,610 --> 00:05:53,920 Now, it's also important for Heroku is 113 00:05:53,920 --> 00:05:57,490 that you specify these engines here. 114 00:05:57,490 --> 00:05:59,670 And so, we did that before, I think, 115 00:05:59,670 --> 00:06:01,720 because some package, or actually 116 00:06:01,720 --> 00:06:05,230 because ESLint required it to work properly. 117 00:06:05,230 --> 00:06:07,440 But, if we hadn't set it back then, 118 00:06:07,440 --> 00:06:11,213 well, then we would need to really set it at this point. 119 00:06:12,610 --> 00:06:14,550 Now, since we changed this file, 120 00:06:14,550 --> 00:06:18,353 now, we need to commit these changes to our repository, 121 00:06:19,200 --> 00:06:24,200 so let's git add package.json here. 122 00:06:24,560 --> 00:06:25,693 And then, git commit. 123 00:06:31,820 --> 00:06:34,323 And then, with a useful commit message. 124 00:06:37,652 --> 00:06:39,660 Now, another thing that's really important 125 00:06:39,660 --> 00:06:42,640 when you deploy an application to Heroku is 126 00:06:42,640 --> 00:06:46,543 that you listen to the port at process.env.PORT. 127 00:06:47,580 --> 00:06:52,580 So, right here in the server, we actually do that down here. 128 00:06:54,500 --> 00:06:59,100 So, we specify the port variable as process.env.PORT. 129 00:06:59,100 --> 00:07:02,460 And so, again, on Heroku, that's absolutely mandatory 130 00:07:02,460 --> 00:07:04,850 because otherwise, it will not work at all. 131 00:07:04,850 --> 00:07:07,010 So, if here, for example, we just specified 132 00:07:07,010 --> 00:07:10,130 some random port, like 3000 here, 133 00:07:10,130 --> 00:07:11,780 then that would really not work 134 00:07:13,035 --> 00:07:15,050 and that's because behind the scenes, 135 00:07:15,050 --> 00:07:18,730 Heroku will actually assign a random port 136 00:07:18,730 --> 00:07:20,780 to this environment variable. 137 00:07:20,780 --> 00:07:23,270 But, a bit more about that in a second 138 00:07:24,310 --> 00:07:26,320 because now, we are really ready 139 00:07:26,320 --> 00:07:28,780 to do the actual deployment. 140 00:07:28,780 --> 00:07:31,890 And, to do that, we create a brand new Heroku project 141 00:07:31,890 --> 00:07:33,420 in our project folder. 142 00:07:33,420 --> 00:07:36,830 So, make sure that you really are in your root folder 143 00:07:36,830 --> 00:07:38,700 and then, once you're sure you're there 144 00:07:38,700 --> 00:07:42,240 and you're logged into Heroku, which we did before, 145 00:07:42,240 --> 00:07:46,943 you can then write heroku create. 146 00:07:48,160 --> 00:07:52,000 And, this will then create a new app basically 147 00:07:52,000 --> 00:07:53,890 with a completely random name. 148 00:07:53,890 --> 00:07:57,060 So, in my case, that's radiant-springs 149 00:07:57,060 --> 00:07:59,320 and then this number, but your application 150 00:07:59,320 --> 00:08:02,350 will, of course, have a completely different name. 151 00:08:02,350 --> 00:08:04,020 Now, what this did was 152 00:08:04,020 --> 00:08:06,580 to actually create a new remote branch 153 00:08:06,580 --> 00:08:08,290 in our Git repository. 154 00:08:08,290 --> 00:08:10,500 And, this branch is called heroku. 155 00:08:10,500 --> 00:08:14,090 So, remember how before, in one of the previous lectures, 156 00:08:14,090 --> 00:08:17,150 we added a remote branch pointing to GitHub 157 00:08:17,150 --> 00:08:19,263 and that branch was called origin. 158 00:08:20,160 --> 00:08:23,530 And so, then we pushed our code to that remote branch 159 00:08:23,530 --> 00:08:27,423 using git push origin master, so like this. 160 00:08:29,090 --> 00:08:30,320 Remember that? 161 00:08:30,320 --> 00:08:31,610 And so, now, as I mentioned, 162 00:08:31,610 --> 00:08:35,040 we have a new remote branch here, which is called heroku. 163 00:08:35,040 --> 00:08:38,420 And so, really, the process of deploying our application is 164 00:08:38,420 --> 00:08:41,960 as simple as pushing our code to that remote branch. 165 00:08:41,960 --> 00:08:46,740 So, git push heroku master. 166 00:08:46,740 --> 00:08:49,450 And, it really needs to be the master branch. 167 00:08:49,450 --> 00:08:53,033 It is the only branch for which this deployment works. 168 00:08:53,870 --> 00:08:55,580 But, in our case, as you see here, 169 00:08:55,580 --> 00:08:57,700 we are actually in our master branch 170 00:08:57,700 --> 00:09:01,823 and you can also see it down here in the corner of VS Code. 171 00:09:03,020 --> 00:09:04,690 And so, that's no problem. 172 00:09:04,690 --> 00:09:06,670 So, let's now run this command, 173 00:09:06,670 --> 00:09:08,780 which should then take a couple of time 174 00:09:08,780 --> 00:09:11,580 because, of course, it will upload all your files 175 00:09:11,580 --> 00:09:14,323 that are in the repository up to Heroku. 176 00:09:18,330 --> 00:09:22,340 And now, you see all of this process here going on 177 00:09:22,340 --> 00:09:23,327 and so what this is doing is 178 00:09:23,327 --> 00:09:26,640 that it's actually installing all our dependencies here 179 00:09:26,640 --> 00:09:28,380 in our new application. 180 00:09:28,380 --> 00:09:30,357 So, in our application that is now on Heroku. 181 00:09:33,500 --> 00:09:35,970 So, let's wait until of this is done 182 00:09:35,970 --> 00:09:39,153 and I'll see you back when this process has finished. 183 00:09:40,470 --> 00:09:42,270 And so, that's done. 184 00:09:42,270 --> 00:09:46,350 So, I hope you got the message, Verifying deploy... done. 185 00:09:46,350 --> 00:09:50,610 So, you see, launching, and so it really means 186 00:09:50,610 --> 00:09:53,320 that our application is now deployed to Heroku 187 00:09:53,320 --> 00:09:55,023 onto this URL. 188 00:09:56,240 --> 00:09:58,770 So, you see the build succeed. 189 00:09:58,770 --> 00:10:01,920 And, really, all these messages 190 00:10:01,920 --> 00:10:04,190 that I already talked about before. 191 00:10:04,190 --> 00:10:06,810 And so, now, in order to open up our application, 192 00:10:06,810 --> 00:10:09,703 all we need to write is heroku open. 193 00:10:11,240 --> 00:10:13,750 Now, we don't expect this to work just yet 194 00:10:13,750 --> 00:10:16,250 because all of our environment variables 195 00:10:16,250 --> 00:10:17,620 are actually not defined 196 00:10:18,670 --> 00:10:22,780 because we did exclude this configuration file here 197 00:10:22,780 --> 00:10:24,163 from our Git repository. 198 00:10:25,560 --> 00:10:27,420 But, still, just for the fun of it, 199 00:10:27,420 --> 00:10:30,720 let's actually try to open our application. 200 00:10:30,720 --> 00:10:34,450 And so, indeed, that opens up our URL, 201 00:10:34,450 --> 00:10:38,517 in this case, at radiant-springs-85848.herokuapp.com. 202 00:10:41,100 --> 00:10:44,950 So, basically, it's the subdomain of Heroku. 203 00:10:44,950 --> 00:10:46,730 And so, again, as expected, 204 00:10:46,730 --> 00:10:49,320 we actually got some error here. 205 00:10:49,320 --> 00:10:52,430 And, once more, that's because our environment variables 206 00:10:52,430 --> 00:10:55,030 are, at this point, not yet defined. 207 00:10:55,030 --> 00:10:57,730 Now, we can also take a look at these errors 208 00:10:57,730 --> 00:10:59,850 in the Heroku logs. 209 00:10:59,850 --> 00:11:02,140 So, let me show you that as well. 210 00:11:02,140 --> 00:11:06,023 So, heroku logs --tail. 211 00:11:07,710 --> 00:11:11,313 So, here, you see state changed from storing to crashed, 212 00:11:13,100 --> 00:11:15,130 so let's see what we have here. 213 00:11:15,130 --> 00:11:17,170 Actually, you see the error message 214 00:11:17,170 --> 00:11:18,930 that we created ourselves here. 215 00:11:18,930 --> 00:11:21,530 So, UNCAUGHT EXECEPTION with this emoji 216 00:11:21,530 --> 00:11:23,060 and then Shutting down... 217 00:11:27,320 --> 00:11:28,700 And, you see here, 218 00:11:28,700 --> 00:11:31,980 Cannot read property 'replace' of undefined. 219 00:11:31,980 --> 00:11:35,170 And so, again, that's because the environment variables 220 00:11:35,170 --> 00:11:37,510 are not defined at this point. 221 00:11:37,510 --> 00:11:41,053 So, let's exit these logs here, again, with control C. 222 00:11:42,860 --> 00:11:44,810 And so, now, let's actually define 223 00:11:44,810 --> 00:11:46,800 these environment variables in order 224 00:11:46,800 --> 00:11:48,790 to make our application work. 225 00:11:48,790 --> 00:11:50,060 And, the way we do that is 226 00:11:50,060 --> 00:11:52,740 to specify each environment variable 227 00:11:52,740 --> 00:11:54,960 using a special Heroku command. 228 00:11:54,960 --> 00:11:58,080 So, Heroku and other hosting platforms, 229 00:11:58,080 --> 00:12:01,000 they don't use a .env file like we did here 230 00:12:01,000 --> 00:12:03,793 in development for all our config variables. 231 00:12:05,160 --> 00:12:09,560 So, again, here in development, we use this config.env 232 00:12:09,560 --> 00:12:11,560 to put our environment variables. 233 00:12:11,560 --> 00:12:13,730 But, here in Heroku, we will define them 234 00:12:13,730 --> 00:12:14,830 in a different way. 235 00:12:14,830 --> 00:12:16,610 But, then in our code, everything 236 00:12:16,610 --> 00:12:18,543 that we have works exactly the same. 237 00:12:19,856 --> 00:12:22,120 So, let's start with the NODE_ENV variable 238 00:12:22,120 --> 00:12:24,650 that we need to set to production. 239 00:12:24,650 --> 00:12:29,650 And so, we do that by saying heroku config:set 240 00:12:32,390 --> 00:12:36,160 and then the name of the variable, NODE_ENV=production. 241 00:12:40,930 --> 00:12:43,780 And, actually, this NODE_ENV variable 242 00:12:43,780 --> 00:12:47,220 is actually set by default to production by Heroku. 243 00:12:47,220 --> 00:12:49,980 But, still, let's make 100% sure 244 00:12:49,980 --> 00:12:52,240 that it really stays this way, 245 00:12:52,240 --> 00:12:54,760 even if Heroku changes something. 246 00:12:54,760 --> 00:12:57,440 So, really, to be sure, let's still do this 247 00:12:57,440 --> 00:13:00,610 because, as we know, a lot of our code actually depends 248 00:13:00,610 --> 00:13:03,130 on this variable and it also 249 00:13:03,130 --> 00:13:07,310 can make Node applications run up to three times faster. 250 00:13:07,310 --> 00:13:09,430 I think we talked about that before. 251 00:13:09,430 --> 00:13:12,610 So, the importance of setting NODE_ENV to production. 252 00:13:12,610 --> 00:13:15,913 But, anyway, it's a good thing to do it actually. 253 00:13:16,810 --> 00:13:18,950 So, just hit return and it will 254 00:13:18,950 --> 00:13:21,400 then set this environment variable 255 00:13:21,400 --> 00:13:22,980 and restart the application. 256 00:13:22,980 --> 00:13:25,500 And so, now, all we need to do is 257 00:13:25,500 --> 00:13:27,640 to basically do this for all 258 00:13:27,640 --> 00:13:30,580 of the relevant environment variables. 259 00:13:30,580 --> 00:13:34,490 So, we did NODE_ENV, now, the port, we will not set it 260 00:13:34,490 --> 00:13:36,360 because, as I mentioned before, 261 00:13:36,360 --> 00:13:38,380 Heroku will actually, behind the scenes, 262 00:13:38,380 --> 00:13:41,533 assign a random port to our application. 263 00:13:42,470 --> 00:13:44,913 And so, next up, let's add the database. 264 00:13:46,390 --> 00:13:48,290 And, actually, let's copy all of this. 265 00:13:52,550 --> 00:13:54,000 And then, just paste it here. 266 00:13:54,940 --> 00:13:56,960 And, that didn't really work, 267 00:13:56,960 --> 00:13:59,260 so let's try that with some quotes here maybe. 268 00:14:04,170 --> 00:14:06,580 Yeah, that looks much better. 269 00:14:06,580 --> 00:14:09,380 Next up, the database password. 270 00:14:10,853 --> 00:14:12,520 Let's clear it here. 271 00:14:18,667 --> 00:14:20,334 Next up, the secret. 272 00:14:24,720 --> 00:14:26,253 So, just like this. 273 00:14:30,587 --> 00:14:34,263 And so, this is a bit boring to do it for all of them, 274 00:14:35,740 --> 00:14:38,160 but, well, we only have to do it once, 275 00:14:38,160 --> 00:14:40,853 so it's not really a big deal. 276 00:14:43,981 --> 00:14:46,710 Now, we also need this one here 277 00:14:48,020 --> 00:14:51,070 because all of this here is just for mailtrap 278 00:14:51,070 --> 00:14:54,190 and we actually do not need that in production 279 00:14:54,190 --> 00:14:56,950 because remember that when we're in production, 280 00:14:56,950 --> 00:15:00,300 all our emails are actually sent using SENDGRID 281 00:15:00,300 --> 00:15:02,230 and no longer using mailtrap. 282 00:15:02,230 --> 00:15:04,270 And so, in our Heroku application, 283 00:15:04,270 --> 00:15:06,563 we do not need these for variables. 284 00:15:07,520 --> 00:15:09,773 But, we do need the email from. 285 00:15:13,520 --> 00:15:15,163 So, that's our next one. 286 00:15:17,820 --> 00:15:19,960 Then, we need to SENDGRID_USERNAME 287 00:15:26,670 --> 00:15:28,333 as well as the password. 288 00:15:37,330 --> 00:15:40,963 And finally, our secret stripe key. 289 00:15:46,320 --> 00:15:48,130 And, with this, I think we have all 290 00:15:48,130 --> 00:15:51,530 our relevant variables set here. 291 00:15:51,530 --> 00:15:55,653 And so, let's try again, heroku open. 292 00:15:59,850 --> 00:16:04,850 And, that looks perfect, beautiful. 293 00:16:04,960 --> 00:16:08,200 So, really, our application is now deployed 294 00:16:08,200 --> 00:16:12,610 onto radiant-springs or whatever you have in your case 295 00:16:12,610 --> 00:16:15,343 and everything seems to be working beautifully. 296 00:16:16,300 --> 00:16:18,083 So, all our images are here. 297 00:16:19,050 --> 00:16:22,393 Let's take a look at a single page here as well. 298 00:16:25,280 --> 00:16:29,500 And, indeed, all of that works just beautifully. 299 00:16:29,500 --> 00:16:31,333 So, our map also shows up. 300 00:16:34,190 --> 00:16:37,850 And, yeah, it seems to work just fine. 301 00:16:37,850 --> 00:16:41,970 And, the fact that all of this works just so seamlessly 302 00:16:41,970 --> 00:16:43,360 also shows the beauty 303 00:16:43,360 --> 00:16:46,550 of having a hosted database all the time 304 00:16:46,550 --> 00:16:48,690 also during development 305 00:16:48,690 --> 00:16:50,910 because no matter if we're in development 306 00:16:50,910 --> 00:16:54,890 or in production, our database just keeps working. 307 00:16:54,890 --> 00:16:57,360 So, if we had used a local database, 308 00:16:57,360 --> 00:17:00,030 then now, we would have to export all the data 309 00:17:00,030 --> 00:17:03,890 from that local database then create a hosted database 310 00:17:03,890 --> 00:17:07,600 and upload all the data onto that hosted database. 311 00:17:07,600 --> 00:17:10,460 And so, that would, of course, create an extra step 312 00:17:10,460 --> 00:17:12,160 and some extra work. 313 00:17:12,160 --> 00:17:15,340 And, again, with this, it just works. 314 00:17:15,340 --> 00:17:19,210 So, that's a very nice developer experience right there. 315 00:17:19,210 --> 00:17:22,743 So, let's see if we can also log in here, 316 00:17:23,830 --> 00:17:26,370 which should, of course, be possible 317 00:17:26,370 --> 00:17:28,900 with laura@example 2, 3, 4. 318 00:17:34,700 --> 00:17:36,313 And, it seems so. 319 00:17:39,697 --> 00:17:40,823 So, beautiful. 320 00:17:41,960 --> 00:17:45,353 Let's see if all our book tours are still here, 321 00:17:46,470 --> 00:17:48,440 but why wouldn't they? 322 00:17:48,440 --> 00:17:51,270 And, indeed, well, it's actually only one, 323 00:17:51,270 --> 00:17:53,373 but, indeed, it is here. 324 00:17:54,460 --> 00:17:58,100 So, great, that's absolutely fantastic. 325 00:17:58,100 --> 00:18:00,420 And now, let's just take a quick look 326 00:18:00,420 --> 00:18:02,763 into our Heroku dashboard. 327 00:18:07,270 --> 00:18:09,293 So, here, let's open up Heroku. 328 00:18:11,010 --> 00:18:12,343 Close these two. 329 00:18:14,120 --> 00:18:16,390 And so, since we logged in previously here, 330 00:18:16,390 --> 00:18:19,810 this should automatically take us to the dashboard 331 00:18:19,810 --> 00:18:23,060 and that dashboard will then show you, by default, 332 00:18:23,060 --> 00:18:26,210 all the applications that you have currently deployed. 333 00:18:26,210 --> 00:18:28,800 And so, the one that we just deployed is 334 00:18:28,800 --> 00:18:30,970 this radiant-springs here. 335 00:18:30,970 --> 00:18:33,260 So, let's open that one up. 336 00:18:33,260 --> 00:18:34,390 Then, here, on the right side, 337 00:18:34,390 --> 00:18:36,180 you can see all the activity. 338 00:18:36,180 --> 00:18:39,390 For example, setting all these configuration variables 339 00:18:39,390 --> 00:18:41,040 that we just did. 340 00:18:41,040 --> 00:18:45,810 You have your resources and many of this is only interesting 341 00:18:45,810 --> 00:18:47,920 if you have a paid dyno. 342 00:18:47,920 --> 00:18:50,390 And, a dyno is really just the term 343 00:18:50,390 --> 00:18:53,340 that Heroku uses basically for a container 344 00:18:53,340 --> 00:18:54,913 in which your application runs. 345 00:18:56,366 --> 00:18:58,390 So, we have some metrics where we can see 346 00:18:58,390 --> 00:19:01,410 who is accessing the app, but, once more, 347 00:19:01,410 --> 00:19:03,250 that only works if you have a hobby 348 00:19:03,250 --> 00:19:05,093 or a professional dyno. 349 00:19:06,950 --> 00:19:09,460 But, what really matters here is the settings 350 00:19:09,460 --> 00:19:10,920 and so here, I wanted to show you 351 00:19:10,920 --> 00:19:14,420 that we can reveal the configuration variables. 352 00:19:14,420 --> 00:19:17,000 And so, instead of changing or adding them 353 00:19:17,000 --> 00:19:20,253 in the command line, we could also do so right here. 354 00:19:21,650 --> 00:19:24,170 So, these are all of them that we just added 355 00:19:24,170 --> 00:19:25,223 in the command line. 356 00:19:27,250 --> 00:19:31,540 Then, another very important thing is up here in More, 357 00:19:31,540 --> 00:19:33,623 we can actually see our logs. 358 00:19:37,560 --> 00:19:40,710 So, let's wait for it here. 359 00:19:40,710 --> 00:19:44,430 And so, Heroku then gives you all of these loggings really 360 00:19:44,430 --> 00:19:47,190 for everything that happens in your application. 361 00:19:47,190 --> 00:19:49,640 So, when we opened up the app in the browser, 362 00:19:49,640 --> 00:19:52,300 it requested all of these files 363 00:19:52,300 --> 00:19:54,283 as you can see here, for example. 364 00:19:56,600 --> 00:19:58,380 So, really, everything that's going on 365 00:19:58,380 --> 00:20:00,870 will be right here in these logs. 366 00:20:00,870 --> 00:20:04,210 And so, if your app crashes or if something happens 367 00:20:04,210 --> 00:20:07,660 and basically everything for which we used a console.log 368 00:20:07,660 --> 00:20:10,843 will then end up showing here in these logs. 369 00:20:10,843 --> 00:20:13,400 And so, these were the Heroku logs 370 00:20:13,400 --> 00:20:15,933 that I mentioned in one of the previous lectures. 371 00:20:17,987 --> 00:20:19,770 Now, one thing that we can do is 372 00:20:19,770 --> 00:20:22,300 to actually change the name of our application. 373 00:20:22,300 --> 00:20:25,410 So, instead of it being called this random name, 374 00:20:25,410 --> 00:20:27,800 we can give it a more meaningful name. 375 00:20:27,800 --> 00:20:29,960 Now, we could do that here, but that would 376 00:20:29,960 --> 00:20:34,090 then kind of mess up our application in the terminal 377 00:20:34,090 --> 00:20:35,810 on our local computer. 378 00:20:35,810 --> 00:20:38,620 And so, instead, what we do is 379 00:20:38,620 --> 00:20:40,763 to change the name directly here. 380 00:20:41,970 --> 00:20:46,813 So, let's say, heroku apps:rename, like this, 381 00:20:48,460 --> 00:20:51,530 and then the new name for the application. 382 00:20:51,530 --> 00:20:53,470 And, I will call it natours, 383 00:20:53,470 --> 00:20:55,740 but you, of course, will then not be able 384 00:20:55,740 --> 00:20:59,420 to also call it natours because that subdomain 385 00:20:59,420 --> 00:21:01,620 will then already be taken. 386 00:21:01,620 --> 00:21:04,350 So, you can then call it natours with your name 387 00:21:04,350 --> 00:21:07,660 or with your username or really any other word 388 00:21:07,660 --> 00:21:08,633 that you'd like. 389 00:21:10,000 --> 00:21:12,763 So, I'll go ahead and now, really call it natours. 390 00:21:13,660 --> 00:21:18,320 Oh, but I see that someone already took that name from me, 391 00:21:18,320 --> 00:21:20,223 so that's unfortunate. 392 00:21:21,304 --> 00:21:24,360 But, probably that's because I already used the name natours 393 00:21:24,360 --> 00:21:26,570 in a project in another course. 394 00:21:26,570 --> 00:21:28,853 And so, someone must have taken it. 395 00:21:30,231 --> 00:21:33,080 So, let's call it natoursapp and, of course, 396 00:21:33,080 --> 00:21:35,440 I need to then write everything else. 397 00:21:35,440 --> 00:21:39,660 So, heroku apps:rename 398 00:21:39,660 --> 00:21:41,840 and then natoursapp. 399 00:21:41,840 --> 00:21:44,033 So, hopefully, no one took this one. 400 00:21:45,780 --> 00:21:47,980 And, it seems it's doing something, 401 00:21:47,980 --> 00:21:51,020 but someone has already taken that one as well. 402 00:21:51,020 --> 00:21:52,373 Well, that's really weird. 403 00:21:53,930 --> 00:21:56,120 So, I guess I have a lot of students out there 404 00:21:56,120 --> 00:21:59,110 who post their apps to Heroku, 405 00:21:59,110 --> 00:22:02,250 so I will just follow the example that I gave earlier 406 00:22:02,250 --> 00:22:03,920 and will add my name here. 407 00:22:03,920 --> 00:22:07,800 So, third try with natours-jonas. 408 00:22:07,800 --> 00:22:12,683 So, yeah, let's hope that the third time, it will work. 409 00:22:13,780 --> 00:22:15,493 So, let's wait for it here. 410 00:22:17,880 --> 00:22:18,960 And, that's it. 411 00:22:18,960 --> 00:22:21,163 So, let's try heroku open. 412 00:22:24,800 --> 00:22:27,150 All right, and here we go. 413 00:22:27,150 --> 00:22:29,030 And, now, at this point, the old version 414 00:22:29,030 --> 00:22:31,330 will actually no longer work. 415 00:22:31,330 --> 00:22:34,163 So, this one is gone, let's close it. 416 00:22:35,030 --> 00:22:36,780 Let's go back to the Personal here. 417 00:22:38,010 --> 00:22:40,840 And so, yeah, here we go. 418 00:22:40,840 --> 00:22:42,993 That is natours-jonas. 419 00:22:44,750 --> 00:22:49,640 Great, so our website is now officially in production. 420 00:22:49,640 --> 00:22:52,070 Now, another thing that I want to do here is 421 00:22:52,070 --> 00:22:55,340 to actually update the Postman environment variable 422 00:22:55,340 --> 00:22:57,580 for production, remember that? 423 00:22:57,580 --> 00:22:59,480 So, let's go ahead and copy this here. 424 00:23:00,440 --> 00:23:03,610 And, also not how actually automatically 425 00:23:03,610 --> 00:23:07,000 we are on https here on Heroku. 426 00:23:07,000 --> 00:23:10,620 So, Heroku does all the SSL certificate management 427 00:23:10,620 --> 00:23:14,810 for us behind the scenes so that our page is always secure, 428 00:23:14,810 --> 00:23:16,840 always with https. 429 00:23:16,840 --> 00:23:20,773 So, that's another really nice feature of Heroku. 430 00:23:22,540 --> 00:23:24,860 So, now, here in Postman, 431 00:23:24,860 --> 00:23:29,860 let's go ahead and change this production and the URL. 432 00:23:30,450 --> 00:23:32,733 Of course, this one was just a placeholder. 433 00:23:33,680 --> 00:23:38,120 And, instead, what we want is now our real production URL. 434 00:23:38,120 --> 00:23:40,593 And, I'm not sure if it is correct like this, 435 00:23:41,820 --> 00:23:44,900 but just update and compare it with the development one. 436 00:23:44,900 --> 00:23:46,340 But, indeed, it is. 437 00:23:46,340 --> 00:23:48,823 So, it needs to end with this slash. 438 00:23:50,380 --> 00:23:53,483 And so, the one that we just did does that as well. 439 00:23:54,320 --> 00:23:57,220 So, let's update, close, and now, 440 00:23:57,220 --> 00:24:00,560 all we need to do here is to change from development 441 00:24:00,560 --> 00:24:03,683 to this production natours environment. 442 00:24:04,560 --> 00:24:08,660 And so, now, if, for example, I try to get Get All Tours, 443 00:24:08,660 --> 00:24:11,260 which is actually the one that we had open, 444 00:24:11,260 --> 00:24:13,860 then let's see if that works. 445 00:24:13,860 --> 00:24:15,363 Let's turn all of this off. 446 00:24:17,200 --> 00:24:20,093 And, indeed, it does, great. 447 00:24:21,400 --> 00:24:23,220 Let's see if we can actually 448 00:24:23,220 --> 00:24:26,543 see the complete URL somewhere here. 449 00:24:28,270 --> 00:24:29,823 Well, it doesn't really show. 450 00:24:31,870 --> 00:24:34,110 But, anyway, it doesn't really matter 451 00:24:34,110 --> 00:24:37,810 because we still know that it did actually work. 452 00:24:37,810 --> 00:24:40,110 So, we now really got this data back here 453 00:24:40,110 --> 00:24:43,860 from our production API and we can easily prove that 454 00:24:43,860 --> 00:24:46,470 because the development version is currently 455 00:24:46,470 --> 00:24:48,010 not even running. 456 00:24:48,010 --> 00:24:50,943 So, if we send this, we get this error. 457 00:24:54,830 --> 00:24:58,420 So, once more, really, congratulations 458 00:24:58,420 --> 00:25:02,970 for almost now finishing the project at this point. 459 00:25:02,970 --> 00:25:04,920 It's already at the live server 460 00:25:04,920 --> 00:25:07,260 and you can, at this point, share your project 461 00:25:07,260 --> 00:25:10,650 with the world and show everyone what you've accomplished 462 00:25:10,650 --> 00:25:13,883 after all of this work building this project. 463 00:25:14,720 --> 00:25:18,420 Just one more really small thing that I wanted to do here, 464 00:25:18,420 --> 00:25:22,720 as I said in the last lecture, is to test that compression. 465 00:25:22,720 --> 00:25:27,320 So, let's just search for test gzip compression here. 466 00:25:30,740 --> 00:25:33,850 And then, that should be this first result here, 467 00:25:33,850 --> 00:25:35,163 Gift of Speed. 468 00:25:36,150 --> 00:25:40,710 And so, if we enter our URL here and then check, let's see. 469 00:25:42,450 --> 00:25:45,200 And, we see GZIP Is Enabled. 470 00:25:45,200 --> 00:25:47,903 And so, that is because of that compression package 471 00:25:47,903 --> 00:25:50,200 that we used in the last lecture. 472 00:25:50,200 --> 00:25:53,380 So, originally, our page would have 14K, 473 00:25:53,380 --> 00:25:55,560 but then compressed, it's 2K. 474 00:25:55,560 --> 00:25:58,610 And, of course, that doesn't make a big difference 475 00:25:58,610 --> 00:26:02,610 in this case, but for a much larger page, of course, 476 00:26:02,610 --> 00:26:05,903 it can really make a difference for your users. 477 00:26:06,840 --> 00:26:10,470 Perfect, now, in the next couple of videos, 478 00:26:10,470 --> 00:26:12,740 there's only a couple of small things 479 00:26:12,740 --> 00:26:15,023 that we still need to fix here. 480 00:26:16,020 --> 00:26:17,330 And so, we will do that 481 00:26:17,330 --> 00:26:20,200 over the next two or three lectures though. 482 00:26:20,200 --> 00:26:21,730 And so, after that is 483 00:26:21,730 --> 00:26:24,463 when the project is really 100% finished.