1
00:00:00,210 --> 00:00:00,540
Awesome.

2
00:00:00,540 --> 00:00:02,760
Now we can start deploying to Heroku.

3
00:00:02,970 --> 00:00:06,180
Please keep in mind though that this setup is not difficult.

4
00:00:06,510 --> 00:00:08,630
However it is somewhat tedious.

5
00:00:08,760 --> 00:00:13,320
The smallest mistake the smallest typo and you're gonna have to redo it.

6
00:00:13,420 --> 00:00:14,740
And when I say this.

7
00:00:14,880 --> 00:00:17,890
Trust me I've made more than enough errors myself.

8
00:00:18,360 --> 00:00:25,200
So it comes from the place of experience and I'm going to head over to a Google search and we're going

9
00:00:25,200 --> 00:00:27,230
to look for strappy documentation again.

10
00:00:27,450 --> 00:00:33,630
So we're gonna go with strappy and then we're going to look for deployment so we're gonna go strap video

11
00:00:34,050 --> 00:00:39,080
documentation and essentially we're just gonna follow the guides that they provide.

12
00:00:39,090 --> 00:00:45,050
We're going to look for the guides that we have deployment and we're looking for a roll call.

13
00:00:45,060 --> 00:00:52,860
Again you can follow the Digital Ocean if you'd want or Amazon a W us but Oracle probably is gonna be

14
00:00:52,860 --> 00:00:54,440
the most straightforward one.

15
00:00:54,810 --> 00:00:59,640
So first they say how you should set up Morocco which by the way we already have.

16
00:01:00,030 --> 00:01:02,550
So they said get installed free Morocco.

17
00:01:02,550 --> 00:01:03,660
Count on all that.

18
00:01:03,660 --> 00:01:05,920
And then of course we do need to log in.

19
00:01:06,090 --> 00:01:10,030
Then we would need to create a new stroppy project which we do.

20
00:01:10,200 --> 00:01:13,160
We already have our project so we don't need to create a new one.

21
00:01:13,200 --> 00:01:20,640
And before we do anything we just need to make sure that in our gate ignore we add package lock Jason.

22
00:01:20,640 --> 00:01:23,820
So let's head over back to our application again.

23
00:01:23,880 --> 00:01:25,150
Back in application.

24
00:01:25,260 --> 00:01:28,300
I know I said this before but I'm gonna keep on repeating.

25
00:01:28,380 --> 00:01:30,500
And then we just need to add our package.

26
00:01:30,540 --> 00:01:37,470
Jason So we're looking for the file and we're gonna copy that and paste it and I'm gonna get ignored

27
00:01:37,800 --> 00:01:44,010
is just a file that tells our version control which files are gonna be ignored.

28
00:01:44,100 --> 00:01:44,340
All right.

29
00:01:44,820 --> 00:01:46,730
So we have our package Jason.

30
00:01:47,070 --> 00:01:51,380
Some design we would need to set up our initial commit.

31
00:01:51,810 --> 00:01:56,350
So we're gonna head over back to our backend and we're going to clear everything in a console.

32
00:01:56,460 --> 00:01:58,040
We're going to try to get in it.

33
00:01:58,080 --> 00:02:01,570
So we're gonna initialize it as a get repository.

34
00:02:01,650 --> 00:02:04,500
Then we're gonna say get add command.

35
00:02:04,500 --> 00:02:08,520
So we're gonna add essentially all the files to a staging area.

36
00:02:08,520 --> 00:02:13,860
Notice I have a dot that means all the files ones we have added all the files to a staging area.

37
00:02:13,860 --> 00:02:20,070
Then we're gonna run get commit to commit all those files and then obviously we're also have some kind

38
00:02:20,070 --> 00:02:20,910
of message.

39
00:02:20,970 --> 00:02:27,390
That's the reason why I have high for them and we're just gonna type initial comment something like

40
00:02:27,390 --> 00:02:28,010
that.

41
00:02:28,220 --> 00:02:33,570
And once I run the command I'm going to clear the console and we're gonna head over back to strappy

42
00:02:33,570 --> 00:02:38,130
documentation and we're gonna take a look at what we need to do next.

43
00:02:38,310 --> 00:02:44,010
We would need to run Heroku create but just don't run the command yet.

44
00:02:44,010 --> 00:02:50,020
What I would want is to run it with Heroku create and then whatever your project name.

45
00:02:50,100 --> 00:02:54,470
Otherwise you're just gonna get some default name and even though you can change it later.

46
00:02:54,570 --> 00:03:01,650
I think it's a bit more easier if we right away name our project so we're gonna head over to our application.

47
00:03:01,890 --> 00:03:08,050
We're gonna write her a roll call create and then whatever your wildest fantasies.

