WEBVTT 00:03.760 --> 00:05.290 Hey, did everyone are they sure? 00:05.290 --> 00:09.760 And in this video, we're going to talk about how we can push our application to Heroku. 00:09.850 --> 00:14.620 Let me remind you again, this application is still buggy and we are pushing the application in the 00:14.620 --> 00:16.810 bug format onto the Heroku. 00:16.810 --> 00:21.670 And I want you to do that also so that you can see that what kind of things goes wrong, what to expect, 00:21.670 --> 00:25.360 and of course always expect that your application is not going to run on the first go. 00:25.450 --> 00:31.600 So here is a kind of summary and the kind of a generalized code or workflow, whatever you want to call 00:31.630 --> 00:36.310 to push your application on to Heroku, you'll see these kinds of things throughout the course. 00:36.310 --> 00:38.500 I have designed a whole lot of them in this one. 00:38.620 --> 00:42.720 So first step is to get in it, initialize your git, I'll walk you through with that. 00:42.730 --> 00:48.430 Then we simply add all the files to this git repository or kind of a git tracking system and we commit 00:48.430 --> 00:50.050 it to the git optionally. 00:50.050 --> 00:51.130 You can push it to GitHub. 00:51.130 --> 00:52.450 I won't be doing it. 00:52.450 --> 00:55.420 It is not compulsory that you have to push everything to GitHub. 00:55.420 --> 00:57.340 You can connect your GitHub to the application. 00:57.340 --> 00:59.140 That is one of the way of doing the things. 00:59.140 --> 01:03.880 But also you can directly maintain the entire git setup directly on the Hiroko as well. 01:03.880 --> 01:08.800 A lot of people and a lot of companies do that and then you can simply go ahead, create a Heroku app, 01:08.800 --> 01:11.350 push your code to Heroku debug and push again. 01:11.350 --> 01:12.430 That's how it works. 01:12.430 --> 01:13.930 Let's go ahead and give it a try. 01:13.960 --> 01:19.120 The first thing I would like to do here is come on to any of your terminal and just go ahead and say 01:19.120 --> 01:20.860 Heroku V. 01:20.890 --> 01:26.110 This will give you at least some version of Heroku that is install if the hero quickly is installed. 01:26.170 --> 01:31.750 Now reminding a gentle reminder to all of you for this one we are going to use CLI. 01:31.750 --> 01:34.990 So make sure the heroku cli is installed. 01:34.990 --> 01:36.710 It's a pretty simple install. 01:36.710 --> 01:39.610 It couldn't be much more simpler than this, especially for windows. 01:39.610 --> 01:40.840 Quickly click, click next. 01:40.840 --> 01:41.320 I agree. 01:41.320 --> 01:41.890 Okay. 01:41.890 --> 01:46.180 And for my guys, it takes a little bit while to install it via brew. 01:46.210 --> 01:50.020 Maybe you need to update your brew with the latest configuration of GitHub and everything. 01:50.020 --> 01:56.170 So it might take some time, probably a couple of a couple of hours for the bad guys, assuming that 01:56.170 --> 01:57.040 this is all ready. 01:57.040 --> 01:59.380 Now, let's go ahead and check out our application. 01:59.380 --> 02:00.490 So this is all good. 02:01.150 --> 02:02.590 Okay, so now we are here. 02:02.590 --> 02:04.870 Now we need to follow the instruction as it is. 02:04.870 --> 02:07.780 So we're going to initialize a git repository and a whole bunch of other things. 02:07.780 --> 02:08.770 So let's go ahead and do that. 02:08.770 --> 02:09.610 It's pretty easy. 02:09.910 --> 02:13.360 The first thing that we're going to do is make sure the git is installed in your system. 02:13.360 --> 02:15.040 Then we are going to simply say, Get in it. 02:15.040 --> 02:17.620 That's the command to initialize the git repository. 02:17.620 --> 02:22.120 Now as soon as you're going to do this, this will create an empty directory which will have nothing 02:22.120 --> 02:22.930 at all inside it. 02:23.010 --> 02:24.730 It will also be hidden. 02:24.760 --> 02:31.330 It can be seen on the Linux and Mac by issuing a command ls dash la and it will show you a dot. 02:31.330 --> 02:33.010 Get in the VTS code. 02:33.010 --> 02:38.050 It's not going to appear because the dot files are usually hidden and that's why on the windows there 02:38.050 --> 02:41.710 are different set of commands, which I don't remember at the moment, but that's the command. 02:42.490 --> 02:47.560 So moving further, once you are doing this and you are adding anything to that, that is an important 02:47.560 --> 02:50.110 file known as git ignore. 02:51.430 --> 02:57.100 Now this file is super important because I don't want to add all the things onto my git tracking system. 02:57.100 --> 03:02.200 Some things like node modules can be recreated whenever I move anything to my system. 03:02.200 --> 03:04.090 All I have to do is say NPM install. 03:04.090 --> 03:04.540 That's it. 03:04.540 --> 03:06.070 No argument or nothing. 03:06.070 --> 03:12.460 I have to simply go ahead and here, come up say and NPM install and all the repositories will be taken 03:12.490 --> 03:16.480 from the package store, JSON and the rest of the dependencies will be installed for me. 03:16.480 --> 03:23.230 So you don't ever just pass on this node module file to anybody because simply it can be recreated. 03:23.440 --> 03:29.170 Now once you put this git ignore, then you have to simply say that anything inside the node underscore 03:29.350 --> 03:30.670 modules. 03:30.670 --> 03:33.730 If I can write that correctly, make sure you write that correctly. 03:33.730 --> 03:35.530 Anything inside the node modules. 03:35.530 --> 03:37.060 I don't care about it. 03:37.270 --> 03:39.430 I don't want to keep it under the track. 03:39.820 --> 03:40.540 That's nice. 03:40.540 --> 03:46.230 And whenever now you say that, hey, just add all the files it will be first looking into git ignore 03:46.240 --> 03:49.300 will ignore all the files and then we'll install the rest of the stuff. 03:49.540 --> 03:51.340 Let's go ahead and now add all of this. 03:51.340 --> 03:55.630 So we're going to say get add and DOT means just add everything. 03:55.870 --> 04:01.930 You can selectively mark the files as well, but I'll just add this one now this is okay. 04:01.930 --> 04:03.490 And now we simply want to comment. 04:03.490 --> 04:09.190 So we're going to simply say get commit, dash m make sure you issue a dash am option. 04:09.190 --> 04:12.250 Otherwise it will open up a default data but don't want to go there. 04:12.250 --> 04:13.720 So just go ahead and on that. 04:13.720 --> 04:22.660 So we're going to call this one as let's call this on as my first production release OC Let's go ahead 04:22.660 --> 04:23.560 and hit Enter. 04:23.560 --> 04:28.690 Now it says, okay, all these files are now under the tracking, so that's nice. 04:28.690 --> 04:31.630 Let's see, what are the other steps coming back up here? 04:31.630 --> 04:33.070 So we have initialized the gate. 04:33.070 --> 04:35.680 We have committed to this optionally to push GitHub. 04:35.680 --> 04:36.730 I'm not going to do it. 04:36.730 --> 04:38.950 Let's create a Heroku app next. 04:38.950 --> 04:41.230 And by the way, these are all codes and everything. 04:41.230 --> 04:45.670 These flows will be available to you as well so that you can do all of your development personally as 04:45.670 --> 04:46.060 well. 04:46.270 --> 04:50.620 Okay, let's create an app, make sure you are creating an app, not a pipeline. 04:50.620 --> 04:51.910 There are a couple of options here. 04:51.910 --> 04:54.610 Always this time at least we want to create an app. 04:54.610 --> 04:59.440 We're going to call this one as AE and feel free to choose any name. 04:59.440 --> 05:01.330 Something like AE of your name. 05:01.330 --> 05:01.660 Something what? 05:01.770 --> 05:02.400 Be awesome. 05:02.610 --> 05:03.790 Let's create an app. 05:03.810 --> 05:04.590 There we go. 05:05.700 --> 05:10.050 And it's usually is an instantaneous process and we can do that. 05:10.170 --> 05:14.700 Now it says you can use Hiroko, get you can connect to your GitHub or you can use the registry. 05:14.700 --> 05:18.180 We'll be using this one, so make sure you install the hero quickly. 05:18.210 --> 05:18.570 Great. 05:18.570 --> 05:19.440 We have already done that. 05:19.440 --> 05:23.910 Then use the Heroku login login to and just log in into the application. 05:24.230 --> 05:24.460 Okay. 05:24.510 --> 05:28.880 So let's go up here and say Heroku login. 05:29.340 --> 05:33.720 Let's go ahead and do that and it's going to ask you that, hey, I'll open up a browser, press any 05:33.720 --> 05:38.530 key, just go ahead and press any and it will open up things into the browser. 05:38.550 --> 05:39.300 There we go. 05:39.510 --> 05:45.060 You have to simply click on login, enter email and password if it asks you mine is not going to do 05:45.060 --> 05:50.640 it and I can just go ahead and return back to my console and say, Hey, you have installed this one. 05:50.640 --> 05:53.190 This is a fresh account that I've created just for this course. 05:53.190 --> 05:54.540 So we are all good. 05:54.900 --> 05:56.430 Okay, instructions are pretty clear. 05:56.430 --> 05:59.370 Let's go back and see what more it is asking us to do. 05:59.700 --> 06:02.370 Then you can go into a project, initialize your git. 06:02.370 --> 06:03.330 We have already done that. 06:03.330 --> 06:07.870 Now importantly, we have to mark a Heroku remote repository. 06:07.890 --> 06:09.660 Make sure you copy it from here. 06:09.660 --> 06:14.550 Because this includes the AE app, which is the app name yours is going to be different. 06:14.550 --> 06:15.840 So you need to do that. 06:15.840 --> 06:19.200 Once you copy this and add this, we'll come back here in a second. 06:19.200 --> 06:20.460 First, let's do this match. 06:20.610 --> 06:21.870 Let's go ahead and add this one. 06:21.870 --> 06:23.070 This will instantaneous. 06:23.190 --> 06:24.900 This won't be taking much of the time. 06:24.900 --> 06:25.590 There we go. 06:25.890 --> 06:27.450 And now we'll go back. 06:27.660 --> 06:30.660 Now it will ask you to add all the files, make a commit. 06:30.660 --> 06:31.830 We have already done that. 06:31.830 --> 06:35.550 And now all we've got to do is say Git push Heroku master. 06:35.760 --> 06:37.530 Now the GitHub master is different. 06:37.530 --> 06:38.940 The Heroku master is different. 06:38.940 --> 06:42.030 So I don't want to keep a track of my files two times. 06:42.030 --> 06:43.350 I just want to do it once. 06:43.350 --> 06:47.760 So I'm going to go ahead and add it, copy it up here and we'll push it directly to Heroku. 06:47.850 --> 06:49.710 Let's go ahead and push it on to Heroku. 06:49.740 --> 06:51.390 This shouldn't take much of the time. 06:51.480 --> 06:53.040 And there we go. 06:53.040 --> 06:54.660 It says, Building the resources. 06:54.660 --> 06:55.980 Let's expand this fully. 06:56.610 --> 07:02.190 And you can see all the logs here as well as you can see all the logs into the GitHub, not GitHub of 07:02.250 --> 07:03.570 the Heroku as well. 07:03.570 --> 07:04.830 Let's go ahead and do that. 07:04.830 --> 07:10.290 A couple of things that I wanted to mention or bring your attention to is pruning the dev dependencies, 07:10.290 --> 07:14.520 so it is removing all the packages which are associated to the dev dependencies. 07:14.520 --> 07:18.140 And now it's saying, hey, everything looks good, verifying, deploying, it's done. 07:18.150 --> 07:19.470 Okay, cool, it looks great. 07:19.470 --> 07:22.890 Now let's see into the overview that how this thing is looking up. 07:22.890 --> 07:25.350 It says, Hey, build, succeed. 07:25.350 --> 07:27.390 Now you can go ahead and check your application. 07:27.390 --> 07:31.140 Let's go ahead and click on open application and see what is happening. 07:31.470 --> 07:32.700 Application error. 07:33.180 --> 07:33.630 Okay. 07:33.660 --> 07:36.540 A couple of bugs as I as I expected. 07:36.720 --> 07:39.540 So this is all what we wanted to do in this video. 07:39.540 --> 07:41.520 Yes, I know this is a cliff hanger. 07:41.880 --> 07:47.250 We haven't successfully deployed our application, but at least it has been released to the application 07:47.250 --> 07:48.600 or the production itself. 07:48.690 --> 07:54.180 In the next video, we're going to work on fixing the bugs and issues and we'll talk more about that. 07:54.180 --> 07:56.160 And let's go ahead and catch up in the next video.