WEBVTT 0 00:00.540 --> 00:07.500 In the last lesson we created a brand new cluster on MongoDB Atlas and we've successfully managed 1 00:07.500 --> 00:14.490 to get our Node.js app to talk to this cluster and be able to save data and communicate with our todo 2 00:14.490 --> 00:15.720 listDB. 3 00:15.750 --> 00:22.120 Now in this lesson we're going to deploy our Node.js app into Heroku so that we can access our website 4 00:22.320 --> 00:29.130 from anywhere across the Internet and not just through localhost:3000 on our local system. 5 00:29.910 --> 00:36.540 We're going to do this using our old friend Heroku and you should have already signed up to Heroku because 6 00:36.540 --> 00:39.840 previously we already deployed our use letter app. 7 00:39.870 --> 00:48.420 So just go ahead and log in. And it should now be looking at your personal dashboard. 8 00:48.470 --> 00:53.810 There's a couple of steps that are required before we can deploy an app to Heroku and it's a good idea 9 00:53.810 --> 00:58.400 to head over to the documentation to remind yourself of what those steps are. 10 00:58.400 --> 01:05.600 So just click on "Node.js" and click on "Get started with "Node.js"and then click on "I'm ready to start" 11 01:05.720 --> 01:10.920 and then scroll down to the part where says "I have already installed the Heroku CLI". 12 01:10.960 --> 01:16.950 Now if you haven't looked at the module where we we've deployed our newsletter app to Heroku, then I 13 01:16.950 --> 01:21.810 recommend heading over back there because there's a couple of set of instructions that you have to do 14 01:21.920 --> 01:24.670 the first time that you deploy an app to Heroku. 15 01:25.130 --> 01:29.790 But presuming that you've already done those things with me the last time we deployed to Heroku, we're 16 01:29.790 --> 01:33.050 just going to plow along and power through. 17 01:33.050 --> 01:40.040 The first thing to do is we need to prepare our app. And for a short list of things we need to do if 18 01:40.040 --> 01:43.390 we have an existing application that we want to deploy 19 01:43.430 --> 01:49.250 we're just going to click on this link and it takes us to this particular article which I'll link to 20 01:49.370 --> 01:52.950 in the course resources of this lesson as well. 21 01:52.950 --> 01:58.200 Now the first step is to track your codebase in a Git repository. 22 01:58.220 --> 02:06.300 Let's head over to our terminal and we're going to Control + C to exit our previous nodemon instance 23 02:06.600 --> 02:11.450 and just check to make sure that you're still in the location of your project folder. 24 02:11.790 --> 02:19.290 And we're going to type in "git init" to initialize an empty Git repository and then we're going to say 25 02:19.320 --> 02:28.410 "get add ." and this will add everything that we currently have in our repository to the staging 26 02:28.410 --> 02:37.200 area and we're ready to commit our app. And I'm just going to call it "Initial commit". 27 02:37.740 --> 02:44.610 The next thing that it's asking us to do is to add a Heroku Git remote. And to do this the first thing 28 02:44.610 --> 02:47.260 we have to do is to log in to Heroku. 29 02:47.310 --> 02:53.490 So you already should have the Heroku command line interface installed from the last time when we deployed 30 02:53.490 --> 02:54.180 to Heroku 31 02:54.330 --> 03:01.590 so you should be able to say "heroku login" and now it will ask you for your email and your password 32 03:01.950 --> 03:04.510 to login to Heroku. 33 03:04.980 --> 03:10.590 And once that's successful you'll see something in green and it'll tell you that you are logged in. Now 34 03:10.590 --> 03:11.400 that you're logged in, 35 03:11.400 --> 03:17.610 feel free to just type "clear" to clear your screen and we're ready to head over to the next step. And 36 03:17.610 --> 03:20.720 the next step is to add a Heroku Git remote. 37 03:20.760 --> 03:29.460 So here we have to say "heroku create" and that will create our brand new app on Heroku which is now called 38 03:29.530 --> 03:30.670 gentle-stream. 39 03:30.670 --> 03:37.840 Sounds very relaxing and we're ready to move on to the next step which is adding a Procfile. Inside 40 03:37.930 --> 03:40.930 our current project container folder 41 03:41.080 --> 03:47.700 we're going to write touch and then we're going to write procfile without an extension. 42 03:47.740 --> 03:54.010 So the easiest way is simply just to copy this because if you have any typos it's a massive headache 43 03:54.010 --> 03:55.390 down the line. 44 03:55.540 --> 04:04.330 And just to paste it in here. So now we're creating a file called Procfile, with no extensions, no 45 04:04.660 --> 04:06.590 tex,t no dot anything. 46 04:06.880 --> 04:12.760 And we're going to hit enter. And this step is super important because later on you'll have problems 47 04:12.760 --> 04:16.090 with Heroku and it will be down to something like this. 48 04:16.090 --> 04:24.070 So next we're going to open up this Procfile using the application that is Atom. 49 04:24.210 --> 04:30.320 If you don't add an Atom it usually defaults to TextEdit which will work just as fine 50 04:30.360 --> 04:36.780 but sometimes when you write these quotation marks, it has a stylized version which leads to problems 51 04:36.840 --> 04:37.590 as well. 52 04:37.800 --> 04:45.300 So in our Procfile Heroku instructs us to put in something like this which tells it that it's a web 53 04:45.300 --> 04:50.580 application and to start it, the entry point is at app.js. 54 04:50.840 --> 04:52.350 So for us it's pretty simple. 55 04:52.350 --> 04:57.540 We're just gonna copy it as is and paste it in here and then hit save. 56 04:58.020 --> 05:00.540 That's step 3 done. 57 05:00.540 --> 05:07.380 And then we can move on to Step 4 which is listing on the right port. Heroku is going to generate a dynamic 58 05:07.380 --> 05:07.690 port 59 05:07.710 --> 05:13.560 rather than use the static one which we've set as port 3000. You can either set your app to 60 05:13.560 --> 05:19.470 simply only listen on their port which is process.env.PORT. 61 05:19.500 --> 05:25.950 It's basically just a variable that they get to set or if you want to be able to run it locally as 62 05:25.980 --> 05:28.060 well as having it run on Heroku, 63 05:28.230 --> 05:30.350 then you can use something like this. 64 05:30.480 --> 05:34.470 So just above our app.listen I'm going to paste those lines of code. 65 05:34.620 --> 05:39.600 I'm going to change their default port to our preference which is 3000 66 05:39.750 --> 05:44.520 and this basically says that let port equal the port that Heroku has set up, 67 05:44.760 --> 05:51.480 if they haven't set one up when port is null or port is an empty string, then we're going to use our local 68 05:51.480 --> 05:52.290 one. 69 05:52.290 --> 05:59.730 So now we're going to say instead of app.listen port we're going to say app.listen, port have a callback 70 05:59.730 --> 06:07.410 function that says-- console log that says "Server has started successfully". 71 06:07.420 --> 06:09.850 All right so that's step 4 done. 72 06:10.030 --> 06:13.800 Next is step 5 which we have already completed. 73 06:13.840 --> 06:17.780 It's telling us instead of writing your database to your local file system, 74 06:17.800 --> 06:21.540 so our localhost 27017 MongoDB 75 06:21.730 --> 06:24.160 instead use a database 76 06:24.340 --> 06:31.360 for example Amazon S3, Heroku Postgres or in our case it's MongoDB on mongodb.net. 77 06:31.510 --> 06:35.820 And this is of course using our MongoDB Atlas. 78 06:35.890 --> 06:41.820 Now we can skip ahead to step 6 which is completing the language-specific set up. 79 06:41.950 --> 06:50.080 So we'll click on "Node.js" and the only thing that we have to do here is to add the version of 80 06:50.080 --> 06:52.230 Node to our package. 81 06:52.400 --> 06:59.800 json. So I'm just going to copy this and we're going to head over to our Atom where we got our package 82 06:59.890 --> 07:08.770 .json and right below where it says "license" I'm going to hit enter and I'm going to paste my 83 07:08.890 --> 07:12.640 engine's key in here and then I'm going to hit save. 84 07:12.880 --> 07:17.590 Now this version of Node is not the version that we've been using, 85 07:17.650 --> 07:19.160 it's way way old. 86 07:19.270 --> 07:23.770 So to find out the version of Node that you're currently running we're just going to type into the command 87 07:23.770 --> 07:27.520 line "Node --version" and hit enter. 88 07:27.670 --> 07:31.540 And you can see the I'm currently working with 8.12.0. 89 07:31.930 --> 07:38.260 So to figure out which Node version you're running simply in the command line just type "Node -- 90 07:38.350 --> 07:44.140 version" and you will get the one that you've been running locally and it's been working successfully 91 07:44.140 --> 07:44.540 for you. 92 07:44.560 --> 07:49.020 So just go ahead and copy that number into where it says Node. 93 07:49.300 --> 07:53.790 And here we're going to put it inside the quotation marks and hit save 94 07:54.010 --> 07:56.690 and we're now done with that step. 95 07:56.770 --> 07:58.920 Now we're pretty much ready. 96 07:58.930 --> 08:07.480 The last thing it wants us to do is to create a gitignore file that ignores our Node modules or DS_store 97 08:07.750 --> 08:09.090 or the debug log. 98 08:09.310 --> 08:15.950 And this is something that we learnt about when we learned about GiHub in the Git and GiHub module. 99 08:16.030 --> 08:23.200 It's quite a good idea to do because at the moment we have this giant folder called Node modules and 100 08:23.200 --> 08:30.250 it's got all of our dependencies in there and what Heroku will do is instead of trying to upload all 101 08:30.250 --> 08:37.830 of this code it will look inside your dependencies and rebuild it using npm install on their server. 102 08:38.420 --> 08:44.290 By adding a gitignore we will get to ignore all of these Node modules and get Heroku to rebuild these 103 08:44.620 --> 08:47.860 on their end making it easier to work with your app. 104 08:47.860 --> 08:55.780 So let's go ahead into our terminal and let's just create a .gitignore file and then we're going 105 08:55.780 --> 09:04.490 to open this .gitignore file and we're going to open it inside Atom yet again. 106 09:04.840 --> 09:14.270 And then we're just going to copy and paste all of these into here, hit save and now we get to ignore 107 09:14.270 --> 09:21.650 the Node modules folder, the NPM debug log, and the .DS_store for example like this file that is only 108 09:21.650 --> 09:27.210 there because I've created this folder on a Mac and it wants to know how I want my icons laid out. 109 09:27.210 --> 09:32.380 So all of these things can go in the gitignore and we can hit save and close. 110 09:32.630 --> 09:37.320 And now we are pretty much ready to deploy our application to Heroku. 111 09:37.340 --> 09:46.810 So let's go ahead and again say "git add ." and "git commit" 112 09:47.040 --> 09:49.050 and I'm just going to call it "Add 113 09:49.290 --> 09:49.970 gitignore, 114 09:50.010 --> 09:56.390 procfile and update ports". Okay. 115 09:56.730 --> 10:03.810 Now let's hit enter and let's commit all of our changes. And now because we've already created our Heroku 116 10:03.810 --> 10:11.180 remote we can simply skip to the next step and say "git push heroku master". 117 10:11.280 --> 10:18.210 And now it's going to do a whole bunch of things behind the scenes, uploading things, compressing objects 118 10:18.660 --> 10:23.430 building it, running NPM install on their side 119 10:23.940 --> 10:32.840 and once it's done it will say "Build succeeded!". And it'll tell you that it's now launched and released 120 10:32.840 --> 10:39.710 it to this URL: gentle-stream something something.herokuapp.com. 121 10:39.710 --> 10:46.790 So now if we go ahead and click on it then you can see we have our todolist app now being deployed 122 10:46.910 --> 10:57.860 from Heroku using HTTPS via the Internet and the backend is connected to our MongoDB cluster in 123 10:57.860 --> 11:04.660 Atlas because that previous test item came the last time we tried to test it locally. 124 11:05.300 --> 11:07.670 So let's now go ahead and test this. 125 11:07.670 --> 11:14.600 Let's see if we can create a new item. Let's just call it 126 11:14.600 --> 11:17.480 "Feed me". 127 11:17.990 --> 11:27.050 So let's add that to our to do list and let's check in our Atlas and if we simply hit refresh to see 128 11:27.050 --> 11:34.480 what new data has come through, then right at the bottom you can see the item being saved in our cluster. 129 11:34.910 --> 11:41.930 So now at this point you can share this URL with anybody on Twitter, on Facebook, 130 11:42.250 --> 11:48.410 share it in the Q&A section so that everybody can get to see and share it with your friends and family 131 11:48.410 --> 11:54.380 and show off what you've created because anybody will be able to access it and add todo list items 132 11:54.650 --> 11:57.110 or add new todo lists etc. 133 11:57.500 --> 12:06.620 We've now got a complete website with a Node backend and a MongoDB database that's hosted live on 134 12:06.620 --> 12:07.390 the Internet. 135 12:07.520 --> 12:08.160 Well done for 136 12:08.210 --> 12:13.040 everybody who's followed along this far and enjoy playing around with your live website.