1
00:00:01,300 --> 00:00:06,830
Well, let's go ahead now and deploy our Flask application in a live server

2
00:00:06,850 --> 00:00:14,470
which in our case would be the Heroku Cloud, and there are around let's say 15 steps to go through

3
00:00:14,470 --> 00:00:17,330
for deploying your Flask application on Heroku.

4
00:00:17,600 --> 00:00:24,880
And we'll go through all them step by step. Before we go to step one, I'd like you to know that if you're aware

5
00:00:24,880 --> 00:00:31,860
of deploying web sites that are built on php, based on php you know with these websites

6
00:00:32,320 --> 00:00:39,560
it's fairly simple to deploy them. All you have to do is just upload all the HTML and the CSS

7
00:00:39,560 --> 00:00:43,220
and Javascript, and php files as well.

8
00:00:43,300 --> 00:00:50,980
You can upload them to your server directory using softwares such as Filezilla, and then you're good to go.

9
00:00:51,370 --> 00:00:55,540
However with Python the process is a little bit different.

10
00:00:55,570 --> 00:01:01,910
You'll deploy your application from your terminal, from your command line, from your computer.

11
00:01:02,020 --> 00:01:08,780
So there are a series of commands that we want to give to the terminal so that we have these files approved

12
00:01:08,790 --> 00:01:10,280
in Heroku.

13
00:01:10,540 --> 00:01:16,270
So yeah I suppose now you have a running website so you're a Flask website is running correctly

14
00:01:16,330 --> 00:01:20,820
on localhost and you also have a virtual environment which we set up in the previous lecture.

15
00:01:20,980 --> 00:01:29,530
So let's start with step one. Step one is you go and create an account in Heroku.

16
00:01:30,770 --> 00:01:34,300
It should be somewhere in here.

17
00:01:34,300 --> 00:01:38,540
So you go to sign up and just create an account

18
00:01:41,540 --> 00:01:44,480
so once you have that, then you can go and log in

19
00:01:55,270 --> 00:01:59,080
and yeah, dashboards should be your home page

20
00:01:59,080 --> 00:02:05,870
once you log in and on under personal apps which is this one here you'll see your apps listed in there.

21
00:02:05,910 --> 00:02:09,440
Now if you have just created an account, you won't have anything.

22
00:02:09,480 --> 00:02:13,110
But I have this test 702 which I have created.

23
00:02:13,690 --> 00:02:22,090
And so the idea is that you first need to create an account in her and you create apps. Now to create

24
00:02:22,090 --> 00:02:29,700
an app where you will store your Python files so that you can access the website from the web

25
00:02:29,860 --> 00:02:37,120
you can either go here to the plus sign and create a new app or you can do that from the command line.

26
00:02:37,290 --> 00:02:38,270
And that's what we're gonna do.

27
00:02:38,260 --> 00:02:42,270
So we're going to be using the command line to do everything.

28
00:02:42,540 --> 00:02:46,510
Basically we're done with a web page of Heroku.

29
00:02:46,810 --> 00:02:49,920
So step one was to create an account.

30
00:02:50,290 --> 00:02:55,780
Step two is you need to download the Heroku tool belt. Heroku tool belt.

31
00:03:02,020 --> 00:03:05,820
So it's served by Heroko.

32
00:03:06,070 --> 00:03:12,300
This is a tool that allows you to communicate with the Hiroko server through your command line.

33
00:03:12,310 --> 00:03:18,450
So basically we will be sending commands to the Heroku server and we need to download install Heroku

34
00:03:18,530 --> 00:03:19,180
for that.

35
00:03:19,360 --> 00:03:27,150
So just go ahead and choose your Heroku for your operating system and then just go out and install it.

36
00:03:27,480 --> 00:03:37,990
And once you have done that you go ahead and go to the directory where your main file is, your Python

37
00:03:37,990 --> 00:03:44,850
file and shift right click for windows and open a command window here.

38
00:03:45,270 --> 00:03:54,120
So you can either do that with terminal plus inside Atom but my terminal plus is not working at the moment.

