The lesson we have to do is make sure that all these different environment variables are defined on
our Heroku server.
Setting all these things up is pretty straightforward.
You just have to know where to look on her has control interface.
So let's get to it inside my browser.
I'm going to open up a new tab and navigate to Heroku dot com.
And it looks like I'm already signed in some going straight to the dashboard and on here I'm going to
find the application that we have created for our app.
So on this list I'm looking for agile bayou.
So this is mine right here.
Remember yours is going to be named differently than mine.
So you might see something you know whatever you pulled up previously it will be this address up here
yours will be different from mine.
It's all fine and I'll buy you a click into it and then just set up all these environment variables.
I'm going to find the settings tab right in the middle.
So your settings right here click Settings and then right here is config variables.
So this is what we want to change or click on reveal configure variables and then this gives us an interface
to set up all the different variables that we want to add into our application.
Now if you want to by the way you can click on this article right here in this link and you can read
a little bit more about environment variables inside of her Roku.
This may or may not.
OK.
So right here I wanted to show you the fact that Roku automatically sets that node EMV very well somewhere
in the Heroku documentation you can find it again over and the key is not G-S the node underscore EMV
Heroku specifically does this.
I was hoping to just find something that said that in the in the documents but whatever.
OK.
So essentially what we have to do here is one by one we're going to add in the key and then our respective
value.
So let's do it.
We do want to make sure that we use exactly the correct key song and to find my product J.S. file.
And I will copy over each of these key names one by one.
So first I'm going to do the Google client ID.
I will copy that.
I will enter it as the key and then going to go over to my Google credentials page which I still have
open.
If you have closed this page you'll need to get back into your Google Development Council and go back
to the credentials tab and open these things back up.
So here's my client ID.
I'm going to copy it change back over and paste it.
So I'm going to add it.
So there's one down.
And yeah this is a little bit slow.
So let's speed things up.
I mean get my Google client secrets.
I will find my client secret.
Here it is.
Paste the value click ADD and then two more.
Let's do the easy one first which is the cookie key.
So here's my cookie key.
Paste it and then remember for a cookie key it just needs to be some unique string doesn't have to be
any specific value.
So for me it's going to basically you know I don't want to put any special characters though I recommend
only doing numbers and letters that should be good.
So make sure you've only got numbers and letters and there are no special characters.
OK.
Now the last one is just a little bit more complicated.
It's going to be the Mongo you or I.
So here it is right here.
A mongo you or I.
And then we have to do the value and the reason this one is more complicated is that remember we have
to stick the D-B username and the DV password in there as well.
So just to make sure that this is really easy for you because this is a very easy place to make a very
small typo really easy.
I'm going to change over to my code editor.
I'm going to open up a new window.
I will paste the link and then we're going to edit the credentials in here.
So just make 100 percent sure we are putting the correct credentials in here because again so easy to
make a typo here.
So I'll find D-B user.
I will change it to Stephen Prod. which is my user name that I had set up for our database user account.
And remember this is the production set of credentials here.
And then my password I had to use just password like so.
OK.
So there is the change.
Make sure you do not have any greater than or less than signs.
Make sure you have a colon between the username and password.
Make sure you have an apt after the password.
I apologize for Jilian Assange but people very easily make typos on this stuff so I kind of have to
drill it just a little bit.
OK.
So we're going to copy that link.
Now we'll flip back over to our config variable's dashboard and paste the value.
I'm going to make a quick triple check here just to make sure I did it correctly and add it like so.
OK.
So that is it.
We are done.
I will now hide config variables and now no one's going to be able to see this.
So as you might imagine yeah you don't want anyone getting into your Heroku account who shouldn't be.
Because they can very easily find all these configure evils.
But you know what.
At the end of the day this information has to exist somewhere.
So you might be sitting there thinking Well Stephen what if someone gets my Heroku account.
If someone gets in your Hiroko account you know what.
I don't want to tell you at the end the day you got to put this somewhere and Roku is a good location
to place it.
OK.
So that's pretty much it.
Now the last thing to do is to deploy our application.
Remember how we do that we are going to commit all of our code.
We've got a good diagram of this somewhere.
I forget exactly where it is because we have here we are.
So any subsequent deployment we are going to commit our codebase using get and then deploy our application
using it as well.
So let's flip back over toward terminal.
I'm going to do a get status which will show me all the different files and folders that have changed
over time.
Now I haven't really been committing anything inside of this repository so I've got a whole big list
of things that have been changed inside the repo.
I'll now add all this stuff to be committed by using GET add dot.
I will then commit everything with get commit Dasch am and then a commit message for me I'll say finished
off flow I'll close the string off and commit it.
OK.
That looks good.
And now the very last step is to make sure that we push this all to Heroku by using gets push Heroku
master and that should automatically take all the latest changes that we've made and push it off to
our running application on Heroku.
OK.
And now here is here's the thing I really want to show you if you look at the debug information right
here is Noad underscore in V.
And it says very clearly production.
So that's where it's from.
Just so you know it is said automatically.
All right.
Looks like everything is done now the very last step is to test this out in the browser.
So do Heroku open to open up in the browser again.
And then we get kicked over here.
We still get the you know a nice nasty error message here which is totally fine but we should at least
be able to get into our alloc flow because that is really the only thing that we have published at this
point.
So in my address bar I'm going to go to my Roku out dot com slash Auth. slash Google.
So we'll go through that and then it looks like we get a nice nice nasty error message here.
So if you look at this error message it specifically says that in the request we are trying to redirect
over to HTP but the authorized callback you are l that we provided was HTP.
So there's probably a little issue that we need to take care of in here around age TPP versus age to
do.
Yes.
So let's take a quick break.
We're going to come back in the next section and make sure we fix up this one last issue around our
Google about flow.
So I'll see you in just a second.