1
00:00:00,510 --> 00:00:05,660
OK so back to the issue of connecting to our database.

2
00:00:05,760 --> 00:00:10,280
The problem again is that locally remember our databases.

3
00:00:10,500 --> 00:00:15,760
Mongo is this server right here that we're connecting to using mongoose.

4
00:00:15,870 --> 00:00:23,560
This is local and Heroku our app on her who has no access to this at all.

5
00:00:23,610 --> 00:00:29,790
So the solution that we're going to go with is to use a hosted Mongo database using something called

6
00:00:29,850 --> 00:00:37,470
Mongo lab Samaniego lab is basically just an instance of Mongo running on a server somewhere that we

7
00:00:37,470 --> 00:00:43,510
can get a URL from that rather than being a local host.

8
00:00:43,590 --> 00:00:49,680
It will be mango Lahab something something something you are all that we can use in our application

9
00:00:50,100 --> 00:00:56,100
that exists outside of this local environment that actually exists online somewhere.

10
00:00:56,190 --> 00:01:01,280
So Mongo lab dot com before you get started this is not the only solution.

11
00:01:01,290 --> 00:01:04,440
This is just a really simple common solution.

12
00:01:04,440 --> 00:01:09,920
You can get Mongo installed locally on the Heroku instance.

13
00:01:09,930 --> 00:01:13,130
It's kind of a pain and it has its own set of problems.

14
00:01:13,170 --> 00:01:19,860
So this is a really pretty standard tool to use and the other thing is that it gives you great visual

15
00:01:19,920 --> 00:01:26,290
interface too to interact with your database to manage permissions to do things like reset your database

16
00:01:26,290 --> 00:01:26,310
.

17
00:01:26,310 --> 00:01:33,090
Heaven forbid if you ever needed to do that or look at different pieces of information and spects things

18
00:01:33,090 --> 00:01:33,440
.

19
00:01:33,720 --> 00:01:35,440
It gives you a lot of cool tools.

20
00:01:35,940 --> 00:01:38,450
So sign up.

21
00:01:39,120 --> 00:01:45,720
You also need to use a real real email address so I'll just call this web dev boot camp

22
00:01:48,230 --> 00:01:50,700
username and just be cold email

23
00:01:53,550 --> 00:01:59,270
and then add your password quick except you have to read this apparently.

24
00:01:59,280 --> 00:02:06,120
Open this at least then click accept and then click click Create account.

25
00:02:06,120 --> 00:02:08,850
So we're now in Monga lab.

26
00:02:08,970 --> 00:02:11,970
The next thing that we need to do is verify our e-mail address.

27
00:02:12,060 --> 00:02:13,170
So go ahead and do that.

28
00:02:13,170 --> 00:02:14,640
Open up your email account.

29
00:02:14,640 --> 00:02:16,860
Click the link that they send you.

30
00:02:17,770 --> 00:02:18,110
OK.

31
00:02:18,150 --> 00:02:21,030
So I went ahead and verified my e-mail.

32
00:02:21,060 --> 00:02:24,260
You can see here my e-mail address has been verified.

33
00:02:24,300 --> 00:02:26,030
Now I have access to these buttons.

34
00:02:26,130 --> 00:02:33,390
So this is our home page or dashboard that allows us to create new Mongo deployments which is the first

35
00:02:33,390 --> 00:02:34,650
thing that we want to do.

36
00:02:34,650 --> 00:02:40,920
So basically we're just making another database that lives on Mongo lab servers rather than our own

37
00:02:41,440 --> 00:02:45,680
to go ahead and click on Create new take a little bit sometimes.

38
00:02:46,290 --> 00:02:46,700
Great.

39
00:02:46,710 --> 00:02:54,810
So this lets us do now is create our new database on Mongo Lab. what we're going to do is stick with

40
00:02:54,900 --> 00:03:03,810
Amazon Web services but rather than replica set cluster that is a powerful high speed high availability

41
00:03:04,590 --> 00:03:11,550
yet expensive as you can see they get really expensive options we're not going to do that.

42
00:03:11,670 --> 00:03:13,240
We'll stick with single node.

43
00:03:13,530 --> 00:03:16,640
And for now we'll just do sandbox.

44
00:03:16,770 --> 00:03:22,490
So that's the free plan then what we're going to do is create a name for our database.