39
00:03:54,220 --> 00:03:58,380
So I'm using the simple command line which is the same thing.

40
00:03:58,810 --> 00:04:03,890
I mean it's nice to have a terminal inside atom here but this is also the same thing.

41
00:04:03,940 --> 00:04:07,850
So I am in the demo folder.

42
00:04:08,460 --> 00:04:12,690
Demo where my script1.py file is.

43
00:04:13,000 --> 00:04:17,530
So what I'm going to do is point to Heroku and log in.

44
00:04:17,650 --> 00:04:22,160
So you can do that after you have installed Heroku tool belt.

45
00:04:22,210 --> 00:04:28,100
So what I'm trying to do here is logging into Heroku so that I can send commands to the Heroku servers.

46
00:04:28,210 --> 00:04:37,520
And yeah, my e-mail was arditsulce@hotmail.com.

47
00:04:37,600 --> 00:04:46,330
So that should be the e-mail that you use to create an account in Heroku, and the password that you chose

48
00:04:46,330 --> 00:04:48,220
there.

49
00:04:48,250 --> 00:04:56,410
Execute. Oh my my log in failed. I seem to have answered the wrong email.

50
00:04:56,430 --> 00:04:59,180
Sorry about that. Log in again.

51
00:04:59,350 --> 00:05:03,220
Arditsulce hotmail.

52
00:05:03,680 --> 00:05:05,950
Now it should be fine.

53
00:05:09,490 --> 00:05:14,250
Now I'm logged in successfully so I can go ahead and send commands to Heroku.

54
00:05:14,740 --> 00:05:17,730
So yeah at this point we have covered three steps.

55
00:05:17,740 --> 00:05:20,150
We created an account on Heroku.

56
00:05:20,410 --> 00:05:24,820
We installed the Heroku tool belt and we logged in into Heroku.

57
00:05:24,850 --> 00:05:33,300
We need to create an app. To do that you again need to pointed to the Heorku command and then create and

58
00:05:33,300 --> 00:05:35,800
then give a name to your app.

59
00:05:35,830 --> 00:05:38,150
So let me try ardit there.

60
00:05:39,040 --> 00:05:45,280
I say I'll try it because sometimes an app name can be already occupied by someone else because you know the

61
00:05:45,280 --> 00:05:50,410
name that you give to your app will be set as the domain or web application.

62
00:05:50,410 --> 00:05:52,110
So it'd be something like

63
00:05:52,150 --> 00:05:56,100
ardit.herokuaap.com.

64
00:05:56,320 --> 00:05:57,280
So let me try this.

65
00:06:00,300 --> 00:06:02,170
Yeah that was successful.

66
00:06:02,340 --> 00:06:07,310
Obviously there are not many people named Ardit, so that was good.

67
00:06:07,580 --> 00:06:13,290
And yeah, you know if you want, I mean this is not a requirement but if you want it you can list your apps

68
00:06:13,380 --> 00:06:17,040
using Heroku apps just to see what apps you have.

69
00:06:17,310 --> 00:06:23,100
And yeah, I have now two test, 702 and Ardit. Great.

70
00:06:23,110 --> 00:06:25,310
Now we have an app on Heroku.

71
00:06:25,480 --> 00:06:33,450
And if you want you can go and access your app actually visit your app.

72
00:06:34,110 --> 00:06:39,150
Ardit.heroku.com.

73
00:06:39,260 --> 00:06:43,410
So Heroku.com or Heorkuapp.com is the same thing.

74
00:06:43,410 --> 00:06:48,920
So basically what we have is just the default web page there that is waiting for some costum files to

75
00:06:48,920 --> 00:06:50,060
build the website.

76
00:06:50,070 --> 00:06:57,850
So in our case we want to upload a Python application and then we will have a website based on that.

77
00:06:57,900 --> 00:07:02,490
Yeah, this is how your app should look at this point.

78
00:07:02,740 --> 00:07:08,000
You know this is different from let's say a random name that doesn't have an app.

79
00:07:08,070 --> 00:07:11,860
So this say no such app, but our app says

80
00:07:12,030 --> 00:07:13,780
Welcome to your new app.

