WEBVTT 0 00:00.420 --> 00:00.740 All right. 1 00:00.750 --> 00:07.710 So now that we know how our backend is going to function once it's hosted on MongoDB Atlas and 2 00:07.710 --> 00:14.160 Heroku, then it's time to get started and actually set up our website so that we can deploy our ToDo 3 00:14.160 --> 00:16.120 list app onto the Internet. 4 00:16.170 --> 00:17.130 First things first. 5 00:17.220 --> 00:22.030 Let's go ahead and sign up for a MongoDB Atlas account. 6 00:22.080 --> 00:31.200 So if you just click on "Get MongoDB" and the first thing that it has here is sign up to the MongoDB 7 00:31.290 --> 00:36.140 Atlas service. Here where it says "Deploy a free cluster" 8 00:36.210 --> 00:45.620 you're going to create a new account and you're going to click on "Get started free". 9 00:45.650 --> 00:52.160 So now we're going to go through a few steps to set up our brand new cluster on MongoDB Atlas. 10 00:52.220 --> 00:57.020 The first thing we're going to choose is where is our cluster going to be hosted on. 11 00:57.230 --> 01:04.310 And the cloud provider that we're going to go with is AWS and both AWS and Google Cloud have free 12 01:04.310 --> 01:06.090 tiers that are available. 13 01:06.140 --> 01:13.130 We're going to click on AWS and select North Virginia where we can get a free tier for our MongoDB 14 01:13.140 --> 01:17.630 database without having to enter our credit card details. 15 01:17.660 --> 01:23.910 Next we're going to scroll down and expand this part where it says "Cluster Tier". 16 01:24.320 --> 01:30.500 At the moment the option that's selected is M30 which gives you 8GB of RAM and 40 gigabytes of 17 01:30.500 --> 01:35.140 storage but you're also paying 50 cents an hour. In order to get started 18 01:35.150 --> 01:39.500 we're going to change our cluster to M) which is the free tier 19 01:39.740 --> 01:45.500 and you can see now we have a free forever plan and this means that we don't have enter any credit card 20 01:45.500 --> 01:49.400 details and we can learn without fear of messing up. 21 01:49.400 --> 01:55.210 So the nice thing about using MongoDB Atlas as opposed to setting up our servers straight up on 22 01:55.210 --> 02:02.600 AWS is we can get started without having to provide any payment details without any fear of accidentally 23 02:02.600 --> 02:06.740 messing something up and getting a huge bill from Amazon AWS. 24 02:06.800 --> 02:12.050 So this is a really really safe environment. And if you find a website getting more and more popular 25 02:12.380 --> 02:15.520 then you can always scale up at a later stage as well. 26 02:16.990 --> 02:21.990 Now the next thing is we're going to use our MongoDB 3.6. 27 02:21.980 --> 02:30.480 Now this is not the latest and greatest version of MongoDB but it will work just fine as it is. Now 28 02:30.510 --> 02:31.430 for Cluster name 29 02:31.440 --> 02:37.080 you can rename it if you wish but for this tutorial we're just going to keep it as "Cluster0". 30 02:37.440 --> 02:41.080 And now we're ready to go ahead and click Create cluster. 31 02:41.580 --> 02:48.150 And because they do have costs associated with these clusters because they're paying AWS then it's 32 02:48.150 --> 02:52.740 important for them to check that you are not a robot and you're not trying to take advantage of their 33 02:52.740 --> 02:53.590 services. 34 02:57.740 --> 03:03.650 All right, so now your cluster is being created and as they say it takes between 7 to 10 minutes 35 03:03.740 --> 03:10.350 to provision and they're doing a lot of heavy lifting on the backend setting up everything on AWS. 36 03:10.430 --> 03:13.520 And so we're going to come back to this a little bit later on. 37 03:13.610 --> 03:20.480 Now if you go ahead and click on "Security", you can see that we currently have no users. 38 03:20.480 --> 03:23.640 Let's go ahead and add a brand new user. 39 03:23.750 --> 03:28.150 So I'm just going to call my user admin- 40 03:28.430 --> 03:35.910 angela and then I'm just going to enter a password that we're going to use to test with. 41 03:35.940 --> 03:39.420 So let's call it test123. 42 03:39.600 --> 03:45.900 Go ahead and enter a user and password and note down those details because we're going to use it very 43 03:45.900 --> 03:49.970 very soon and then change that uses privileges to be an Atlas 44 03:49.970 --> 03:50.650 admin 45 03:50.850 --> 03:58.770 and go ahead and add this user to our list of MongoDB users. These MongoDB users have the credentials 46 03:58.800 --> 04:04.340 which we'll need to be able to communicate with our database on MongoDB Atlas. 47 04:04.380 --> 04:09.930 And that's why we set up usernames and passwords to make accessing our database more secure. 48 04:09.930 --> 04:15.240 Now the next thing we're going to do is we're going to go over to the IP whitelist and we're going 49 04:15.240 --> 04:22.020 to click on Add an IP address and we're going to click on allow access from anywhere and then go ahead 50 04:22.020 --> 04:24.070 and click confirm. 51 04:24.090 --> 04:26.770 Now this again takes a little while for it to set up. 52 04:27.000 --> 04:33.300 But meanwhile if we head back over to overview then you can see our cluster is now set up and it's ready 53 04:33.300 --> 04:33.930 to go. 54 04:34.630 --> 04:35.600 First things first. 55 04:35.650 --> 04:38.920 Let's go ahead and connect to our cluster. 56 04:38.920 --> 04:46.650 We click on the connect button here and go ahead and click on connect with the Mongo shell. 57 04:46.660 --> 04:51.460 So first it checks to see if you already have the Mongo shell installed which we do because we've 58 04:51.460 --> 04:52.870 been using it for a long time 59 04:52.870 --> 05:00.400 now. The next thing it says is click on the version of Mongo shell you have to see what URL 60 05:00.400 --> 05:01.910 you need to connect to it. 61 05:02.140 --> 05:11.920 Let's go ahead and open up our hyper terminal and we're going to just run "mongo --version" and 62 05:11.920 --> 05:17.740 this will tell us what is the version of our Mongo shell. And we're on 4.0.2 which 63 05:17.740 --> 05:20.000 is more than 3.6 64 05:20.020 --> 05:27.100 so we'll click on this option. And now it gives you a URL to connect to your MongoDB cluster and 65 05:27.250 --> 05:35.680 you can see that it's got the username baked in and it's also got the URL of a test database in our 66 05:35.680 --> 05:36.610 cluster. 67 05:36.640 --> 05:41.970 So let's go ahead and copy this and paste it into our command line. 68 05:42.920 --> 05:45.470 It doesn't really matter where you do this from. 69 05:45.470 --> 05:50.300 You can see that at the moment I'm inside the user folder, angelayu, but you can call this command 70 05:50.330 --> 05:51.740 anywhere you like. 71 05:51.740 --> 05:54.620 So now let's go ahead and hit enter. 72 05:54.620 --> 06:03.170 Now once I hit Enter it's going to ask me for a password and the password that it wants as it says here 73 06:03.290 --> 06:07.580 is it has to be the one for that user that you just set up. 74 06:07.580 --> 06:13.910 Remember previously when we set up our users under the Security tab. You need to remember what the password 75 06:13.910 --> 06:15.630 is that you put in here. 76 06:15.770 --> 06:17.290 And if you don't remember 77 06:17.300 --> 06:24.110 you can also just go ahead and enter a new password and click it to update the user. 78 06:24.150 --> 06:25.850 But if you do remember the password, 79 06:25.890 --> 06:35.340 so previously I set it up with test123, and now it's going to link up to my MongoDB server on Atlas. 80 06:35.520 --> 06:39.010 And now we no longer see our prompt from the command line 81 06:39.180 --> 06:47.280 and instead we now have an active session with the MongoDB shell running on the Atlas cluster. 82 06:47.280 --> 06:52.320 Now here you'll see a warning where it says "shell and server versions do not match" 83 06:52.440 --> 06:58.180 because if you scroll up and if you remember our shell version is 4.0.2 84 06:58.470 --> 07:04.180 but remember when we're working with free instances on MongoDB Atlas at least currently anyways 85 07:04.250 --> 07:06.200 they're limited to 3.6, 86 07:06.240 --> 07:07.580 so that's why it doesn't match. 87 07:07.620 --> 07:09.660 But it doesn't affect us at all 88 07:09.660 --> 07:17.240 so don't worry about that warning. Now that we're inside our Mongo shell and if you remember previously 89 07:17.570 --> 07:23.510 we had to have another tab that was running mongo for this to work but currently we actually don't 90 07:23.510 --> 07:24.680 have that at all. 91 07:24.800 --> 07:29.130 And instead of mongod we're now connected to the cloud based cluster. 92 07:29.420 --> 07:37.040 And we can start typing in Mongo commands such as "show dbs" and there is an admin and there's a 93 07:37.040 --> 07:38.270 local db. 94 07:38.270 --> 07:43.580 Now what if we wanted to see if we were definitely connected to this same cluster? 95 07:43.760 --> 07:50.280 Well we can go ahead and click on collections under our cluster and we can create a new database. 96 07:50.300 --> 07:59.290 Let's just call our database test and our collection name also test, hit create. 97 07:59.420 --> 08:05.360 And now we're going to add a new piece of data to this collection. And to do that we just click on insert 98 08:05.450 --> 08:12.120 document and we'll call it newData 99 08:12.160 --> 08:16.200 "Welcome to your database". 100 08:16.210 --> 08:24.730 All right. Now let's hit insert and put that data into our test collection inside our test database. 101 08:24.730 --> 08:32.920 And if we go back to our Mongo shell and we say "show dbs" again now you can see we have this new 102 08:32.920 --> 08:41.860 database called test and if we say "use test" then "show collections" you can see we've got a single collection 103 08:41.860 --> 08:47.770 called test and then we can say "db.test.find all. 104 08:48.010 --> 08:52.020 And you can see that new data that you inserted just now. 105 08:52.420 --> 08:53.910 This is pretty cool. 106 08:53.980 --> 08:59.080 Now we're able to connect to our cluster using our Mongo shell. 107 08:59.080 --> 09:04.440 Now the next thing we need to do is to be able to connect to it from our application. 108 09:04.690 --> 09:11.440 So if you remember, our previous method for running this app was we had to create a new terminal and 109 09:11.530 --> 09:22.490 we said mongod to start up our MongoDB server on port 27017 in our local system. The next thing 110 09:22.490 --> 09:30.340 we did was we went back to our previous shell and we used nodemon to run our app.js and our server 111 09:30.340 --> 09:32.110 started on port 3000. 112 09:32.330 --> 09:40.660 So now if we head over to localhost:3000 then we can see our ToDo list as it is. 113 09:40.680 --> 09:45.830 So this is currently running on our local MongoDB database. 114 09:45.840 --> 09:50.690 Now what if we wanted to swap out a local database? 115 09:50.850 --> 09:59.140 If we go ahead and hit Control + C and we shut down our MongoDB server on our local host. 116 09:59.880 --> 10:06.790 So right now if I was to hit "rs" to restart our server, you can see we get a whole bunch of errors. 117 10:06.960 --> 10:13.710 And it's because we can't actually connect to our Mongo server on 27017. 118 10:13.860 --> 10:15.660 Well that's because we shut it down. 119 10:15.960 --> 10:23.640 So how can we instead connect to our MongoDB cluster to save our data in the cloud in Mongo Atlas 120 10:23.730 --> 10:31.140 instead? If we head back to our cluster and we click on Connect again and we choose the "connect your 121 10:31.140 --> 10:37.380 application" and then we're going to select the "SRV connection" because we're using the latest version 122 10:37.380 --> 10:38.690 of MongoDB 123 10:38.790 --> 10:42.950 and then we're going to copy this address. 124 10:43.050 --> 10:47.080 So now if we copy that address and we go back into our app. 125 10:47.130 --> 10:53.700 js, we can now select all of this string other than the last part where we're creating our database 126 10:54.150 --> 10:57.630 and we can replace it with that string that we just copied. 127 10:58.020 --> 11:07.610 And this you will notice is on mongodb.net and it's logging in using our admin-angela 128 11:07.610 --> 11:12.120 username and then we have to provide the password that we created earlier on. 129 11:12.130 --> 11:17.070 So there's a couple of changes that we need to make to this URL before we can test it. 130 11:17.080 --> 11:23.200 Now the first thing is you can see that there is a password placeholder here and we have to replace that 131 11:23.440 --> 11:26.750 with the password that we created for our user. 132 11:26.890 --> 11:33.310 So we're using the credentials of our admin-angela username and we have to provide the same password 133 11:33.310 --> 11:36.010 that we used when we created this user. 134 11:36.280 --> 11:41.660 So we have to replace all of this part including the angle brackets with the password. 135 11:41.840 --> 11:46.810 And that might be different for you but for me it was Test-123. 136 11:46.900 --> 11:48.370 This is the initial part. 137 11:48.450 --> 11:54.320 Now the second thing we have to check is previously we were saying that we were going to create a database 138 11:54.340 --> 11:55.860 called todolistDB. 139 11:56.080 --> 12:01.690 But at the moment it's trying to save data into the database that we created earlier on which was called 140 12:01.690 --> 12:02.680 test. 141 12:02.680 --> 12:08.080 So what we're going to do is we're going to delete all of this and we're going to get it to save into 142 12:08.140 --> 12:11.840 the database that we wanted which was todolistDB. 143 12:11.860 --> 12:20.230 So now if we hit save and we go back into our console and we restart our server, now you can see we're 144 12:20.230 --> 12:25.330 no longer getting that error right? We're not getting "failed to connect to server" because we're actually 145 12:25.330 --> 12:27.620 getting a success message. 146 12:27.940 --> 12:35.860 Now if we go into our browser and we go ahead and go on to localhost:3000 again you can see we now have 147 12:35.890 --> 12:44.400 a brand new copy of our todo list app with a database that's hosted in the cloud on Mongo atlas. 148 12:44.690 --> 12:47.520 And if I go ahead and add a new item here 149 12:47.540 --> 12:52.650 so for example let's say "Test item" and click add, 150 12:52.760 --> 12:59.360 now not only does it show up in my database, but if I go over to my MongoDB cluster and I click on 151 12:59.380 --> 13:05.970 "Collections" you can see I now have this new database called todolistDB 152 13:06.220 --> 13:09.800 and I've got items and lists and inside items 153 13:09.880 --> 13:14.030 I've got all of my default items plus the one I added just now. 154 13:14.320 --> 13:21.910 So now we can verify for certain that our database is hosted in the cloud and we're accessing it from our 155 13:21.930 --> 13:24.650 Node.js app. Now 156 13:24.670 --> 13:31.510 in the next lesson we're going to set up our app so that we can deploy it on Heroku and get Heroku 157 13:31.510 --> 13:38.300 to talk to Mongo Atlas and to be able to access our entire website and make it function on the worldwide 158 13:38.320 --> 13:41.260 web. For all of that and more, I'll see you on the next lesson.