In the last video you got your code pushed up to get hub in this video you're going to get your code
pushed up to Heroku.
That's going to allow us to actually deploy our node j s applications to production by the end of the
video.
You're gonna have a real U.R.L. and anyone with an internet connection will be able to visit that U.R.L.
to view and use your weather application.
Now like we did with GitHub we're gonna go ahead and set up a new remote and we're going to use that
push command to push our code up to this new remote but there's also a couple of other changes we're
going to need to make along the way to our application code to allow it to work with Heroku.
Now one great thing about Heroku is that we can manage our applications from the terminal.
So with get hub we had to use their Web site to do a lot of things with Heroku.
We actually don't need to touch the web application at all.
We installed the Heroku command line tools earlier in the section and we can use those to create our
applications to manage them and to push new versions of our applications up to the production environment.
Let's go ahead and kick things off by heading over to visual studio code and running a couple of commands
from the terminal.
The first thing we want to do is set up our SSA public key file with Heroku.
You'll remember in the last video we copied the contents of that file to the clipboard and we brought
it over to get hub dot com.
Now with Heroku we don't have to use that there's a single command we can run to get that done.
It is Heroku space keys colon add when we run this it's going to look through our SSA directory and
ask us which keys we want to upload here it found the only public key we have I.D. underscore RSA dot
pub it's asking us if we do want to upload this to our Heroku account.
In this case we do.
So I'll type Y and I'll hit Enter now our SSA key is associated with our Heroku account and we're gonna
be able to securely send code back and forth with this in place.
Let's go ahead and start the process of creating our application.
You can create your Heroku application by using Heroku create.
Now this is something we want to run from the root of our project.
So we want to run this command from the web server folder and after create we can also specify a name
for the project.
If we don't specify one Heroku is going to randomly generate one for us and that can be confusing because
it's not going to say something like whether app.
So we won't really know what the Heroku app is for.
It's best to give our applications a name.
Now these names need to be unique not just across your own account but across all Heroku applications.
So I typically start them off with my last name something like Mead hyphen whether hyphen application
would get the job done.
I'm gonna go ahead and run this command and it's going to do a couple of very important things.
First up it's actually going to create a new application on the Heroku servers and second up it's spitting
out to you are elves.
The first is a location where we can view our application.
This is the live U.R.L. for the app.
And the second is the U.R.L. for the get repository where we should be pushing the code we want to deploy.
Let's take a quick moment to crack open this first.
You are all in the browser from the visual studio code terminal I could copy and paste it or I could
also click it to open it up in the browser.
And when I open it I get the following screen.
It's saying Welcome to your new application and it's not showing our app because we haven't deployed
it yet.
So this is the welcome screen we're going to see by default.
This will go away once we actually get our application deployed.
So at this point we have executed Heroku create and we're ready to start the process of getting our
code up on the Heroku servers.
Now before we do that we have to make a couple of very important changes.
So Heroku can actually know how to run our application.
We have to provide it with some basic instructions of what to do when it gets our code.
One of the most important things we need to change has to do with what's inside of package Dot.
Jason.
So in order for her Roku to start up our application we have to tell it which file to run now from the
terminal locally.
We've been using Node to run app dot J.S. in the source directory and that's exactly what we want Heroku
to do as well.
We tell the Roku we wanted to do that by specifying it in a script.
So we have this script object in a package Dot.
Jason This allows us to set up scripts.
These are key value pairs.
The key is a name for the script and the value is what to run from the terminal.
Now by default your package that Jason File has a test script which just prints a message to the terminal
saying that no test cases have been specified.
That's OK for now.
We're actually going to explore testing a bit later in the class and we'll set up a real a test script
for now.
We can remove that line completely emptying these scripts object.
All we're going to do is setup a single property on this object.
We have our key value pair.
The key needs to be start.
So we're specifying these start script telling Heroku how to start up our app and the value is the command
to run right here.
That's going to be node space source forward slash app dot J.
S If Heroku runs that command it's going to start the application up correctly.
Now these scripts aren't limited to Heroku.
We can actually use these start script locally in our project to start up the application for ourself
from the terminal.
We can get that done using NPM run NPM run except the name of the script.
You want to run and right here we can use these start script.
So this is a command we can run to start up our application locally.
This is the exact command that Heroku is going to run to start up our application on their servers.
So making this change is very important right here.
If I do run this locally we can see that it's starting up the application and we get server is up on
port three thousand printing.
Now I can go over to my local host three thousand tab like I had before I can refresh things and the
app is still working as expected.
So that is the first change we need to make.
We needed to tell her Roku what to do to start up the application.
The next change we need to make lives inside of app dot J S in the source directory and it has to do
with one of the last things we do in this file way down at the bottom we call app dot listen and we
listen on port three thousand.
We have to change that.
We can still use port three thousand when we're running the app locally on our machine but her Roku
is going to provide us with a port value that we have to use when our app is running on her Roku.
Now this isn't a static value we can hard code in the project.
This is a value that changes over time and it's provided to our application via and environment variable
and environment variable is just a key value pair set at the OS level.
In this case her Roku sets one for the port where the value is the port number to use.
So all we need to do to actually support this is to change the two references right here and add one
new line the new line is going to live up top right below where we define app right here.
Let's go ahead and create a new constant.
And we're gonna call this new constant port.
So what value do we want to use for port.
Well to start let's go ahead and extract the value that Heroku provides that is available at process
dot EMV EMV is an object and it's where we can access environment variables.
Now this is exactly what Heroku sets and we'll learn how to set our own a bit later in the class.
For now we need to access uppercase p o r t uppercase port.
So this is going to set port equal to the environment variable value.
Now this is only going to be set on Heroku which means that when we run the app locally things are going
to fail.
We can fix that by using the logical or operator in JavaScript.
And right here providing a default fallback like 3000.
So here port is equal to this value if it exists or this one.
If this value doesn't exist.
So on Heroku this will exist and it'll be used locally.
This won't exist and this will be used.
Meaning our application will still work just fine locally.
Now all we need to do is actually use this port variable down below.
I'm going to scroll to the very bottom of the file and we're going to swap it out right here instead
of passing three thousand into app dot.
Listen I'm going to pass in the value stored in port and the same thing is true with the string instead
of Statically typing out three thousand I'll concatenate on whatever value is stored in port now that
we have this in place the port issue is fixed and we can move on to one final thing we're going to need
to address before we're ready to push our code up this lives inside of the public directory in our client
side JavaScript.
So right here we have our J.S. folder and we have app dot J S the line in question is this line for
me that's the line 14 this is where we call fetch and this is where we provide the you are well we want
to fetch Now the problem is that when this code runs on Heroku it's still going to try to access local
host which is not gonna exist that's going to prevent us from ever being able to correctly fetch the
weather to address this.
We want to remove the domain completely.
If we're on local host We want to make the request to a local host.
If we're on our special Heroku app you are.
We want to make the request to that you are out.
This is going to be similar to what we did over inside of templates partials header dot HB S..
In here we set up all of our navigation links and I didn't list out the entire domain I just used forward
slash followed by the specific thing I wanted to visit.
We can do the exact same thing here inside of our fetch call.
So what I'm going to do is remove everything from the H and H TTP all the way up to the end of the port.
We're going to leave just forward slash weather.
Then we'll set up the address query string that's gonna make sure to use local host if we're running
on local host or to use the Heroku app.
You are well if we're running on her Roku now those are the three changes we need to make.
The first told her Roku how to start up the application.
The second.
Made sure that our application listened on the port Heroku was expecting allowing it to actually serve
things up.
And the third.
Made sure that we made the weather request to the correct location.
Now that we have all of these in place we have to make a commit and push our code up to Heroku.
So from the terminal I'm going gonna use clear to clear the terminal output and I'm going to run get
status to start the process of creating that commit right here.
What do I have.
I have three modified files the three files that we just changed I want to commit all three so I'll
use get add dot to add all of those to the staging area followed by get commit with the M flag to provide
my message right here setup app for Heroku.
Perfect.
Now I could hit enter to actually create that commit and we can go ahead and start by pushing those
changes up to get up.
So right here get push.
When we do this it's going to push our code up to the origin remote and right here we can see that things
have been updated correctly.
If we head over to the github repository you should be able to refresh the page and see those changes
showing up here I can see the public and source folder changed twenty three seconds ago.
While many of the other folders changed over a day ago when I filmed the last video and package Jason
also got changed recently.
That's a good thing.
From here we can now push up to the Heroku remote now when we ran that Heroku create command and actually
spit out the remote.
You are all that we had to push too not only did it show it to us.
It also set up the remote for us right here.
If we use clear we can use get remote to view all of the remotes that are configured.
We have to showing up.
The first is Origin which we configured and the second is Heroku which was configured for us now to
deploy all we have to do is use get push Heroku master.
This is going to push our latest comments up to the Heroku get remote.
When Heroku sees that new comments have been pushed it's going to deploy our application again.
So right here when we run this it is indeed going to start with output we saw when we pushed up to get
hub but now it's moving onto something else entirely.
It's installing our dependencies for our application and then it's getting the process kicked off and
that's going to allow us to view our server when we refresh things in the browser.
Now the entire deployment process only took what maybe 15 seconds.
And right here we have the U.R.L. where our application can be viewed.
Now we already have that U.R.L. open in a browser tab.
This is where we had the welcome screen earlier in the class.
Let's go ahead and just to refresh this page right here what do we get.
We have our weather application showing up I can navigate between the pages on my weather app and I
can also search for the weather for a given location.
I'll go ahead and search for Boston.
I'll hit the search button right here I get my location and I get the forecast showing up which is fantastic.
We now have our weather application deployed to a production environment.
This U.R.L. is not something we're able to visit because it's running on our machine or we're logged
in.
This is a public you are well that anyone in the world with an Internet connection would be able to
visit to view our app now that you are elsewhere seeing here is just our application name as these subdomain
at her Roku app dot com.
This is the default U.R.L. but if you go out and purchase your own domain you can configure your DNS
records to work with your Heroku application and you can have a completely custom you are all up above.
There are great documentation articles in the Heroku Dev center that can walk you through that process.
Right now though we have our application deployed to production.
Everything is working really really well.
We have our code backed up to get hub where we could collaborate with others and track issues in our
application.
And we have our code pushed up to her Roku where it can deploy our application.
Now we had to make a few changes to get that done but it was only maybe five or six lines of code to
get our application working on her Roku is infrastructure.
That's where we're going to stop for this video.
There are still a couple of videos left for this section in the next one.
We're going to walk through the new feature workflow making sure you're comfortable adding new features
to the application and getting those pushed up to get hub and deployed to Heroku.
I'm excited to get to that.
So let's go ahead and jump right in to the next one.