81
00:07:13,800 --> 00:07:20,740
So let's go ahead and upload our files there. Now to upload files into Heroku

82
00:07:21,030 --> 00:07:29,580
we should use Git. Now Git a version controled system and it allows us to deploy an app to Heroku.

83
00:07:29,780 --> 00:07:35,940
You should have Git installed, but the good news is that the Git is installed by default when you install

84
00:07:35,940 --> 00:07:36,990
the Heorku belt.

85
00:07:37,020 --> 00:07:41,010
So Heroku Belt is based on Git and it installs

86
00:07:41,010 --> 00:07:43,590
Git for you. If for any reason you don't have

87
00:07:43,590 --> 00:07:48,980
Git then you should be able to just search on Google for Git and just go ahead and install it.

88
00:07:49,160 --> 00:07:54,860
And once we have Git installed, we go out and initialize a Git repository.

89
00:07:55,530 --> 00:08:02,070
But before we do that actually we need to have three files in our app directory.

90
00:08:02,340 --> 00:08:10,520
So I'm talking about this directory which is where our main Python file is located.

91
00:08:10,530 --> 00:08:17,470
So a script1.py file. Because here is where we have the app instance. We are creating this

92
00:08:17,610 --> 00:08:20,540
Flask object here.

93
00:08:20,940 --> 00:08:26,400
In hear what you want to do is open a command line or you can use this form.

94
00:08:26,410 --> 00:08:28,300
I wouldn't interfere with that.

95
00:08:28,470 --> 00:08:37,220
So let me open a command line in there and we need to create three files. The first file should be named requirements

96
00:08:37,310 --> 00:08:38,580
dot txt.

97
00:08:38,730 --> 00:08:45,770
So we should create 3 files and then we upload these files together with our Python file and the CSS

98
00:08:45,780 --> 00:08:49,650
and HTML files to Heroku and Heroku

99
00:08:49,680 --> 00:08:55,000
Heroku will recognize these files because we will give them specific names.

100
00:08:55,230 --> 00:08:58,020
So in these files we will give some instructions.

101
00:08:58,020 --> 00:09:02,630
The first files is a file called requirements.txt.

102
00:09:02,820 --> 00:09:05,760
And what that contains is it contains,

103
00:09:05,760 --> 00:09:13,950
it should contain the list of dependencies that you want Heroku to install in your Python, in their

104
00:09:13,950 --> 00:09:15,190
Python instalation.

105
00:09:15,420 --> 00:09:21,440
So we have Python, and we have Flask installed in our virtual environment.

106
00:09:22,490 --> 00:09:30,200
So we should find a way to tell the Heroku servers that please install Flask for us, and that way is by creating

107
00:09:30,200 --> 00:09:32,120
these requirements.txt file.

108
00:09:32,180 --> 00:09:35,730
So I'll show how to do that in a bit.

109
00:09:35,780 --> 00:09:42,710
So we have Flasks installed and you can have a list of all packages and libraries and modules that you

110
00:09:42,710 --> 00:09:46,350
have installed in your Python installation with pip freeze.

111
00:09:46,790 --> 00:09:51,820
So that should list all the packages and libraries and everything.

112
00:09:51,830 --> 00:09:55,200
Be aware though that's what I use is pip freeze.

113
00:09:55,310 --> 00:09:58,610
So I used the pip of my main Python installation.

114
00:09:58,610 --> 00:10:01,240
So are we working on a virtual environment.

115
00:10:01,250 --> 00:10:13,160
What you want to do is you want to point to your virtual Pip so to say. Now my virtual Pip is somewhere

116
00:10:13,160 --> 00:10:20,110
here in... So here is a demo folder where I'm currently Demo.

117
00:10:20,250 --> 00:10:26,960
So you should be very really careful with directories, and than back.

118
00:10:27,000 --> 00:10:32,370
So demo, virtual, scripts and here is my pip.

119
00:10:32,520 --> 00:10:37,530
So just there. That means this is the current directorie.

120
00:10:37,740 --> 00:10:38,610
So I need to

