1 00:00:00,330 --> 00:00:07,590 All right, and once you have installed Heroku Salai, now it's finally deploy our application, and 2 00:00:07,590 --> 00:00:12,540 in my case, what I'm going to do, I'm going to look for the entire folder. 3 00:00:12,930 --> 00:00:17,120 So this is the entire course and for the jobs API. 4 00:00:17,460 --> 00:00:19,730 And after that, I want to get the final one. 5 00:00:20,190 --> 00:00:24,670 And essentially I will make the copy just so I can set it up on desktop. 6 00:00:24,690 --> 00:00:28,070 Now, of course, in your case, that is going to be your current application. 7 00:00:28,080 --> 00:00:37,380 However, I do strongly suggest following all the steps and deploying the project as a separate project. 8 00:00:37,590 --> 00:00:38,760 And here's what I mean. 9 00:00:39,090 --> 00:00:43,350 So I'll make the copy of the final one here and I'll rename it. 10 00:00:43,590 --> 00:00:48,570 But before I do that, I'll just drag and drop and place it on a desktop. 11 00:00:48,840 --> 00:00:53,500 So here it is on desktop and then I'll call this Jobs API or whatever. 12 00:00:53,550 --> 00:00:58,770 Again, though, his name is really up to you and I suggest doing the same thing. 13 00:00:59,150 --> 00:01:07,530 Essentially, if you have been working on a star, just make the copy and set it up on desktop or somewhere 14 00:01:07,530 --> 00:01:10,070 separately because it's just going to be easier. 15 00:01:10,410 --> 00:01:16,830 Otherwise, if you're working in the entire project, in my opinion, it's going to be hard to navigate 16 00:01:16,830 --> 00:01:18,930 around and set everything up. 17 00:01:19,230 --> 00:01:21,370 And you also might run into some bugs. 18 00:01:21,840 --> 00:01:23,430 So let me open up right now. 19 00:01:23,430 --> 00:01:30,660 My texts that are on like this one, a little bit smaller than I'll drag and drop my application and 20 00:01:30,660 --> 00:01:32,730 effectively will follow these steps. 21 00:01:33,160 --> 00:01:37,620 So let me go back to Hiroko will go through documentation here. 22 00:01:38,370 --> 00:01:41,100 And we're looking for an hour jayesh. 23 00:01:41,490 --> 00:01:46,690 And then more specifically, we're looking for deploying Norges, just apps on Rokko. 24 00:01:47,250 --> 00:01:54,990 So these are all the steps we're going to take, plus some additional ones that I find useful. 25 00:01:55,440 --> 00:01:58,350 And first one I want to do is go back to my project. 26 00:01:58,590 --> 00:02:05,690 And I always, always, always start by removing the existing Grippo just in case there is one. 27 00:02:06,090 --> 00:02:14,670 And as far as the Maglica man is R.M. of Hyphen R.F. and then get now if you're using windows, if you 28 00:02:14,670 --> 00:02:20,910 take a look at my Twitter, if you look around, you'll probably find one of my tweets where I share 29 00:02:20,910 --> 00:02:24,720 both the command for Windows as well as the Mac. 30 00:02:25,020 --> 00:02:26,480 Again, this is very, very important. 31 00:02:26,490 --> 00:02:33,930 You always want to start from scratch and that we want to check whether we have that process that can 32 00:02:33,930 --> 00:02:37,720 report variable, by the way, by the end of the poor. 33 00:02:37,980 --> 00:02:42,030 I'll show you where we can actually see the value that is on Roku. 34 00:02:42,280 --> 00:02:43,440 But this is a must. 35 00:02:43,470 --> 00:02:48,180 Then we can hard code and it nicely works in a local setup. 36 00:02:48,480 --> 00:02:53,760 But when you deploy, you always want to go with process that envy and then the port variable. 37 00:02:54,000 --> 00:03:00,990 And then Hiroku picks that port variable and of course spins up our application on that port. 38 00:03:01,320 --> 00:03:03,540 Then we want to set up a simple route. 39 00:03:03,810 --> 00:03:06,570 So at the moment we have the off and jobs. 40 00:03:06,750 --> 00:03:12,270 But what I also like to do is just to set up a simple dummy garrotte. 41 00:03:12,420 --> 00:03:18,000 So I know that everything is fine and I have deployed my application and in this case I'm just going 42 00:03:18,000 --> 00:03:19,960 to go have that get Vanport. 43 00:03:20,400 --> 00:03:26,660 Of course, that's my index and I'm looking for work and rest and line here. 44 00:03:26,670 --> 00:03:34,830 Let's just send a silly little response where we say Vares that and say Send Jobs API. 45 00:03:34,920 --> 00:03:35,400 That's it. 46 00:03:35,670 --> 00:03:37,080 That's all we have to do. 47 00:03:37,620 --> 00:03:40,580 And then we will navigate the packages. 48 00:03:40,890 --> 00:03:43,730 And this is where we'll take a look at the steps. 49 00:03:43,980 --> 00:03:45,270 So let's keep on scrolling. 50 00:03:45,480 --> 00:03:48,750 And they suggest setting the node version. 51 00:03:49,050 --> 00:03:55,560 And in my case, if that is node 14, because remember, initially when we started the course, I installed 52 00:03:55,560 --> 00:03:59,820 not 14, but if you installed a different version, of course, set that one up. 53 00:04:00,120 --> 00:04:07,800 And just to jog your memory, if you want to check your node version, just go to node that and we and 54 00:04:07,800 --> 00:04:11,430 again, Miko's that is 14 dot 15. 55 00:04:11,430 --> 00:04:14,010 But essentially we'll just go with 14. 56 00:04:14,400 --> 00:04:21,990 So in the packages on keep scrolling, then add a comma and then let's say engines and line and said 57 00:04:22,260 --> 00:04:27,420 let's go with Node, pretty much set up the same code so we not speed this up. 58 00:04:27,420 --> 00:04:30,480 I'll just copy and paste and I'm in good shape. 59 00:04:30,790 --> 00:04:37,830 Then let's scroll up and where we have Starcom and we're not going to go with Node on ABC's. 60 00:04:38,160 --> 00:04:45,510 This is of course only in development effectively will go with node and abcess, then save it. 61 00:04:45,790 --> 00:04:48,650 So that should do it for package JSON. 62 00:04:48,960 --> 00:04:56,270 And then lastly, as far as the initial setup, we want to set up a proc file and then add some values 63 00:04:56,330 --> 00:04:59,700 that now if you want to find more info about the. 64 00:04:59,930 --> 00:05:03,920 RockPile just keeps crawling here, blah, blah, blah. 65 00:05:04,420 --> 00:05:09,750 Um, I think I already went past it, so it may go up not just here specifying a start. 66 00:05:10,360 --> 00:05:14,080 And if you click on this profile, you can find more info. 67 00:05:14,800 --> 00:05:17,780 But effectively, what we want to do is create new file. 68 00:05:18,070 --> 00:05:20,390 Now, we don't add extension here. 69 00:05:20,410 --> 00:05:29,920 We just say Perak file Maxo and then inside of it will go with web and or set node and abcess. 70 00:05:30,190 --> 00:05:37,260 So pretty much this value is going to be the same as our Stockmann and that should it for initial setup. 71 00:05:37,510 --> 00:05:40,630 So now of course, we need to start working with Git as well. 72 00:05:40,990 --> 00:05:43,150 And first we'll start by getting in it. 73 00:05:43,390 --> 00:05:46,030 So we'll initialize empty git repo. 74 00:05:46,390 --> 00:05:49,210 Then we want to add everything to the staging area. 75 00:05:49,420 --> 00:05:53,590 So get add and then not and then of course some kind of message. 76 00:05:53,980 --> 00:05:57,830 So essentially in this case I'm going to go with initial comment. 77 00:05:58,090 --> 00:05:59,010 OK, awesome. 78 00:05:59,290 --> 00:06:01,690 And then this is where the Hiroku comes in. 79 00:06:02,020 --> 00:06:07,720 We want to go with Heroku and, you know, just clear everything so you can clearly see what's happening. 80 00:06:08,050 --> 00:06:10,380 So we're going to go with Heroku and login. 81 00:06:10,780 --> 00:06:13,570 So if you have the KELLYE, you'll be able to login. 82 00:06:13,930 --> 00:06:16,960 Just press any key like this just over here. 83 00:06:17,380 --> 00:06:20,170 And then once you do that, they'll ask you to login. 84 00:06:20,470 --> 00:06:28,090 OK, then of course, we want to create a new HIROKU application and we do that in the following way. 85 00:06:28,120 --> 00:06:31,300 We go Heroku and again, clear everything. 86 00:06:31,630 --> 00:06:38,710 Let's go Heroku, then create and then we need to come up with a name and keep in mind that you kind 87 00:06:38,710 --> 00:06:40,930 of start with a number. 88 00:06:41,170 --> 00:06:48,820 So if you remember in our course, Project four zero zero six zero five or whatever, in this case I'm 89 00:06:48,820 --> 00:06:54,100 going to have to go with Jobs API and then this probably will be taken. 90 00:06:54,580 --> 00:06:59,170 I double check notice here is already taken, so we need to start from scratch. 91 00:06:59,170 --> 00:07:07,630 So let's say Hiroku create and then I'm going to go jobs have an API and then this is zero six again. 92 00:07:07,780 --> 00:07:10,360 You cannot go zero six and then jobs API. 93 00:07:10,630 --> 00:07:14,190 It's not going to work because you cannot start with a number. 94 00:07:14,290 --> 00:07:16,420 So let's set it up now. 95 00:07:16,420 --> 00:07:17,980 I'm creating that new application. 96 00:07:17,980 --> 00:07:18,430 Awesome. 97 00:07:18,760 --> 00:07:24,420 And as I said, if you just run Heroku create it will create a name for you. 98 00:07:24,790 --> 00:07:27,880 So if that's what you prefer, I mean, go for it. 99 00:07:28,360 --> 00:07:35,170 And then I just want to quickly check whether get remote points to the actual repo. 100 00:07:35,440 --> 00:07:42,910 So let's say here, get the remote and then I can v and if you see these values then of course we are 101 00:07:43,060 --> 00:07:44,830 moving in the right direction. 102 00:07:45,310 --> 00:07:51,430 And before we can push this up, we need to of course, deal with our variables. 103 00:07:51,580 --> 00:07:52,030 Correct. 104 00:07:52,330 --> 00:07:57,850 Because if you take a look at the get ignore, of course these are ignored and that's how they should 105 00:07:57,850 --> 00:07:58,030 be. 106 00:07:58,480 --> 00:08:03,130 And effectively, we have two ways we can do it using command line. 107 00:08:03,400 --> 00:08:06,640 But I'll just add one value using the command line. 108 00:08:06,880 --> 00:08:12,520 I'll just go with this on Lifetime one, and then I'll show you another way how we can do that in the 109 00:08:12,520 --> 00:08:19,810 dashboard on agoI, because I find going to be easier as far as setting up the in variables. 110 00:08:19,960 --> 00:08:25,690 Now, with that said, of course, that means that initially when we push our application to the GitHub, 111 00:08:26,050 --> 00:08:30,160 it's not going to work because our application is looking for all the variables. 112 00:08:30,160 --> 00:08:36,549 But I'm just going to show you one of the lifetime one, because if you'll try to do the secret essentially 113 00:08:36,549 --> 00:08:41,250 in the command line, it's just going to be spitting back errors as far as the secret value. 114 00:08:41,409 --> 00:08:47,020 Now, of course, you can always switch back to string the, I don't know, secret JWT or whatever. 115 00:08:47,380 --> 00:08:50,860 But since I want to keep this value, I'll show you both setups. 116 00:08:51,280 --> 00:08:57,250 And after I've been rambling and rambling for about half an hour about it, let's go with Horrorcore 117 00:08:57,580 --> 00:08:59,230 version config. 118 00:09:00,090 --> 00:09:06,630 Config, and then we want to go with a column and set and essentially this is where we want to set up 119 00:09:06,810 --> 00:09:08,280 those three variables. 120 00:09:08,280 --> 00:09:16,890 And yes, for all the variables you have, you have to type this Heroku config and as up by typing, 121 00:09:16,890 --> 00:09:17,950 as always, is awesome. 122 00:09:17,970 --> 00:09:22,980 So let's go with config and then set more properly and then copy and paste. 123 00:09:22,990 --> 00:09:25,290 And by the way, then copy this one either. 124 00:09:25,740 --> 00:09:26,550 My apologies. 125 00:09:26,560 --> 00:09:27,750 I'm literally on fire. 126 00:09:28,080 --> 00:09:30,890 So let's go back here and copy and paste. 127 00:09:31,110 --> 00:09:35,040 And now of course we're setting that config variable. 128 00:09:35,220 --> 00:09:35,660 Correct. 129 00:09:35,850 --> 00:09:40,010 So now we have one the JWT lifetime and 30 days. 130 00:09:40,290 --> 00:09:44,550 So without setting up these ones, we'll push this up to the Hiroku. 131 00:09:44,700 --> 00:09:49,110 Of course, our application won't work, but then I'll show you another way how we can set them up. 132 00:09:49,140 --> 00:09:52,350 So now let's go here and in the command line. 133 00:09:52,350 --> 00:09:57,690 Let's clean everything and let's just type get push and Heroku. 134 00:09:57,960 --> 00:10:03,930 And then if you check the docs, as they say and by the way, this is the login screen and close it. 135 00:10:04,230 --> 00:10:09,650 But if you check the docs, they say that you should go with Heroku and mine. 136 00:10:10,200 --> 00:10:15,960 Now, in my case, if I type Heroku and mine, I'm basically going to be getting this error. 137 00:10:16,290 --> 00:10:24,360 If I go with get push Roku and Master when everything works as expected. 138 00:10:24,710 --> 00:10:30,720 Now our application is being pushed to the GitHub and from there, of course, the Hiroku picks it up 139 00:10:30,960 --> 00:10:32,700 and now it starts to deploy. 140 00:10:32,700 --> 00:10:38,850 But we need to go back to our dashboard arguing that and here we can refresh. 141 00:10:39,120 --> 00:10:40,620 We should see the application. 142 00:10:40,620 --> 00:10:42,390 But again, it's not going to work. 143 00:10:42,690 --> 00:10:43,740 If you go to application. 144 00:10:43,740 --> 00:10:48,390 If you open up, of course you have some kind of dummy screen or whatever. 145 00:10:48,690 --> 00:10:54,390 But I can tell you right away that our application won't work because, of course, those entry variables 146 00:10:54,390 --> 00:10:55,170 are not there. 147 00:10:55,620 --> 00:11:03,000 Now, in order to set them up in Angourie, we'll go here and we're looking for settings and we'll go 148 00:11:03,000 --> 00:11:07,250 to reveal config watch and notice we have the left hand one. 149 00:11:07,260 --> 00:11:07,620 Correct. 150 00:11:07,920 --> 00:11:12,410 And now simply what we want to do is add the rest of the values as well. 151 00:11:12,810 --> 00:11:15,720 So essentially here I'm looking for my Mongul. 152 00:11:15,720 --> 00:11:16,260 You are I? 153 00:11:16,590 --> 00:11:17,880 That's going to be my first one. 154 00:11:18,180 --> 00:11:21,630 Copy and paste and the same goes over here. 155 00:11:22,200 --> 00:11:25,950 So I want to take the value, of course, and copy and paste. 156 00:11:25,950 --> 00:11:26,940 Let's add this one. 157 00:11:27,270 --> 00:11:30,300 And the same will do with our speaker one. 158 00:11:30,690 --> 00:11:35,760 And for some interesting reason in the console, it spits back errors, but in a good way. 159 00:11:35,760 --> 00:11:39,620 When you add that second one, then everything works like features. 160 00:11:40,020 --> 00:11:41,550 So let me go back here. 161 00:11:41,940 --> 00:11:45,480 Let me grab the value, copy and paste. 162 00:11:45,810 --> 00:11:47,940 And now, of course, we want to add that var. 163 00:11:48,830 --> 00:11:56,180 And then in order to spin everything up, we just need to go hear more and we need to go with restart 164 00:11:56,180 --> 00:11:56,690 all. 165 00:11:57,500 --> 00:12:04,280 So at this point, I'll freeze the screen, I'll change back to my actual password, and then I'll restart 166 00:12:04,280 --> 00:12:04,820 Dayna's. 167 00:12:05,060 --> 00:12:07,120 And once we restart all the diners. 168 00:12:07,250 --> 00:12:08,710 Yep, that's what we wanna do. 169 00:12:09,140 --> 00:12:18,580 And if we take a look at the logs, you'll see how initially our application was on port forty three 170 00:12:18,770 --> 00:12:19,990 seven nine 10. 171 00:12:20,480 --> 00:12:23,360 So that was the port that the Heroku picked. 172 00:12:23,630 --> 00:12:27,280 Then we exited with a stance of one forty three. 173 00:12:27,590 --> 00:12:31,910 So basically we have the issue with our process, not INRIX. 174 00:12:32,210 --> 00:12:37,280 And now of course we're back to forty six and a ninety seven. 175 00:12:37,430 --> 00:12:38,570 So that's the port. 176 00:12:38,720 --> 00:12:46,400 If we open up the application notice I can clearly see my jobs API and of course I was just showcasing 177 00:12:46,400 --> 00:12:47,900 the port variable. 178 00:12:48,170 --> 00:12:52,280 So you get the clear idea of how everything is set up. 179 00:12:52,550 --> 00:13:00,710 Well that's why we go here with this port because when Hiroku picks the port where our application is 180 00:13:00,710 --> 00:13:07,880 going to be located and once I have my application up and running, we simply want to grab the URL and 181 00:13:07,880 --> 00:13:09,380 we want to start out now. 182 00:13:09,380 --> 00:13:14,960 I'm not going to start out with all the routes, but I definitely want to create or log in the user 183 00:13:15,200 --> 00:13:17,990 and see whether I can see all the jobs. 184 00:13:18,350 --> 00:13:24,590 So in my case, I'm going to go to the postman and since I don't want to mess up these routes, I'll 185 00:13:24,590 --> 00:13:28,580 actually create first a global variable because I'm here. 186 00:13:28,580 --> 00:13:28,910 Of course. 187 00:13:28,910 --> 00:13:31,080 Yes, I have the URL all. 188 00:13:31,550 --> 00:13:32,870 What is the actual URL? 189 00:13:33,230 --> 00:13:35,150 Well, it is localhost three thousand. 190 00:13:35,480 --> 00:13:35,890 Correct. 191 00:13:36,200 --> 00:13:37,320 Now what are we going to do. 192 00:13:37,360 --> 00:13:44,270 We want to go at it then let's right here Prad and then underscore the URL and then let's just copy 193 00:13:44,270 --> 00:13:45,010 and paste the value. 194 00:13:45,330 --> 00:13:48,340 This is going to be the URL for your application. 195 00:13:48,560 --> 00:13:54,770 Now we're still looking for API and then version one, so that's not going to change. 196 00:13:54,980 --> 00:14:02,480 Let's save it here and then I can close my globalise and like I said, I'll create a new route and this 197 00:14:02,480 --> 00:14:04,370 is going to be a post throughout. 198 00:14:04,760 --> 00:14:12,710 And since I have that one Susan user, I'll just try to log in and then see whether I can see all the 199 00:14:12,710 --> 00:14:14,960 jobs that Susan has. 200 00:14:15,230 --> 00:14:22,760 And in this case, we're looking for Parad and of course, the URL on some one we're looking for off 201 00:14:23,150 --> 00:14:25,130 and on for its login. 202 00:14:25,550 --> 00:14:27,500 So that is going to be the URL. 203 00:14:28,010 --> 00:14:35,030 Now, as far as the credentials, well, where we have the login user first, I want to grab the body 204 00:14:35,030 --> 00:14:37,670 here, so let's take all of this. 205 00:14:38,120 --> 00:14:42,470 And again, we're just doing that so we don't have to type everything from scratch. 206 00:14:42,800 --> 00:14:44,360 So JSON copy and paste. 207 00:14:44,360 --> 00:14:47,630 OK, Susan, Gmail password and all that. 208 00:14:47,630 --> 00:14:53,000 And then remember, since I want to set that token automatically, what do we need to do? 209 00:14:53,330 --> 00:14:55,430 Well, we need to look for tests. 210 00:14:55,430 --> 00:14:55,880 Correct. 211 00:14:56,360 --> 00:15:03,770 And just take these two lines of code and then back in my production, one copy and paste and now I 212 00:15:03,770 --> 00:15:10,790 want to send and if everything is correct, which of course it is, I'm getting back my token and I'm 213 00:15:10,790 --> 00:15:14,240 still setting it up in the global's just just awesome. 214 00:15:14,720 --> 00:15:17,420 And now, of course, we just want to create another route. 215 00:15:17,780 --> 00:15:20,960 Now, this will get all the jobs that Susan has. 216 00:15:21,320 --> 00:15:23,870 So let's go and go and get her out. 217 00:15:24,320 --> 00:15:30,260 And we're looking for, again, the production real value jobs. 218 00:15:30,530 --> 00:15:32,180 And this is going to be the GETRUDE. 219 00:15:32,510 --> 00:15:33,410 That's correct. 220 00:15:33,770 --> 00:15:34,850 And learning here. 221 00:15:35,240 --> 00:15:37,670 I mean, let's go with authorization. 222 00:15:37,670 --> 00:15:41,570 Of course, we're looking for better token and access token. 223 00:15:41,750 --> 00:15:46,280 And if everything is correct, I should see that Susan. 224 00:15:46,850 --> 00:15:50,450 Steve Jobs, one for Netflix and one for Google. 225 00:15:50,870 --> 00:15:51,950 And wonderful. 226 00:15:52,130 --> 00:15:58,700 We have successfully created our application and we have deployed it on Hiroku as well.