1 00:00:00,990 --> 00:00:05,520 The lesson we have to do is make sure that all these different environment variables are defined on 2 00:00:05,520 --> 00:00:06,800 our Heroku server. 3 00:00:07,010 --> 00:00:09,120 Setting all these things up is pretty straightforward. 4 00:00:09,300 --> 00:00:12,590 You just have to know where to look on her has control interface. 5 00:00:12,630 --> 00:00:15,030 So let's get to it inside my browser. 6 00:00:15,060 --> 00:00:21,410 I'm going to open up a new tab and navigate to Heroku dot com. 7 00:00:22,110 --> 00:00:28,390 And it looks like I'm already signed in some going straight to the dashboard and on here I'm going to 8 00:00:28,390 --> 00:00:32,320 find the application that we have created for our app. 9 00:00:32,350 --> 00:00:34,810 So on this list I'm looking for agile bayou. 10 00:00:34,840 --> 00:00:36,200 So this is mine right here. 11 00:00:36,210 --> 00:00:39,460 Remember yours is going to be named differently than mine. 12 00:00:39,460 --> 00:00:44,080 So you might see something you know whatever you pulled up previously it will be this address up here 13 00:00:44,230 --> 00:00:46,920 yours will be different from mine. 14 00:00:47,130 --> 00:00:52,500 It's all fine and I'll buy you a click into it and then just set up all these environment variables. 15 00:00:52,540 --> 00:00:55,090 I'm going to find the settings tab right in the middle. 16 00:00:55,090 --> 00:01:01,770 So your settings right here click Settings and then right here is config variables. 17 00:01:01,840 --> 00:01:07,930 So this is what we want to change or click on reveal configure variables and then this gives us an interface 18 00:01:07,990 --> 00:01:12,210 to set up all the different variables that we want to add into our application. 19 00:01:12,220 --> 00:01:17,620 Now if you want to by the way you can click on this article right here in this link and you can read 20 00:01:17,680 --> 00:01:21,190 a little bit more about environment variables inside of her Roku. 21 00:01:21,190 --> 00:01:22,990 This may or may not. 22 00:01:23,310 --> 00:01:23,570 OK. 23 00:01:23,590 --> 00:01:34,120 So right here I wanted to show you the fact that Roku automatically sets that node EMV very well somewhere 24 00:01:34,120 --> 00:01:40,810 in the Heroku documentation you can find it again over and the key is not G-S the node underscore EMV 25 00:01:41,350 --> 00:01:43,180 Heroku specifically does this. 26 00:01:43,180 --> 00:01:48,440 I was hoping to just find something that said that in the in the documents but whatever. 27 00:01:48,510 --> 00:01:48,780 OK. 28 00:01:48,820 --> 00:01:54,030 So essentially what we have to do here is one by one we're going to add in the key and then our respective 29 00:01:54,040 --> 00:01:54,440 value. 30 00:01:54,550 --> 00:01:56,230 So let's do it. 31 00:01:56,230 --> 00:02:02,360 We do want to make sure that we use exactly the correct key song and to find my product J.S. file. 32 00:02:02,620 --> 00:02:06,870 And I will copy over each of these key names one by one. 33 00:02:06,880 --> 00:02:10,020 So first I'm going to do the Google client ID. 34 00:02:10,330 --> 00:02:11,990 I will copy that. 35 00:02:12,160 --> 00:02:17,830 I will enter it as the key and then going to go over to my Google credentials page which I still have 36 00:02:17,830 --> 00:02:18,540 open. 37 00:02:18,730 --> 00:02:24,310 If you have closed this page you'll need to get back into your Google Development Council and go back 38 00:02:24,310 --> 00:02:27,530 to the credentials tab and open these things back up. 39 00:02:27,550 --> 00:02:29,390 So here's my client ID. 40 00:02:29,740 --> 00:02:34,480 I'm going to copy it change back over and paste it. 41 00:02:34,570 --> 00:02:35,770 So I'm going to add it. 42 00:02:35,810 --> 00:02:36,940 So there's one down. 43 00:02:37,000 --> 00:02:39,060 And yeah this is a little bit slow. 44 00:02:39,070 --> 00:02:40,750 So let's speed things up. 45 00:02:40,750 --> 00:02:43,280 I mean get my Google client secrets. 46 00:02:43,990 --> 00:02:45,700 I will find my client secret. 47 00:02:45,700 --> 00:02:48,530 Here it is. 48 00:02:48,610 --> 00:02:52,840 Paste the value click ADD and then two more. 49 00:02:52,840 --> 00:02:55,910 Let's do the easy one first which is the cookie key. 50 00:02:55,930 --> 00:02:58,220 So here's my cookie key. 51 00:02:58,270 --> 00:03:03,730 Paste it and then remember for a cookie key it just needs to be some unique string doesn't have to be 52 00:03:03,730 --> 00:03:05,110 any specific value. 53 00:03:05,110 --> 00:03:10,660 So for me it's going to basically you know I don't want to put any special characters though I recommend 54 00:03:10,690 --> 00:03:15,030 only doing numbers and letters that should be good. 55 00:03:15,820 --> 00:03:20,070 So make sure you've only got numbers and letters and there are no special characters. 56 00:03:20,140 --> 00:03:20,420 OK. 57 00:03:20,440 --> 00:03:23,080 Now the last one is just a little bit more complicated. 58 00:03:23,080 --> 00:03:25,030 It's going to be the Mongo you or I. 59 00:03:25,030 --> 00:03:26,780 So here it is right here. 60 00:03:26,840 --> 00:03:28,410 A mongo you or I. 61 00:03:28,900 --> 00:03:33,100 And then we have to do the value and the reason this one is more complicated is that remember we have 62 00:03:33,100 --> 00:03:37,640 to stick the D-B username and the DV password in there as well. 63 00:03:37,990 --> 00:03:43,210 So just to make sure that this is really easy for you because this is a very easy place to make a very 64 00:03:43,210 --> 00:03:45,300 small typo really easy. 65 00:03:45,370 --> 00:03:47,820 I'm going to change over to my code editor. 66 00:03:47,820 --> 00:03:49,540 I'm going to open up a new window. 67 00:03:49,810 --> 00:03:53,590 I will paste the link and then we're going to edit the credentials in here. 68 00:03:53,590 --> 00:03:59,710 So just make 100 percent sure we are putting the correct credentials in here because again so easy to 69 00:03:59,710 --> 00:04:01,000 make a typo here. 70 00:04:01,230 --> 00:04:03,390 So I'll find D-B user. 71 00:04:03,560 --> 00:04:10,330 I will change it to Stephen Prod. which is my user name that I had set up for our database user account. 72 00:04:10,330 --> 00:04:13,920 And remember this is the production set of credentials here. 73 00:04:14,110 --> 00:04:18,980 And then my password I had to use just password like so. 74 00:04:19,780 --> 00:04:20,040 OK. 75 00:04:20,050 --> 00:04:21,240 So there is the change. 76 00:04:21,250 --> 00:04:25,440 Make sure you do not have any greater than or less than signs. 77 00:04:25,450 --> 00:04:28,840 Make sure you have a colon between the username and password. 78 00:04:28,840 --> 00:04:31,500 Make sure you have an apt after the password. 79 00:04:31,510 --> 00:04:36,700 I apologize for Jilian Assange but people very easily make typos on this stuff so I kind of have to 80 00:04:37,030 --> 00:04:38,410 drill it just a little bit. 81 00:04:38,860 --> 00:04:39,120 OK. 82 00:04:39,130 --> 00:04:40,150 So we're going to copy that link. 83 00:04:40,150 --> 00:04:47,980 Now we'll flip back over to our config variable's dashboard and paste the value. 84 00:04:48,100 --> 00:04:53,410 I'm going to make a quick triple check here just to make sure I did it correctly and add it like so. 85 00:04:53,920 --> 00:04:54,390 OK. 86 00:04:54,550 --> 00:04:55,950 So that is it. 87 00:04:55,990 --> 00:04:57,350 We are done. 88 00:04:57,370 --> 00:05:02,140 I will now hide config variables and now no one's going to be able to see this. 89 00:05:02,140 --> 00:05:07,300 So as you might imagine yeah you don't want anyone getting into your Heroku account who shouldn't be. 90 00:05:07,300 --> 00:05:10,720 Because they can very easily find all these configure evils. 91 00:05:11,050 --> 00:05:11,890 But you know what. 92 00:05:11,890 --> 00:05:15,730 At the end of the day this information has to exist somewhere. 93 00:05:15,730 --> 00:05:19,470 So you might be sitting there thinking Well Stephen what if someone gets my Heroku account. 94 00:05:19,780 --> 00:05:21,890 If someone gets in your Hiroko account you know what. 95 00:05:21,910 --> 00:05:27,710 I don't want to tell you at the end the day you got to put this somewhere and Roku is a good location 96 00:05:27,710 --> 00:05:29,010 to place it. 97 00:05:29,750 --> 00:05:30,110 OK. 98 00:05:30,140 --> 00:05:31,580 So that's pretty much it. 99 00:05:31,610 --> 00:05:34,820 Now the last thing to do is to deploy our application. 100 00:05:34,820 --> 00:05:39,490 Remember how we do that we are going to commit all of our code. 101 00:05:39,590 --> 00:05:42,020 We've got a good diagram of this somewhere. 102 00:05:42,020 --> 00:05:45,180 I forget exactly where it is because we have here we are. 103 00:05:45,200 --> 00:05:50,210 So any subsequent deployment we are going to commit our codebase using get and then deploy our application 104 00:05:50,210 --> 00:05:51,770 using it as well. 105 00:05:51,770 --> 00:05:54,140 So let's flip back over toward terminal. 106 00:05:54,140 --> 00:05:59,270 I'm going to do a get status which will show me all the different files and folders that have changed 107 00:05:59,270 --> 00:06:00,360 over time. 108 00:06:00,410 --> 00:06:05,150 Now I haven't really been committing anything inside of this repository so I've got a whole big list 109 00:06:05,150 --> 00:06:07,880 of things that have been changed inside the repo. 110 00:06:07,880 --> 00:06:12,990 I'll now add all this stuff to be committed by using GET add dot. 111 00:06:13,040 --> 00:06:22,100 I will then commit everything with get commit Dasch am and then a commit message for me I'll say finished 112 00:06:22,250 --> 00:06:26,840 off flow I'll close the string off and commit it. 113 00:06:27,130 --> 00:06:27,440 OK. 114 00:06:27,470 --> 00:06:28,400 That looks good. 115 00:06:28,400 --> 00:06:36,020 And now the very last step is to make sure that we push this all to Heroku by using gets push Heroku 116 00:06:36,440 --> 00:06:41,990 master and that should automatically take all the latest changes that we've made and push it off to 117 00:06:41,990 --> 00:06:44,910 our running application on Heroku. 118 00:06:45,620 --> 00:06:45,970 OK. 119 00:06:46,010 --> 00:06:50,060 And now here is here's the thing I really want to show you if you look at the debug information right 120 00:06:50,060 --> 00:06:52,060 here is Noad underscore in V. 121 00:06:52,070 --> 00:06:54,110 And it says very clearly production. 122 00:06:54,110 --> 00:06:56,290 So that's where it's from. 123 00:06:56,360 --> 00:07:00,000 Just so you know it is said automatically. 124 00:07:00,170 --> 00:07:00,430 All right. 125 00:07:00,440 --> 00:07:04,430 Looks like everything is done now the very last step is to test this out in the browser. 126 00:07:04,590 --> 00:07:08,260 So do Heroku open to open up in the browser again. 127 00:07:09,200 --> 00:07:10,560 And then we get kicked over here. 128 00:07:10,580 --> 00:07:15,890 We still get the you know a nice nasty error message here which is totally fine but we should at least 129 00:07:15,890 --> 00:07:20,300 be able to get into our alloc flow because that is really the only thing that we have published at this 130 00:07:20,300 --> 00:07:21,270 point. 131 00:07:21,290 --> 00:07:28,680 So in my address bar I'm going to go to my Roku out dot com slash Auth. slash Google. 132 00:07:29,300 --> 00:07:35,150 So we'll go through that and then it looks like we get a nice nice nasty error message here. 133 00:07:35,150 --> 00:07:40,490 So if you look at this error message it specifically says that in the request we are trying to redirect 134 00:07:40,490 --> 00:07:48,330 over to HTP but the authorized callback you are l that we provided was HTP. 135 00:07:48,530 --> 00:07:54,140 So there's probably a little issue that we need to take care of in here around age TPP versus age to 136 00:07:54,140 --> 00:07:54,340 do. 137 00:07:54,380 --> 00:07:55,090 Yes. 138 00:07:55,100 --> 00:07:56,090 So let's take a quick break. 139 00:07:56,090 --> 00:08:00,260 We're going to come back in the next section and make sure we fix up this one last issue around our 140 00:08:00,260 --> 00:08:01,480 Google about flow. 141 00:08:01,610 --> 00:08:03,290 So I'll see you in just a second.