121
00:10:43,000 --> 00:10:52,180
go back one directory. With two dots you go back one directory and then point to virtual, and then scripts and then

122
00:10:52,180 --> 00:11:01,300
pip, and then freeze to get a list of packages that you have with your virual environment, and yeah, I have Flask

123
00:11:01,330 --> 00:11:03,190
and it's dependencies.

124
00:11:03,190 --> 00:11:09,010
Now we need to insert these in requirements.txt file. Before doing that actually you need

125
00:11:09,010 --> 00:11:11,250
to install one more library that

126
00:11:11,300 --> 00:11:24,380
is called gunicorn. Corn, like that. Yeah, pip install. Install gunicorn. Let me expand this.

127
00:11:24,680 --> 00:11:26,340
That's all I can do.

128
00:11:26,610 --> 00:11:30,230
Install. That was successful.

129
00:11:30,360 --> 00:11:32,650
So why do we need this library?

130
00:11:32,790 --> 00:11:39,060
Well this is an http server so we need the server actually. Heroku server needs this to run your web

131
00:11:39,060 --> 00:11:39,760
application.

132
00:11:39,900 --> 00:11:46,760
If you do pip freeze again you'll see that gunicorn is there and you also see the versions on the

133
00:11:46,770 --> 00:11:47,910
right.

134
00:11:47,910 --> 00:11:54,330
So to throw these in a file you can do something like that.

135
00:11:54,360 --> 00:12:04,620
And the name of the file requirements.txt. Yeah, that should be OK.

136
00:12:05,360 --> 00:12:06,530
Great.

137
00:12:06,630 --> 00:12:08,600
This is the file and yeah.

138
00:12:08,760 --> 00:12:11,500
We have all the dependencies there.

139
00:12:11,650 --> 00:12:11,900
Great.

140
00:12:11,890 --> 00:12:15,670
So that was the first file that I mentioned, we have two more files to go.

141
00:12:16,410 --> 00:12:21,340
The next file is a Proc file.

142
00:12:21,870 --> 00:12:30,670
But be careful! You shouldn't have any extension in there.

143
00:12:31,140 --> 00:12:37,560
So that's a file without any extension and just go ahead edit it with whatever you want, Notepad or

144
00:12:37,560 --> 00:12:39,960
just here in Atom.

145
00:12:40,260 --> 00:12:48,070
So this should contain a line and that would be web. A colon, gunicorn.

146
00:12:48,090 --> 00:12:53,430
So what you're doing is you're telling Heroku what to use,  what server, what a web server

147
00:12:53,430 --> 00:12:55,560
to use to run your application.

148
00:12:55,560 --> 00:13:03,680
So we're saying use gunicorn and then gunicorn has to point to script1.

149
00:13:03,780 --> 00:13:09,690
So that's the name of our file. A colon there, and then app.

150
00:13:09,690 --> 00:13:16,870
So again a Proc is in the same directory without our script1.py file and it should be there.

151
00:13:17,220 --> 00:13:25,560
And then, what you do then you point to the file, file name of your Python file name, and then app. App is the name of the

152
00:13:25,560 --> 00:13:28,640
variable that is holding the Flask instance.

153
00:13:28,970 --> 00:13:32,460
So app there. I hope that it's clear.

154
00:13:32,580 --> 00:13:34,390
That's all you have to do with Proc file.

155
00:13:34,440 --> 00:13:37,120
Just save that, and close that file.

156
00:13:37,900 --> 00:13:39,150
And yeah, one more file now.

157
00:13:42,430 --> 00:13:52,260
And that would be a run time file. Runtime.txt.

158
00:13:53,030 --> 00:13:59,610
What that should contain inside is the Python version that you want Heroku to run your app with.

159
00:13:59,930 --> 00:14:02,970
You know you can make it without creating a runtime.txt file.

160
00:14:03,080 --> 00:14:08,580
But in that case Heroku will run your application using Python 2.7.

161
00:14:08,660 --> 00:14:11,960
So that version if you want to run your application.

162
00:14:11,960 --> 00:14:17,950
So if you want to run your application with Python 3.5 you'd say