48
00:03:08,190 --> 00:03:16,350
I mean in my case I'm just gonna go with a react store and let's say API something like that.

49
00:03:16,770 --> 00:03:18,720
I'm going to create a new project.

50
00:03:18,830 --> 00:03:19,660
Awesome.

51
00:03:19,770 --> 00:03:26,310
And then once we have created the new project then we need to make a decision and the decision is very

52
00:03:26,310 --> 00:03:26,970
simple.

53
00:03:27,120 --> 00:03:34,350
If you have set up your database in the strappy as Mongo DV So if you didn't follow the guidelines of

54
00:03:34,350 --> 00:03:40,060
quick start then you need to follow the Mongo D.B. setup instructions.

55
00:03:40,260 --> 00:03:46,620
If you have the normal one like we use the quick start then we're just using this posters again please

56
00:03:46,620 --> 00:03:48,600
keep in mind you cannot mix and match.

57
00:03:48,600 --> 00:03:52,160
You cannot use the quick start and then follow the Mongo DP guidelines.

58
00:03:52,170 --> 00:03:58,390
Well technically you can do it but your app is gonna fail so we're gonna follow the post dress.

59
00:03:58,440 --> 00:04:04,050
Again I know I'm going to repeat this probably again 47 times but we're gonna use the post office and

60
00:04:04,050 --> 00:04:06,750
again that is one of those mistakes that I made myself.

61
00:04:06,750 --> 00:04:13,050
So again I'm not trying to be condescending but I'm trying to make sure that we all are on the same

62
00:04:13,050 --> 00:04:13,760
page.

63
00:04:14,040 --> 00:04:16,420
And then we need to have a add on.

64
00:04:16,650 --> 00:04:22,110
So we're gonna need to run this Heroku add ons and then we're looking for this supposed dress hoppy

65
00:04:22,110 --> 00:04:24,170
dev and let's copy the command.

66
00:04:24,540 --> 00:04:27,450
And as you see there's just a bunch of copying pasting.

67
00:04:27,630 --> 00:04:32,120
And while I was talking I didn't notice that the name was already taken.

68
00:04:32,130 --> 00:04:34,030
So let me try it one more time.

69
00:04:34,080 --> 00:04:36,100
Roll Call create.

70
00:04:36,120 --> 00:04:47,960
I'm gonna go with tech vintage tech sorry vintage tech store react API so hopefully that name is not

71
00:04:47,960 --> 00:04:53,900
gonna be taken it is creating the new app and awesome now I have the app and in this case I am going

72
00:04:53,900 --> 00:05:00,230
to copy and paste the command and we just talked about the Heroku items and then once we copy and paste

73
00:05:00,230 --> 00:05:08,120
that command and once everything is done then we're gonna need to run a Roku config and essentially

74
00:05:08,120 --> 00:05:14,150
Heroku config returns a string and we just need to pick environment variables from that string.

75
00:05:14,330 --> 00:05:20,570
So we're gonna need to have a database user named variable so we'll just grab the first one up to a

76
00:05:20,570 --> 00:05:21,270
colon.

77
00:05:21,420 --> 00:05:27,530
Then after that we have a password and as you can see here they have a very nice explanation of where

78
00:05:27,620 --> 00:05:30,770
our environment variable values are located.

79
00:05:31,100 --> 00:05:36,810
So just make sure once you add those values you are doing it correctly without any typos.

80
00:05:36,920 --> 00:05:41,690
Again I might send typos and then your deployment fails.

81
00:05:41,700 --> 00:05:46,340
Right now my preferred method is using dashboard instead.

82
00:05:46,340 --> 00:05:51,350
So even though you can do it from the terminal I prefer using the dashboard and I'm going to show you

83
00:05:51,350 --> 00:05:53,070
how we're going to access that.

84
00:05:53,090 --> 00:05:59,510
So first I'm going to head over to our dashboard and then within the dashboard I'm looking for my app.

85
00:05:59,540 --> 00:06:05,270
Notice how I created the app and then if I want to setup environment variables I need to head to settings

86
00:06:05,570 --> 00:06:13,370
and then within the settings we're looking for reveal config pass and once we're on the Heroku config

87
00:06:13,790 --> 00:06:16,820
then you right away are gonna see the URL here.

88
00:06:16,910 --> 00:06:24,110
You can assign the values for environment variables directly within the dashboard here but I'm also

89
00:06:24,110 --> 00:06:30,200
gonna run one more time in my terminal because I just find it easier to grab those values because if

90
00:06:30,200 --> 00:06:36,500
I would want to grab them here then I would need to make each and every time the window bigger and then

91
00:06:36,500 --> 00:06:37,700
close it and open it.

92
00:06:37,790 --> 00:06:45,940
And again I just find it easier to run Heroku config in my terminal config in the terminal but I'm gonna