45
00:03:22,560 --> 00:03:31,620
We'll just call it the up came up and needs to be lowercase camp $0 month.

46
00:03:31,650 --> 00:03:33,790
Looks good to me.

47
00:03:33,810 --> 00:03:39,450
On create wait for this to finish up.

48
00:03:39,450 --> 00:03:40,500
All right.

49
00:03:40,500 --> 00:03:41,990
So if started.

50
00:03:42,030 --> 00:03:50,550
We're almost there as far as what we need to do on Monga lab and we can click on this the 0 5 5 whatever

51
00:03:50,550 --> 00:03:56,810
the you are all that you get there and you'll see that it gives us this new URL.

52
00:03:56,850 --> 00:03:59,900
So if I just copy this URL it's not going to work just yet.

53
00:04:00,120 --> 00:04:01,300
But I just want to show it to you.

54
00:04:01,310 --> 00:04:06,480
So if I copy it and go back to your camp Where's that.

55
00:04:06,470 --> 00:04:07,560
Here we go.

56
00:04:07,800 --> 00:04:10,560
And just pasted below.

57
00:04:10,560 --> 00:04:12,690
Notice that it's very similar to this.

58
00:04:12,700 --> 00:04:15,380
It's a mongo D-B Yoro.

59
00:04:15,810 --> 00:04:20,970
However instead of localhost it's Monga lab dot com slash Yup camp.

60
00:04:21,270 --> 00:04:25,610
And there's also this D-B user D-B password that we're going to have to take care of.

61
00:04:25,710 --> 00:04:27,710
So that's why I said we're not quite done.

62
00:04:28,030 --> 00:04:35,580
So I'm going to go back and we need to start and actually Telsey this database user is required to connect

63
00:04:35,580 --> 00:04:36,580
to this database.

64
00:04:36,600 --> 00:04:38,650
Click here to create a new one.

65
00:04:39,150 --> 00:04:41,780
So we need to have a user.

66
00:04:41,990 --> 00:04:46,890
Basically the way that this works is set on Lango lab.

67
00:04:47,280 --> 00:04:49,710
You can have different users different permissions.

68
00:04:49,710 --> 00:04:53,260
We're not talking about users of our application.

69
00:04:53,280 --> 00:04:54,600
Basically developers.

70
00:04:54,990 --> 00:05:00,360
So people who can connect to this database you might want to have two apps that use the same database

71
00:05:00,360 --> 00:05:00,720
.

72
00:05:00,880 --> 00:05:05,790
You know you have like sales data that you've captured a bunch of leads and you want to have marketing

73
00:05:06,150 --> 00:05:08,830
but you also want your e-mails to.

74
00:05:08,940 --> 00:05:11,640
I don't know if you want to have different people.

75
00:05:11,640 --> 00:05:16,650
Different teams have access to the same database maybe with different permissions you can actually manage

76
00:05:16,650 --> 00:05:17,390
that here.

77
00:05:17,820 --> 00:05:21,490
But we're just going I'd go with the simplest just single user.

78
00:05:21,840 --> 00:05:24,020
So I need to create a user name for this database.

79
00:05:24,060 --> 00:05:28,170
I'm just going to call it Colt password.

80
00:05:28,290 --> 00:05:29,700
I'm just going to be rusty

81
00:05:32,700 --> 00:05:38,610
so technically you guys would be able to connect to this database because I am showing you this part

82
00:05:38,610 --> 00:05:38,780
.

83
00:05:38,940 --> 00:05:44,760
You would be able to connect to resti her to to this database using my username and password which is

84
00:05:44,760 --> 00:05:45,750
just for the database.

85
00:05:45,750 --> 00:05:50,280
Again that's not the username and password for my account on Monga Lab. It's just for that database

86
00:05:50,300 --> 00:05:50,470
.

87
00:05:50,670 --> 00:05:57,240
But you could go in and screw with you know whatever super important data I have on Joachim.

88
00:05:57,900 --> 00:06:05,390
But I am going to show it to you just so that you see how it works.

89
00:06:05,400 --> 00:06:08,370
All right so quick create.

90
00:06:08,370 --> 00:06:09,500
So now we're going to go back.

91
00:06:09,510 --> 00:06:16,380
You can copy this if you didn't copy this URL go back here and we need to update this so instead of