163
00:14:18,350 --> 00:14:20,780
Python-3.5.1.

164
00:14:20,810 --> 00:14:23,060
So why did I insert this?

165
00:14:23,060 --> 00:14:29,520
Well Heroku actually, they have these two available runtimes.

166
00:14:43,900 --> 00:14:50,470
Now so supported Python runtimes. You can either specify this which happens to be the default one

167
00:14:50,920 --> 00:14:55,070
so you can get away without specifying this and then they have 3.5.1.

168
00:14:55,100 --> 00:15:03,470
If maybe you have a 3.5.2 in your computer but that doesn't make any difference.

169
00:15:03,470 --> 00:15:12,220
So if you have 3.5.2, or .3 or whatevere you still have to specify 3.5.1 in the

170
00:15:12,990 --> 00:15:15,390
runtime.txt file.

171
00:15:15,440 --> 00:15:20,380
Save that and all we have to with the files.

172
00:15:20,410 --> 00:15:29,070
Eventually we can go ahead and upload this file to Heorku, all these files that we have in this directory here.

173
00:15:29,400 --> 00:15:35,860
Great, to that you first need to create a Git repository.

174
00:15:35,920 --> 00:15:38,800
So you say git init for initialization.

175
00:15:39,040 --> 00:15:48,690
Execute that and as you see you've got a dot git folder created in there, so that contains your local repository.

176
00:15:49,210 --> 00:15:55,930
So in other words these files now are recognized by Git, and they will be uploaded into Heroku.

177
00:15:56,500 --> 00:16:04,440
So this all this looks like and now we want to add these files to the Git repository. To do that

178
00:16:04,440 --> 00:16:12,710
you say git add and dot, so all the dot says is you know you're adding the files of the current

179
00:16:13,010 --> 00:16:14,300
directory.

180
00:16:14,300 --> 00:16:20,540
So the dot points to the current directory and yeah that was successful and then you want to commit the

181
00:16:20,540 --> 00:16:27,350
changes so you added some files and later we will see when we make changes in the website in the web

182
00:16:27,350 --> 00:16:28,900
application.

183
00:16:28,900 --> 00:16:39,830
And whenever you make changes, you say Git commit with a m flag, and then you may want to, you have to write some

184
00:16:39,920 --> 00:16:41,110
notes there.

185
00:16:41,210 --> 00:16:47,330
Let's say first commit. When you do the second commit maybe you change something in your web application.

186
00:16:47,770 --> 00:16:54,170
Maybe you added another web page in your website and you'd say something like web page edit or something

187
00:16:54,170 --> 00:16:55,680
like that.

188
00:16:57,960 --> 00:17:02,370
So this says 8 files changed.

189
00:17:02,490 --> 00:17:04,390
So why 8 files?

190
00:17:04,410 --> 00:17:12,740
Well we have 1, 2, 3, 4 files in here and we have three here so 7 and one here main.css.

191
00:17:12,780 --> 00:17:18,200
So we have 8 files that were actually added to the local repository.

192
00:17:18,330 --> 00:17:22,240
The next step now is to push the changes to Heroku.

193
00:17:22,530 --> 00:17:27,720
So we want to push, to upload the Git repository, the files to Heroku.

194
00:17:28,170 --> 00:17:35,850
However first you need to do something. You know we have two apps in our Heroku account but we haven't

195
00:17:35,850 --> 00:17:38,640
told Heroku which app we're working on.

196
00:17:38,640 --> 00:17:49,290
So to do that to point to one one of your apps you want to do Heroku git remote and then the m flag.

197
00:17:49,710 --> 00:17:52,580
And after that goes the name of your app.

198
00:17:59,030 --> 00:18:06,160
So everything that you do now is applied to the app that you referenced in these command here. Now to

199
00:18:06,160 --> 00:18:08,440
push the changes to Heroku.

200
00:18:08,550 --> 00:18:18,040
So to eventually upload the files you do git push heroku master. Now if you're doing this for the first

201
00:18:18,040 --> 00:18:24,950
time you may get an error from Git saying that Git wasn't able to recognize you. In that case

