WEBVTT 00:03.880 --> 00:04.330 Hey there. 00:04.330 --> 00:05.350 Everyone had their share. 00:05.350 --> 00:10.660 And in the last video we saw a cliffhanger that our application got deployed to Heroku, but we were 00:10.660 --> 00:11.890 not able to access it. 00:11.890 --> 00:15.270 And what's the good of an application if you are not able to access it? 00:15.280 --> 00:16.390 Everything was okay. 00:16.390 --> 00:20.050 The deployed even said, Hey, it's all good, but we were not able to access it. 00:20.050 --> 00:25.570 So let's go ahead and analyze what all going on wrong and where are the possible errors that can happen. 00:25.720 --> 00:30.430 The first thing that I would like to bring your attention is actually inside the settings. 00:30.430 --> 00:34.390 Now, as soon as you click on the settings, you're going to see all these locations and everything. 00:34.390 --> 00:37.120 But the most important thing that you are going to see is revealed. 00:37.120 --> 00:38.650 The config vars. 00:38.650 --> 00:42.460 This is the most important thing that you always should look up for. 00:42.490 --> 00:46.510 If I reveal this right now, there is nothing you can add more key value pairs. 00:46.660 --> 00:53.620 If you remember, I told you that as soon as we go for this index or geez, there is something at the 00:53.620 --> 00:57.700 top which says port 4000 or process dot EMV dot port. 00:57.820 --> 01:01.210 Now let's go into the documentation section of the Heroku. 01:01.210 --> 01:03.490 So I hope there is a you are all up here. 01:03.610 --> 01:04.330 Yep. 01:04.630 --> 01:09.790 Let's open this up and we want to look for this config vars also known as config variables. 01:09.790 --> 01:13.630 And I'm going to go up here and I'm going to search for config. 01:14.550 --> 01:16.950 Wars and. 01:18.650 --> 01:19.220 There we go. 01:19.220 --> 01:20.960 Configuration and config vars. 01:21.290 --> 01:21.590 Okay. 01:21.590 --> 01:27.170 Now what happened here is if you read a little bit on the documentation, it says that, hey, GitHub 01:27.170 --> 01:29.450 actually uses a whole lot of settings. 01:29.450 --> 01:34.730 If you have any variables that you can mention these into config vars for example, github username, 01:34.880 --> 01:38.240 there is something else and especially this one will give you more idea. 01:38.690 --> 01:44.300 Most of the in our application we install the package known as environment variables or process. 01:44.300 --> 01:50.240 We'll do that in the next section, but it has a lot of variables like ports database URL and we write 01:50.240 --> 01:55.340 them in the similar syntax which we saw up here, processed or DMV, then either the port name or database 01:55.340 --> 01:55.760 URL. 01:55.760 --> 02:00.890 So you need to mention this variable into the exact same place, which is key value. 02:00.900 --> 02:06.980 So database as available and the value up here and these are secret files which are not exposed to your 02:06.980 --> 02:11.210 application but into a very controlled environment and your application can access that only. 02:11.450 --> 02:17.090 But the problem here is that Heroku doesn't allow you if you read more, Heroku doesn't allow you to 02:17.090 --> 02:20.750 actually set the port because it's actually can be a security risk. 02:20.750 --> 02:27.260 And we are saying that, hey, use port 4000 and if you don't find the port 4000, then use this variable. 02:27.260 --> 02:29.750 So this order is actually reversed. 02:29.780 --> 02:33.710 This should be something like this that you don't want to go like this. 02:33.710 --> 02:40.790 You should be saying that process, invoice port or 4000 means that either use the port which is defined 02:40.790 --> 02:42.440 in the process dot in the file. 02:42.440 --> 02:47.330 In my case I usually don't define it process in the process, certainly because any of the application, 02:47.330 --> 02:51.860 whether it's digital ocean or Heroku, they don't allow you to select the port, they govern their own 02:51.860 --> 02:57.080 ports, or if you don't find them, then use 4000 or whatever the port you have mentioned. 02:57.110 --> 02:59.120 Now this is one of the problematic situations. 02:59.120 --> 03:03.020 So let's go ahead, fix this up and try to give it a push to the production. 03:03.020 --> 03:07.070 So we're going to simply say, hey, we have done this one, so we're going to simply say get, ADD, 03:07.070 --> 03:08.810 and all the changes are being tracked. 03:08.810 --> 03:16.280 We're going to simply say, Hey, I want to commit this change, so let's go ahead and write this port 03:16.310 --> 03:22.580 issue fixed and this is kind of a bug fix one. 03:22.580 --> 03:23.900 Yeah, that's what it is. 03:24.140 --> 03:26.210 Let's go ahead and do this once this is all done. 03:26.210 --> 03:27.920 So our changes are being made. 03:27.920 --> 03:31.700 Now I want to make this push to Heroku Master Branch. 03:31.880 --> 03:33.560 Okay, let's go ahead and do this. 03:33.560 --> 03:37.040 As soon as you're going to do this again, we can analyze all of the things. 03:37.040 --> 03:38.840 All the logs are going to be there. 03:38.900 --> 03:43.730 It will try to bring up our application and install and everything again. 03:44.510 --> 03:50.750 Okay, let's go ahead and see how this is looking up now and let's see if the deployment is it's the 03:50.750 --> 03:51.650 build in progress. 03:51.650 --> 03:56.210 But since the application is like extremely small, it shouldn't take much of the time. 03:56.270 --> 03:58.550 Let me see up the logs and there we go. 03:58.550 --> 04:01.130 It says, deployed successful one more time. 04:01.130 --> 04:02.330 Let's go ahead and see that. 04:02.330 --> 04:03.710 It says, hey, I've deployed it. 04:03.710 --> 04:06.290 Let's see that how the application is looking up. 04:06.320 --> 04:09.320 If I open this up, it says again an application error. 04:09.710 --> 04:11.600 That was quite a valid request. 04:11.600 --> 04:18.050 But why this is giving me all these errors now you can go ahead and look for the activity and can see 04:18.050 --> 04:19.850 all the logs up here as well. 04:19.970 --> 04:23.750 And obviously we are seeing the logs into not here. 04:23.750 --> 04:26.540 There is some place where you can find deploy logs. 04:26.660 --> 04:28.280 Let me see that. 04:28.310 --> 04:30.740 Not here, probably in the matrix. 04:30.740 --> 04:31.100 Yeah. 04:31.100 --> 04:32.870 Sometimes I have to look for them. 04:32.870 --> 04:35.300 I might kind of find them. 04:35.300 --> 04:36.380 Okay, so this is all done. 04:36.380 --> 04:37.130 This is all good. 04:37.130 --> 04:37.640 But why? 04:37.640 --> 04:39.710 The application is still going wrong. 04:39.710 --> 04:40.850 It should be up and running. 04:40.850 --> 04:42.320 We have no mistakes now. 04:42.620 --> 04:44.390 Yes, we have a mistake now. 04:44.390 --> 04:50.540 If you remember in the package or JSON, we call that the node one is a dev dependency and we saw that 04:50.540 --> 04:53.480 the dev dependencies are being pruned or being deleted. 04:53.480 --> 04:58.340 And you are trying to run your start script by saying Node one index, where is it going to find the 04:58.340 --> 04:58.940 Node one? 04:58.940 --> 05:00.350 No, it's not going to find it. 05:00.350 --> 05:05.690 So in this case, I have to say, hey, use Node to run this index or JS file. 05:06.050 --> 05:09.020 Now the package JSON files are being all updated. 05:09.500 --> 05:14.450 There are definitely more scripts that you can add and by default all of these application runs NPM 05:14.450 --> 05:14.840 Start. 05:14.840 --> 05:19.790 There should be a start script in your application, but there's definitely a lot more to discuss. 05:19.790 --> 05:21.740 But right now let's just keep it this much. 05:21.800 --> 05:27.230 So let's just say that git add everything and I want to commit it again. 05:27.230 --> 05:37.640 So I'm going to use git commit and again providing a message that's saying kind of a node on change 05:37.640 --> 05:44.810 to node and we're going to call this one as bug fix to yeah again track your bugs. 05:44.810 --> 05:50.480 And once this is all being done, all being committed now let's go ahead and push this to Heroku Master 05:50.480 --> 05:51.530 one more time. 05:51.830 --> 05:57.560 And as you expected, this is going to be this is how the big bugs are being fixed for the very first 05:57.560 --> 05:59.210 time when you put things into production. 05:59.210 --> 06:02.270 And there is a whole lot of variables that you can see up here. 06:02.270 --> 06:04.550 Everything plays a really important role. 06:04.550 --> 06:09.470 And that's why usually the the operation roles are given to different people who are quite specialized 06:09.470 --> 06:10.040 in that. 06:10.310 --> 06:17.360 Okay, this shouldn't be taking that much of the time because we have cached being done and should be 06:17.360 --> 06:17.930 any time up. 06:18.010 --> 06:19.450 Let's go ahead and see them up. 06:19.450 --> 06:23.590 And now let's go back to the overview and see this is deployed. 06:24.220 --> 06:26.830 That was fast and this was deployed. 06:26.890 --> 06:28.780 And now let's go ahead and see this. 06:28.780 --> 06:33.520 I'm going to go ahead and click on Open Application and now I can see hello from LC here. 06:34.120 --> 06:39.730 Yes, I know a couple of bugs, but they were deliberately introduced here to make sure that you understand 06:39.730 --> 06:42.750 that putting things into production is not drastically different. 06:42.760 --> 06:47.260 There are some obvious issues that might happen and let's go ahead and now try our application. 06:47.260 --> 06:54.220 So let's go ahead and first go to my favorite Instagram and I can see it says, Hey, Instagram, I 06:54.220 --> 06:55.930 cannot get Instagram. 06:55.930 --> 06:57.250 So what is happening? 06:57.250 --> 07:00.320 Why this is going on that you are not able to see this? 07:00.340 --> 07:02.590 Now let's go ahead and see come back up here. 07:02.590 --> 07:05.250 That why your application is just giving you this? 07:05.260 --> 07:06.640 Let me go back up here. 07:07.030 --> 07:12.700 Notice here, this is the URL and this is a very common mistake I've seen in the first version of this 07:12.700 --> 07:17.440 course, which I taught personally to a lot of people, they get excited and they forget what route 07:17.440 --> 07:18.460 they have to visit it. 07:18.460 --> 07:20.350 That's why make sure you keep an eye on that. 07:20.470 --> 07:24.400 So let's remove this Instagram and go up here. 07:24.400 --> 07:27.550 And I promise you, this time this is going to work. 07:27.670 --> 07:29.980 All these bugs are necessary for you to see. 07:29.980 --> 07:34.930 But this plays an important role in understanding that how development can be tricky sometimes. 07:35.080 --> 07:41.410 And then after that we will be going for LinkedIn and we get all the followers and everything on the 07:41.410 --> 07:41.950 LinkedIn. 07:41.950 --> 07:43.660 And what about my testing? 07:43.660 --> 07:47.290 If I go ahead and do this, I get Natasha's params back. 07:47.620 --> 07:50.200 What about if I just say learn code online? 07:50.200 --> 07:52.450 Yes, I get that back a number. 07:52.570 --> 07:55.540 Yes, that will be converted into string, but still I'll get that. 07:55.540 --> 07:57.580 So that is the application. 07:57.580 --> 08:00.580 And I told you this is how the application are being deployed. 08:00.580 --> 08:06.430 One more thing, just as a side note in the settings, if you'll go a little bit at the bottom place, 08:06.430 --> 08:09.790 you can actually use your custom domains. 08:09.790 --> 08:14.520 You can just add your domain and something like API, dot or website, name or something. 08:14.530 --> 08:15.910 This is all being done up here. 08:16.240 --> 08:22.330 Okay, I told you, this is not really that much difficult to push your application to production and 08:22.330 --> 08:23.290 congratulation. 08:23.290 --> 08:28.330 This is the first course where in the very first section you have pushed an application to the production. 08:28.360 --> 08:31.540 It is not complex, but it is still an achievement. 08:31.570 --> 08:36.670 If you enjoyed this click after what you have pushed to the production, let me know on the Instagram, 08:36.670 --> 08:42.820 share a story and I would definitely love to see what you have first to the very first thing in production.