NOTE This file was generated by Descript 1 00:00:00,219 --> 00:00:01,929 Hi guys and welcome back. 2 00:00:01,959 --> 00:00:05,230 In this video, we're going to be deploying our app to Heroku. 3 00:00:05,500 --> 00:00:09,700 The first thing we have to do is go to github.com and we're 4 00:00:09,700 --> 00:00:10,930 going to create an account. 5 00:00:11,169 --> 00:00:14,889 So if you haven't got a GitHub account yet, go ahead and create one it's free. 6 00:00:15,309 --> 00:00:18,310 And once you've done that, you can come here and you'll see something 7 00:00:18,310 --> 00:00:19,450 that looks more or less like this. 8 00:00:19,720 --> 00:00:22,480 And we're going to go ahead and create a new repository. 9 00:00:23,080 --> 00:00:28,010 GitHub is a place where we can store our projects and our project code 10 00:00:28,279 --> 00:00:33,956 a repository is another word for a central code storage area, essentially. 11 00:00:34,226 --> 00:00:37,286 You can share repositories with other people so that two or more 12 00:00:37,286 --> 00:00:41,066 people can collaborate on a single project, but you can also use 13 00:00:41,066 --> 00:00:43,766 repositories to share your code online. 14 00:00:44,306 --> 00:00:47,426 We're going to do that at this point, put our code in a repository, 15 00:00:47,516 --> 00:00:49,436 so that Heroku can then access it. 16 00:00:49,740 --> 00:00:54,720 When you click on create a new repository, you can then give your repository a name. 17 00:00:54,839 --> 00:00:59,940 I'm going to call mine Python web microblog, and then you can give 18 00:00:59,940 --> 00:01:01,260 it a description if you want. 19 00:01:01,290 --> 00:01:05,069 And finally, and the very important part is we're going to make it private. 20 00:01:05,400 --> 00:01:10,289 This is so that we can choose who can see and commit to this repository. 21 00:01:10,770 --> 00:01:15,450 Because we've got our MongoDB URI, including our username and password 22 00:01:15,630 --> 00:01:19,259 in our code, we want to make sure that we use a private repository so 23 00:01:19,259 --> 00:01:21,539 that nobody else can see that code. 24 00:01:22,110 --> 00:01:26,250 We're then going to untick all of these, make sure that they are not checked and 25 00:01:26,250 --> 00:01:28,410 we're going to create the repository. 26 00:01:29,110 --> 00:01:31,710 After that you'll see something that looks a little bit scary, but we 27 00:01:31,710 --> 00:01:33,180 don't have to worry about any of this. 28 00:01:33,750 --> 00:01:39,660 Git is a tool that we can use to add our files to repositories like GitHub. 29 00:01:39,990 --> 00:01:42,580 But for now, we're not going to learn about git. 30 00:01:42,600 --> 00:01:45,030 We will look at that later on in the course, we're going 31 00:01:45,030 --> 00:01:47,130 to upload our files manually. 32 00:01:47,550 --> 00:01:52,680 So what to do here is grab all your project files and drag them into there. 33 00:01:53,446 --> 00:01:57,776 So what I've done now is I have opened the folder of my project here 34 00:01:57,776 --> 00:02:01,976 with my Windows Explorer, and we're going to grab all the relevant files 35 00:02:02,036 --> 00:02:03,746 and put them into the micro blog. 36 00:02:03,956 --> 00:02:05,876 So that is all of these. 37 00:02:06,356 --> 00:02:11,846 And we're not going to put in the pycache, the vscode folder or the venv folder. 38 00:02:12,146 --> 00:02:14,996 You can put the vscode for that, if you want, if you've got any settings there, 39 00:02:15,176 --> 00:02:19,506 but it's not necessary, everything else we can grab and drop into there. 40 00:02:20,239 --> 00:02:23,389 That is going to upload the files and the folders and make sure 41 00:02:23,389 --> 00:02:26,659 that everything reflects what it looks like in our project. 42 00:02:27,109 --> 00:02:30,739 After that, you can write a message if you want, or you can just commit. 43 00:02:31,159 --> 00:02:33,619 If you write any messages, they will be visible later on. 44 00:02:33,829 --> 00:02:37,499 So you can come back and see when and why you added certain 45 00:02:37,499 --> 00:02:39,269 files at certain points in time. 46 00:02:39,869 --> 00:02:43,169 You'll be able to see a log of every time you added files like that. 47 00:02:44,204 --> 00:02:47,984 If at any point, you want to make any changes to a file that already exists. 48 00:02:48,014 --> 00:02:51,224 You can just click on it and then click on the little pencil icon. 49 00:02:51,314 --> 00:02:53,954 And that lets you edit the file in case we make any mistakes 50 00:02:53,954 --> 00:02:54,944 and we have to change something. 51 00:02:55,424 --> 00:02:59,474 And if you want to add more files, you can just go here and upload new ones. 52 00:03:00,077 --> 00:03:02,597 If you know how to use Git already, you can obviously do 53 00:03:02,597 --> 00:03:05,777 all of this using git, but we're not going to cover that just yet. 54 00:03:06,486 --> 00:03:10,106 Remember that we've created a private repository so nobody will be able to 55 00:03:10,106 --> 00:03:14,276 see this code, which is important, but also you can't share this with anybody 56 00:03:14,276 --> 00:03:18,806 else, for example, a potential employer, because it is a private repository. 57 00:03:19,076 --> 00:03:24,506 Later on, we will learn how to hide the MongoDB URI from our code so that 58 00:03:24,506 --> 00:03:26,276 we can make this repository public. 59 00:03:26,877 --> 00:03:30,417 The next thing we have to do is go to Heroku and create an account there. 60 00:03:30,989 --> 00:03:34,799 When you load Heroku, you can sign up for free and you don't need to give them your 61 00:03:34,799 --> 00:03:36,719 credit card details or anything like that. 62 00:03:36,839 --> 00:03:40,169 Just fill out this form and you'll create an account. 63 00:03:40,499 --> 00:03:42,929 You may also get an email that you'll have to confirm. 64 00:03:42,989 --> 00:03:44,999 So just do that before you log in. 65 00:03:45,604 --> 00:03:47,104 Once you've logged into Heroku. 66 00:03:47,104 --> 00:03:48,484 You'll see something like this. 67 00:03:48,574 --> 00:03:52,474 I've already got an app there, but you won't see that, you can 68 00:03:52,474 --> 00:03:57,064 instead go ahead and create a new app with this new dropdown there. 69 00:03:57,724 --> 00:04:00,844 And an app in Heroku, is a Python app. 70 00:04:01,174 --> 00:04:05,404 We're going to run this in Heroku's servers and we're going to connect it to 71 00:04:05,404 --> 00:04:08,284 the internet via the web Heroku stack. 72 00:04:08,804 --> 00:04:09,464 Give it a name. 73 00:04:09,484 --> 00:04:11,824 We can give it teclado microblog app. 74 00:04:12,004 --> 00:04:15,798 It just has to be unique and then go ahead and create the app. 75 00:04:16,299 --> 00:04:19,839 You can see that we are currently in the deploy tab, which allows 76 00:04:19,839 --> 00:04:21,819 us to give Heroku our code. 77 00:04:22,089 --> 00:04:25,239 And there's a few other tabs that we will look at in a moment. 78 00:04:25,539 --> 00:04:29,049 Some of them are, for example, the activity tab that tells you what's 79 00:04:29,049 --> 00:04:30,849 happened in your project over time. 80 00:04:31,029 --> 00:04:34,359 And we've also got an overview that gives us a bit of information about the project. 81 00:04:35,154 --> 00:04:38,694 The most important part of this entire website except the deploy 82 00:04:38,754 --> 00:04:44,154 tab is this dropdown here, which has this option view logs. 83 00:04:44,424 --> 00:04:47,454 We're going to be visiting this option quite a lot if we ever encounter a 84 00:04:47,454 --> 00:04:51,114 problem with our Heroku deployment, for example, an error in our flask app. 85 00:04:51,504 --> 00:04:55,554 The logs there is going to give you the console view of the flask app 86 00:04:55,734 --> 00:04:57,234 that lets you see what happened. 87 00:04:57,939 --> 00:05:00,729 But for now, because we've got our code in GitHub. 88 00:05:00,889 --> 00:05:04,869 We're going to, go here into deployment method and click on GitHub. 89 00:05:06,099 --> 00:05:09,519 Then you may have to log in with GitHub, just do that and 90 00:05:09,549 --> 00:05:11,679 we can then find our repository. 91 00:05:12,339 --> 00:05:16,689 So I'm going to put in here microblog and click on search and you're gonna 92 00:05:16,689 --> 00:05:21,699 see, we've found the GitHub repo, make sure that it matches the name in here. 93 00:05:21,879 --> 00:05:24,909 You can see that my one is then we can go ahead and make sure it matches 94 00:05:25,149 --> 00:05:27,249 which it does, and click on connect. 95 00:05:28,692 --> 00:05:32,352 Now, what happens is that Heroku has access to that code, even though it's 96 00:05:32,352 --> 00:05:36,972 a private repository, and down here on their manual deploy, we can tell 97 00:05:37,112 --> 00:05:42,012 Heroku to take the existing code or the current code in the GitHub repo 98 00:05:42,342 --> 00:05:44,682 and use it to run our flask app. 99 00:05:45,657 --> 00:05:50,127 We can also enable automatic deploys, which means that whenever we make a change 100 00:05:50,277 --> 00:05:55,557 to this code, Heroku will automatically deploy it and make it available online. 101 00:05:56,037 --> 00:05:56,967 That can be okay. 102 00:05:57,117 --> 00:06:00,627 But remember that if we make mistakes in our code, we won't be able to 103 00:06:00,627 --> 00:06:02,577 fix them before the deploy happens. 104 00:06:02,817 --> 00:06:06,047 So it can be a little dangerous if we're sharing the app with users and 105 00:06:06,047 --> 00:06:10,277 we have automatic deploys enabled because sometimes the webpage may break 106 00:06:10,457 --> 00:06:12,347 if we're making changes to our code. 107 00:06:12,557 --> 00:06:15,347 So for now, we're not going to enable automatic deploys. 108 00:06:15,587 --> 00:06:18,007 We're just going to deploy the main branch. 109 00:06:18,611 --> 00:06:22,311 What happens then is you start building the app, it installs 110 00:06:22,391 --> 00:06:24,831 Python and pip and so forth. 111 00:06:25,131 --> 00:06:28,371 It installs a few other requirements, and then it installs the stuff 112 00:06:28,371 --> 00:06:30,711 from our requirements.txt file. 113 00:06:30,741 --> 00:06:34,881 You can see it there, and it's installing flask, and pymongo, and so forth. 114 00:06:35,361 --> 00:06:39,441 And then it'll compress the code and make it publicly available 115 00:06:39,651 --> 00:06:41,021 when it runs the flask app. 116 00:06:41,392 --> 00:06:43,382 So thats the app deployed to Heroku. 117 00:06:43,382 --> 00:06:47,522 We can now copy this URL, when you open the URL, you should see it 118 00:06:47,612 --> 00:06:49,532 appear directly on your browser. 119 00:06:49,772 --> 00:06:53,372 If you see any errors, then that means we have to go into the Heroku 120 00:06:53,372 --> 00:06:55,532 logs and take a look at what's there. 121 00:06:56,132 --> 00:06:58,532 So let's go ahead and go to more. 122 00:06:59,007 --> 00:07:00,237 And view logs. 123 00:07:00,657 --> 00:07:04,037 And this will give you a pretty detailed view of what's 124 00:07:04,037 --> 00:07:05,537 going on in your application. 125 00:07:05,837 --> 00:07:09,917 If there are any Python errors, they will be displayed here and we can look 126 00:07:09,917 --> 00:07:12,287 at them to see what the problem might be. 127 00:07:12,587 --> 00:07:14,867 But in my case, I don't have any issues with the code. 128 00:07:14,867 --> 00:07:18,707 So all I see are the requests that have been made to the 129 00:07:18,707 --> 00:07:20,867 website and how we responded. 130 00:07:21,492 --> 00:07:26,112 For example here, we see, I got the forward slash end point 131 00:07:26,322 --> 00:07:29,982 and the response code was 200, which means everything's okay. 132 00:07:30,342 --> 00:07:31,932 And we responded successfully. 133 00:07:32,202 --> 00:07:35,202 You can see that that happens for every asset on our webpage, for 134 00:07:35,202 --> 00:07:39,822 example, the logo, the CSS file and the favicon, which we don't have. 135 00:07:39,822 --> 00:07:42,612 But that would be the little icon here on the browser. 136 00:07:43,722 --> 00:07:47,112 So every time anybody makes a request to your web app, you will see it here. 137 00:07:47,202 --> 00:07:49,512 And if there are any errors, you would see them there as well. 138 00:07:49,542 --> 00:07:51,132 So it's a great debugging tool. 139 00:07:51,836 --> 00:07:53,726 Let's take a look at some other stuff that's available here. 140 00:07:54,196 --> 00:07:58,276 In the overview you've got some information about your add-ons 141 00:07:58,456 --> 00:07:59,836 and Heroku supports add-ons. 142 00:07:59,866 --> 00:08:05,386 For example, you've got access to database ad-ons that you can install in Heroku 143 00:08:05,386 --> 00:08:09,696 and use very easily from the platform you've got various logging and error 144 00:08:09,696 --> 00:08:11,326 reporting add-ons that you can use. 145 00:08:11,716 --> 00:08:14,716 Um, generally they're not free, but there's a lot of them and Heroku is 146 00:08:14,716 --> 00:08:17,716 a very complete platform that lets you do a lot of different things 147 00:08:17,806 --> 00:08:19,126 and add ons are a big part of that. 148 00:08:19,961 --> 00:08:24,401 And you've got Dynos as we've discussed, the dynos are Heroku servers. 149 00:08:24,431 --> 00:08:28,781 Essentially our code is commonly running in a free Dyno as that is what 150 00:08:28,781 --> 00:08:32,351 happens by default, but you can change that and you can pay for Dynos if 151 00:08:32,351 --> 00:08:34,631 you want more power and performance. 152 00:08:35,171 --> 00:08:39,231 You've got the activity here that lets you see sort of what happened over time. 153 00:08:39,626 --> 00:08:43,106 In your resources tab, we've got, again, a more detailed 154 00:08:43,106 --> 00:08:44,876 view of the Dynos and add-ons. 155 00:08:45,416 --> 00:08:46,916 In the deploy tab, we've already seen that. 156 00:08:46,946 --> 00:08:50,756 We've got the metrics tab that we cannot access because we haven't paid. 157 00:08:51,236 --> 00:08:54,806 The activity tab, lets us see the different deploys 158 00:08:54,806 --> 00:08:56,006 that we've done to our app. 159 00:08:56,246 --> 00:09:00,716 And, interestingly, it allows us to roll back to previous releases. 160 00:09:00,896 --> 00:09:03,596 When we do multiple builds, we can roll back to a previous one. 161 00:09:03,746 --> 00:09:06,806 If it turns out that we broke the app with some typo in our 162 00:09:06,806 --> 00:09:08,486 code or some error in our code. 163 00:09:09,386 --> 00:09:12,866 In Access, you have your collaborators, you can add more people here to let 164 00:09:12,866 --> 00:09:18,206 them, modify and change the Heroku project, and notice that this does not 165 00:09:18,206 --> 00:09:20,456 give them access to the GitHub repo. 166 00:09:20,636 --> 00:09:24,266 You can do that separately in, GitHub over in the settings tab. 167 00:09:24,966 --> 00:09:28,266 And finally, you've got your settings and we're going to come in here in 168 00:09:28,266 --> 00:09:31,416 the next video to look at config vars. 169 00:09:31,596 --> 00:09:34,146 So let's stop there, this video is already getting a little bit long, 170 00:09:34,356 --> 00:09:35,796 and I'll see you in the next one.