93
00:06:45,970 --> 00:06:50,000
setup my environment variables right away in a dashboard.

94
00:06:50,000 --> 00:06:52,510
So again this would be my user name.

95
00:06:52,610 --> 00:06:57,400
Then this is gonna be my password and then the rest of the environment variables.

96
00:06:57,530 --> 00:07:01,490
And like I said already before there's just gonna be a bunch of copying pasting.

97
00:07:01,640 --> 00:07:07,490
But please just make sure that you don't make any typo because the whole deployment is gonna go bananas

98
00:07:07,790 --> 00:07:10,010
if you make the smallest typo.

99
00:07:10,100 --> 00:07:17,300
I'm gonna head over to strappy documentation and then one by one we're just gonna grab our environment

100
00:07:17,580 --> 00:07:20,300
names so our environment variable names.

101
00:07:20,300 --> 00:07:24,540
We're gonna have database username password hosted as well as the port name.

102
00:07:24,980 --> 00:07:31,850
So let's head to our dashboard and then let's assign our first variable and of course that's not what

103
00:07:31,850 --> 00:07:32,970
I wanted.

104
00:07:32,990 --> 00:07:39,190
Let me make sure that I copy and paste I'm going to head to my dashboard database user name and I'm

105
00:07:39,190 --> 00:07:40,940
just gonna add the variables first.

106
00:07:41,020 --> 00:07:47,200
So one by one I'm gonna add the variables and then we're gonna sign the values from our terminal.

107
00:07:47,200 --> 00:07:51,510
So we're going to look first for the user name of course and then the password and rest them.

108
00:07:52,360 --> 00:08:02,500
So next one up we have database password like so let's set it up and then we have the host.

109
00:08:02,770 --> 00:08:09,280
So let's grab the host to navigate again to that board host added.

110
00:08:09,370 --> 00:08:11,370
And then we have two more.

111
00:08:11,410 --> 00:08:16,570
The port and the name so port and name port.

112
00:08:16,610 --> 00:08:18,130
Here we go.

113
00:08:18,190 --> 00:08:26,560
And then lastly we have the database name and once we copy and paste that to our environment variables

114
00:08:27,040 --> 00:08:32,020
should be good to go where we need to set up our values and the values.

115
00:08:32,020 --> 00:08:36,130
Like I said I'm gonna be looking in a console but if you would want to check where we are getting the

116
00:08:36,130 --> 00:08:42,940
values again just head over to a strappy documentation and then look for explanations.

117
00:08:42,940 --> 00:08:47,090
So the first one is user name and password is right after the colon.

118
00:08:47,350 --> 00:08:49,910
Then the host is right after the ad.

119
00:08:49,990 --> 00:08:52,770
Then again port is between the colons.

120
00:08:53,060 --> 00:08:59,140
So we have port then one call the second column and last one is a database name so that's all we can

121
00:08:59,410 --> 00:09:01,410
in fact access those values.

122
00:09:01,520 --> 00:09:06,490
I start with my ones first one was the user name so all the way up to the colon.

123
00:09:06,990 --> 00:09:12,260
Well let's call it and then in this case I need to click on it.

124
00:09:12,600 --> 00:09:15,620
So we need to click on it and we need to copy paste.

125
00:09:15,630 --> 00:09:16,970
That was my year.

126
00:09:17,340 --> 00:09:21,390
Then next I have the password so password is gonna be this guy.

127
00:09:21,810 --> 00:09:24,540
All the way up to a at symbol.

128
00:09:24,570 --> 00:09:30,720
So from the colon not including the colon and all the way up to a at sign.

129
00:09:30,840 --> 00:09:32,670
What's that.

130
00:09:32,670 --> 00:09:33,510
All right.

131
00:09:33,600 --> 00:09:35,920
Next we have a database hosted.

132
00:09:36,030 --> 00:09:39,410
And again if you need to double check how you would get the host.

133
00:09:39,430 --> 00:09:47,230
Again we wouldn't have the ad but then we would grab everything after the app and all the way to dot

134
00:09:47,380 --> 00:09:48,030
com.

135
00:09:48,030 --> 00:09:52,590
So Amazon a double U.S. dot com should be our ending.

136
00:09:52,590 --> 00:09:54,310
So let me grab it.

137
00:09:54,330 --> 00:09:56,440
I have Amazon a double yes.

138
00:09:56,450 --> 00:10:02,500
Dot com then vintage tech that is going to be my host.

139
00:10:02,560 --> 00:10:06,850
And then in this case notice something interesting where we're copying pasting and we're setting up

140
00:10:06,850 --> 00:10:09,510
two lines and that is in fact incorrect.

141
00:10:09,520 --> 00:10:13,510
What we would want is to make sure that everything is in one line.