202
00:18:25,090 --> 00:18:30,300
if you get an error from this after executing this line, you can go ahead and authenticated with

203
00:18:30,340 --> 00:18:30,810
Git.

204
00:18:31,040 --> 00:18:32,040
That's actually very easy.

205
00:18:32,040 --> 00:18:33,340
So nothing to worry about.

206
00:18:33,460 --> 00:18:45,580
You say git config and global with two dashes in front, and then user.email and then in quotes you want

207
00:18:45,590 --> 00:18:47,710
to pass your e-mail.

208
00:18:47,780 --> 00:18:52,070
You can use the e-mail that you used for creating an Heroku account.

209
00:18:52,240 --> 00:18:53,780
So something like

210
00:18:56,800 --> 00:19:06,140
dot com and your execute that like that and then you need to do one more thing.

211
00:19:06,140 --> 00:19:14,570
So again git config and then global user dot name so the user name this time. Just pick a user name that you

212
00:19:14,570 --> 00:19:16,590
want.

213
00:19:17,810 --> 00:19:19,050
Just like that.

214
00:19:19,400 --> 00:19:24,660
And once you have done that then go ahead and push the changes to Heroku.

215
00:19:25,010 --> 00:19:29,030
So that would be again git push heroku

216
00:19:29,100 --> 00:19:30,650
master.

217
00:19:30,770 --> 00:19:36,980
So I'm providing all these commands in a separate file so in a text file.

218
00:19:37,000 --> 00:19:40,640
Yeah and you can find this in the resources in this lecture.

219
00:19:40,700 --> 00:19:47,740
There you'll find the commands in the correct order as we are executing in this video. Execute.

220
00:19:47,750 --> 00:19:51,650
And hopefully this will be successful. Python app

221
00:19:51,730 --> 00:20:02,770
detected, so something important is that you want to be in the directory where your Python file is located.

222
00:20:02,810 --> 00:20:08,290
So that's how Heroku will detect that you are running a Python file.

223
00:20:09,170 --> 00:20:16,310
If you're for instance, if your directory, your current directory here would be something like website

224
00:20:16,310 --> 00:20:22,500
mysite, here, so website mysite, and not Demo.

225
00:20:22,730 --> 00:20:33,770
So if you would be someone here Heorku wouldn't be able to push the changes. And yeah, so this very fine deployed done.

226
00:20:33,860 --> 00:20:40,970
This was successful for me at least. And now you can go ahead and browse to your web page.

227
00:20:40,970 --> 00:20:50,500
So in my case it would be ardit.herokuapp.com or you can open the browser by doing Heorku open in the command

228
00:20:50,510 --> 00:20:52,130
line.

229
00:20:52,210 --> 00:20:53,840
Now here we go.

230
00:20:53,840 --> 00:21:01,770
My app is live now and it's working app so I can navigate through the website and so on.

231
00:21:01,770 --> 00:21:11,510
So yeah that was about this lecture and you know Heroku info you can get info about the current app.

232
00:21:14,740 --> 00:21:21,900
You know you have things like the git link there, and the owner, and the URL of the application and so on.

233
00:21:21,930 --> 00:21:26,200
And that was about how to upload a Flask application into Heroku.

234
00:21:26,620 --> 00:21:29,860
This is a bit delicate work if you're a beginner.

235
00:21:30,100 --> 00:21:36,790
So if you weren't able to do this then you could download the text version of the commands and try to run

236
00:21:36,790 --> 00:21:39,580
them again one by one.

237
00:21:40,120 --> 00:21:45,450
You can also ask questions and just tell me about the error you're getting and I'll try to help you.

238
00:21:45,690 --> 00:21:46,350
And yeah,

239
00:21:46,420 --> 00:21:52,060
we still have one lecture to go. In the next lecture what we'll do is I'll make a simple change to

240
00:21:52,060 --> 00:21:57,550
the website and see how we can upload the changes to Heorku.

241
00:21:57,940 --> 00:22:01,800
So we're talking about maintaining our Web site now, a web application.

242
00:22:02,000 --> 00:22:06,330
And yeah, let's move on and I'll talk to you in the next lecture!