92
00:06:17,010 --> 00:06:25,050
DB user you want colt and instead of D-B password we want to pass through that set which is Rustie whatever

93
00:06:25,050 --> 00:06:28,660
password and username you set there is what you need to use.

94
00:06:29,460 --> 00:06:36,360
So I'm going to go ahead and comment on the original line out that is using our local database.

95
00:06:36,360 --> 00:06:41,790
I'm going to copy this r URL and use that to connect to.

96
00:06:43,020 --> 00:06:48,690
Now I'm not getting rid of this in the next video I'm going to talk about why we don't want to just

97
00:06:48,690 --> 00:06:52,640
use the same database for development purposes and production.

98
00:06:52,710 --> 00:06:58,170
We'll talk about that right now but I'm going to show you a solution in the next video so we can have

99
00:06:58,170 --> 00:07:00,400
multiple databases in this video.

100
00:07:00,450 --> 00:07:06,960
We're just going to get it running locally and on Roku using this Mongul lab the same database but usually

101
00:07:06,960 --> 00:07:08,180
you don't want to do that.

102
00:07:08,580 --> 00:07:13,780
You don't want to worry about screwing up data deleting things corrupting stuff.

103
00:07:14,040 --> 00:07:17,580
You want to keep it separate but we're not doing that just yet.

104
00:07:17,940 --> 00:07:20,700
So let's just try connecting locally.

105
00:07:20,700 --> 00:07:27,300
So I'm going to go back here right now our application with the change we made has nothing to do with

106
00:07:27,300 --> 00:07:29,830
this Man-God process running anymore.

107
00:07:30,150 --> 00:07:38,910
So when we start this up and refresh this page if things went well if our lab database is set up correctly

108
00:07:39,150 --> 00:07:42,340
there will be no campgrounds here that should be empty.

109
00:07:42,360 --> 00:07:52,350
So let's try to make sure in the right directory node APTA genius says the server has started refresh

110
00:07:52,360 --> 00:07:52,920
.

111
00:07:53,730 --> 00:07:56,450
And as you can see we have no campgrounds.

112
00:07:56,790 --> 00:08:02,520
So we are successfully connect to a database because we didn't get an error if we hadn't successfully

113
00:08:02,550 --> 00:08:06,440
corrected connected if you or I was wrong we would get something like error.

114
00:08:06,450 --> 00:08:12,660
Connection refused like we did with Heroku just a few minutes ago and we're not connected to the original

115
00:08:12,660 --> 00:08:16,500
database because we don't see any of that data.

116
00:08:16,560 --> 00:08:22,440
You may not have had the exact same data obviously you might had you might have not had any campground

117
00:08:22,470 --> 00:08:29,210
yet might have had 20 or 30 but in my case it illustrates to you that we're now using this Mangalam

118
00:08:29,800 --> 00:08:31,570
set up.

119
00:08:31,740 --> 00:08:38,070
So let's just test it out make sure that we can still sign up and successfully add new posts and new

120
00:08:38,070 --> 00:08:38,690
campgrounds.

121
00:08:38,820 --> 00:08:44,890
So I'll send up with resti at Tator dot com.

122
00:08:44,970 --> 00:08:48,640
Password will just be password.

123
00:08:49,800 --> 00:08:57,180
So we sign up and we go let's add a new campground.

124
00:08:57,180 --> 00:08:59,980
The name is rodeo beach.

125
00:09:00,300 --> 00:09:10,340
Description is a beach with pretty rocks and I'll use this image that I took last weekend trying that

126
00:09:10,350 --> 00:09:12,760
whole photography thing out.

127
00:09:13,470 --> 00:09:16,130
Obviously use whatever image you like.

128
00:09:16,350 --> 00:09:21,300
Make sure that it successfully creates and it does awesome looks good.

129
00:09:21,720 --> 00:09:22,430
OK.

130
00:09:22,860 --> 00:09:31,710
So we are now adding data to the Mongo lab database and if we actually go over to Mangalam and refresh

131
00:09:31,710 --> 00:09:33,930
.

132
00:09:35,280 --> 00:09:39,190
We should be able to see in collections.

133
00:09:39,570 --> 00:09:43,060
We now have two collections campgrounds and users.

134
00:09:43,110 --> 00:09:47,460
So let's take a look at campgrounds for instance.