142
00:10:13,510 --> 00:10:19,180
So let's save those changes and then we have the port and then we have database name.

143
00:10:19,180 --> 00:10:24,320
The port is the five four three two or maybe in your case is gonna be different.

144
00:10:24,430 --> 00:10:29,600
So we're going to have the port again let's edit and save it.

145
00:10:29,740 --> 00:10:35,320
And then lastly we have of course a value for the database name.

146
00:10:35,380 --> 00:10:40,900
So again we're going at it I'm going to copy and paste and we're going to save the changes once we add

147
00:10:40,900 --> 00:10:47,620
the environment variables then head back to strategy documentation and then let's look what else we

148
00:10:47,620 --> 00:10:52,010
need to do and we would need to update our database.

149
00:10:52,090 --> 00:10:58,440
Jason and it is located in the config environments production and database Jason.

150
00:10:58,660 --> 00:11:05,650
And what we're going to do is wipe out the file clean and then just copy and paste whatever data they

151
00:11:05,650 --> 00:11:06,640
have here.

152
00:11:06,640 --> 00:11:08,650
So let's copy and paste.

153
00:11:08,650 --> 00:11:15,700
And then again remember we need to head over to config environments production so config.

154
00:11:15,850 --> 00:11:17,960
Let's look for config environments.

155
00:11:17,980 --> 00:11:23,950
Production and then we have the file by the name of database Jason.

156
00:11:24,030 --> 00:11:26,070
So let's open up that file.

157
00:11:26,130 --> 00:11:31,890
Let's select everything that we have currently in there that's wiped clean and let's copy and paste

158
00:11:31,980 --> 00:11:34,410
info from these strappy docs.

159
00:11:34,410 --> 00:11:36,660
Now we set up the proper database.

160
00:11:36,660 --> 00:11:44,350
Jason then we also would need to install a post just note module so let's run our command.

161
00:11:44,460 --> 00:11:47,220
We're going to do it again in our backend copy and paste.

162
00:11:47,280 --> 00:11:49,140
We're going to install the module.

163
00:11:49,140 --> 00:11:53,310
And lastly we would need to commit all the changes that we added.

164
00:11:53,310 --> 00:11:58,920
So let's say in this case you're going with a message of update database config but first as always

165
00:11:58,920 --> 00:12:00,970
you can have whatever message you'd want.

166
00:12:01,080 --> 00:12:07,860
And last we're gonna have get push Heroku master and then it's gonna take a few minutes but our app

167
00:12:07,860 --> 00:12:09,570
should be up and running.

168
00:12:09,600 --> 00:12:11,370
So let's add these commands.

169
00:12:11,370 --> 00:12:13,930
We're gonna have first get add.

170
00:12:13,950 --> 00:12:20,630
Again we're going to add all the files the staging area I'm going to clear Get comment and I'm going

171
00:12:20,630 --> 00:12:21,050
to write.

172
00:12:21,050 --> 00:12:23,760
Ready to deploy.

173
00:12:23,760 --> 00:12:29,310
And then once I have my message of course I'm going around the command and remember the last one was

174
00:12:29,670 --> 00:12:33,390
get push but we have Heroku master.

175
00:12:33,480 --> 00:12:37,590
All right get push Roku master.

176
00:12:37,710 --> 00:12:43,470
Now it's going to take a few minutes so longer to stop the video and I'm going to resume the video once

177
00:12:43,470 --> 00:12:50,010
the deployment is complete and once our deploy is complete we are going to head over to our Heroku dashboard

178
00:12:50,670 --> 00:12:53,570
and then we're gonna take a look at our application.

179
00:12:53,760 --> 00:13:00,340
So I'm gonna head over to a dashboard and then within the dashboard of course I have vintage tech story

180
00:13:00,340 --> 00:13:05,070
act API that is my app and I would want to open up a app.

181
00:13:05,250 --> 00:13:10,590
So I'm going to open up the app and then I see my familiar screen with an admin.

182
00:13:10,620 --> 00:13:15,750
So of course we can head over to an admin and then like I said once we push our project to production

183
00:13:16,110 --> 00:13:18,990
we're gonna have to set up our admin from scratch.

184
00:13:18,990 --> 00:13:25,140
So in this case probably go with a more difficult password which I'm gonna change later just so we can

185
00:13:25,140 --> 00:13:30,210
speed up things and then I'm gonna type in again my password and last.

186
00:13:30,210 --> 00:13:34,850
Let's set up the email so learn code tutorial.

187
00:13:35,250 --> 00:13:37,920
And then gmail dot com.

188
00:13:37,920 --> 00:13:44,040
And in this case I'm going to click to ready to start and this is gonna be our familiar dashboard where

189
00:13:44,040 --> 00:13:46,920
we can make all the changes to our API.