135
00:09:47,570 --> 00:09:52,380
We'll take a moment to load but you actually have access to the data here.

136
00:09:52,590 --> 00:09:53,490
You can see it.

137
00:09:53,580 --> 00:09:54,760
So it's pretty cool.

138
00:09:54,760 --> 00:09:56,100
It's a nice interface.

139
00:09:56,100 --> 00:10:01,530
You can do things like delete all documents but I could also add something in here or edit something

140
00:10:01,530 --> 00:10:02,810
if I needed to.

141
00:10:02,820 --> 00:10:08,210
Generally you don't want to be doing that but it is pretty common to want to read the data out.

142
00:10:08,250 --> 00:10:08,690
Great.

143
00:10:08,700 --> 00:10:10,330
So we have it working locally.

144
00:10:10,470 --> 00:10:14,410
Now all we need to do is add that change and push it up to her oku.

145
00:10:14,880 --> 00:10:20,220
So we'll go back stop the server.

146
00:10:21,360 --> 00:10:30,030
We need to add that change in where we replaced the Vango you are all with Mangu D-B Monga lab dot com

147
00:10:30,030 --> 00:10:33,660
slash whatever your particular URL is.

148
00:10:33,660 --> 00:10:44,620
Then we need to do a commit to say add Mongo lab and then get push Heroku master.

149
00:10:45,870 --> 00:10:50,930
So again it goes through a bunch of stuff at re-installs all the packages.

150
00:10:51,300 --> 00:10:55,130
Actually it checks to see if they have been installed already.

151
00:10:55,140 --> 00:10:58,600
It attempts to reinstall them realizes it already has all of them.

152
00:10:58,860 --> 00:11:04,470
Then it's going to run NPM start and fingers crossed all work this time.

153
00:11:04,470 --> 00:11:12,210
You never know with deploying it's always sort of always a little bit of a crapshoot depending on what

154
00:11:12,210 --> 00:11:19,800
kind of things you've been doing with my boot camp students it was always a bunch of students who would

155
00:11:19,800 --> 00:11:24,990
wait until the very last minute to deploy right before a big presentation when companies were coming

156
00:11:24,990 --> 00:11:25,700
in.

157
00:11:25,830 --> 00:11:31,020
And that led to a lot of unexpected errors in students assumed would be straightforward because the

158
00:11:31,020 --> 00:11:36,460
simple app that we deployed took five minutes and it turns out that they ran into some weird error or

159
00:11:36,460 --> 00:11:37,290
something went wrong.

160
00:11:37,290 --> 00:11:43,620
There are no CSSA compilation or something happened and you run into these crazy errors deploying.

161
00:11:43,620 --> 00:11:45,090
So don't underestimate it.

162
00:11:45,090 --> 00:11:47,490
It's not always super super smooth.

163
00:11:48,150 --> 00:11:52,930
Now let's try and refresh this page or this one here.

164
00:11:53,020 --> 00:11:56,290
UPS area sorry that was our old app this one.

165
00:11:56,550 --> 00:11:59,090
Which is your camp.

166
00:11:59,640 --> 00:12:01,360
And let's look at the campgrounds.

167
00:12:02,100 --> 00:12:03,080
And there we go.

168
00:12:03,240 --> 00:12:05,160
So it's connecting to Mongul.

169
00:12:05,190 --> 00:12:12,660
Now remember that this is sharing the data with the local version the development version which is really

170
00:12:12,660 --> 00:12:15,870
not ideal but it's working fine for now.

171
00:12:15,870 --> 00:12:16,570
Great.

172
00:12:16,590 --> 00:12:20,280
So to review all those steps you went through everything was exactly the same.

173
00:12:20,280 --> 00:12:26,820
As far as get a net Heroku create ad commit get push Heroku master.

174
00:12:27,090 --> 00:12:32,290
But the problem was that our Mangu database was running locally and that wouldn't work on Heroku.

175
00:12:32,640 --> 00:12:39,540
So then we went to Mangu lab created a hosted Monga lab database that we can connect to from our local

176
00:12:39,540 --> 00:12:41,910
version and from the Heroku version.

177
00:12:42,360 --> 00:12:48,150
And the next video we're going to see how we can change databases depending on if we're using Heroku

178
00:12:48,660 --> 00:12:51,500
or for writing code locally and development.

179
00:12:51,780 --> 00:12:52,460
All right.