OK so the very first thing we're going to do is go over to Heroku dot com.
H e r o k you dot com.
And we're going to sign up.
So I'm going to sign up with my name e-mail.
You do need to put a real e-mail here and you should anyways because for one thing they send that e-mail
confirmation so you have to check that e-mail but more importantly you'll get updates about if there
is for some reason some freak accident Heroku servers get hit by a lightning bolt or something.
You'll get updates about what's happening.
So our company name.
I'll just say Web Dev Bootcamp.
You don't have to put anything.
It's not really going to make a difference but let's put no J.S. create free account then go check your
email and confirm your account.
All right.
So once you do that it will ask you so you click the link and you are asked to create a password confirm
the password.
And then once you finish creating your account it should take you to your Heroku dashboard.
And this is going to be a place where you'll be able to see the apps that you have deployed.
You'll be able to turn them on and off set you are else.
And any sort of other things you need to configure and the permission in security issues.
This is your home base for any apps you have to put on her.
OK.
So we're actually going to navigate away from this for now.
But if you do want to poke around take a look.
They have some good getting started guys.
So if you click on the getting started with Noad guide it will show you the steps that were going to
go through here.
And so I will reference this.
But you can also just watch this video to see what you need to do.
So the very first thing that it talks about here is installing downloading and installing the Heroku
toolbelt for Mac or whatever machine that you're using.
We actually don't have to use this because we're using Cloud 9.
So it comes preinstalled.
Sorry.
We do need to use it.
We don't have to download it.
Excuse me.
It comes pre-installed for us.
So if you go to cloud 9 what we can actually do is make sure we're in the right directory and we stop
our server.
Great.
If you just type the word Heroku you'll see that we get some output anything other than commed not found
means that we have Heroku installed and that just comes with Cloud 9 for free.
If you're doing this on a machine or you're not using Cloud 9 you can of course download the correct
version and follow the instructions.
So the first thing we want to do is follow what it said which is Heroku log it and this will prompt
you for your e-mail
that you signed up for Heroku with.
So it has to match and it will also prime prompt you for your password and it will look like you're
not typing just hides it.
So don't be concerned.
There we go.
We want to see authentication successful.
So what we've done now is basically okayed this machine.
This cloud nine workspace to work with to add integrate to basically transfer stuff to Heroku our Heroku
space on her servers because remember that's all that we're doing is we're going to be sending this
application and copying it over to Heroku machines.
So of course we don't want to let anyone do that to to our account.
We only want machines that we've signed in on that we've authenticated to be able to do that.
OK.
So that's the first step.
The next thing we need to do is actually make sure that we're using get in this directory.
So in the directory the top level directory of our project is is important.
You don't do it where you have other projects you're not doing it in this folder but in the directory
where your app JSE is in your package.
Jason we want to run get status and in my case I'm going to see not a good repository.
So we want to make it a get repository get in it.
We use good to tell to determine what to send over to Heroku and in our case we're going to send the
entire application.
So once we initialize a repository we're going to go ahead and add the files that we want to send over
to her OK with it.
So that's everything.
So we're just going to do one at a time get ADD Yes it add package that Jason and get add views that
whole directory will do.
Get commit.
And we'll just say initial comment great if you go back to the instructions you'll see a few things
.
Once you install the toolbelt you can click.
I have installed it in this example this tutorial they give you a demo app.
We already have one so you can just say I cloned the app source code.
The next thing that it tells you to do is run a command called Heroku create.
So we can go ahead and do that.
And what that will do is actually make space on Heroku make a new application generate a u r l for you
in a sushi area with this current and get repository.
So I'm going to run that right now.
Heroku create
and you can see first this wouldn't work if I wasn't logged into if I didn't run Heroku log in it would
ask me to authenticate first but you can see that it makes me a new application and it gives it a random
name.
Heroku is pretty famous for these peaceful Zen nature ish names.
They come up with so nameless at all here with this random number.
It also gives you this you know where your application will be deployed to.
You can change this.
You can look at the Roku docs you can specify your own Heroku app dot com domain if you want.
So if you wanted to check if this demo application.
One two three dot Heroku app dot com is available you can do that but you can also of course have your
own domain.
So if you own Salli dot com or clouds are awesome.
I know you can deploy an app that is deployed to Roku.
You can set it up so that it works with your domain but you wouldn't do that just yet.
So you still create this application here you get this random Hoku you are now if we visit that right
now
we just get this default welcome to your new app.
We don't have any code associated with this app yet.
Heroku just knows that we want to make an app that we have an empty app there.
One other thing that happened is that it added a remote to our Get repository called Heroku.
So if you take a look at Get remote's dash B you'll see here it added a remote called Heroku that we
can push code to.
So this is really important.
This is how you basically transfer the code.
This is how I'm going to tell Heroku Here's the code I want you to run.
So when I push to Heroku I'll run a command.
Get push Heroku master.
So that's going to push whatever code I have added and committed on the master ranch over to Heroku
.
So in this case that's everything.
Again sometimes you don't want to push every single thing.
Maybe there's some new code that you don't want to send over to your production server but in this case
we want everything over.
The app is working the way we want.
So we're just going to push everything.
So get push Heroku master before I do that you'll see in a tutorial.
It also tells how to do that.
So if you get lost if your prefer watching or reading the tutorial you can follow that.
We're doing exactly the same step.
So get push Heroku M. OK so we can hit enter.
I'll warn you that there is one thing that we haven't done that's going to cause a small problem but
I did it on purpose because I want to show you the process of debugging Heroku.
So I'm going to hit enter though
and it takes a little bit usually especially with larger apps.
A lot of stuff is happening here.
Usually this doesn't happen when you just push to get hub.
So this is all Heroku magic.
You can go back and read a bunch of stuff about what's happening.
Let's see it detected that it's a node app it installed some of the important dependencies or the Pineries
then install the dependencies express and Ejay us because of that package that Jaison.
And these are all the things that express depends on then built the application and then launched it
.
So says this application has been deployed to Iraq.
So if we visit that you URL refresh we would hope to see our app.
However all that we see is application error.
So this is a really common screen when you're debugging Heroku when you're starting out when you're
pushing a new app up there.
What happens when you have an error with your code or something doesn't work.
Is that on the Heroku side of things or on the web interface all that you see is error.
They don't put the specific error message in the details there because you wouldn't want to expose that
to your users obviously.
So they keep things as hidden as possible.
They just say application error.
But then what happens is that you can view the issues you can view the error messages in the logs in
your command line.
So to do that we just type Heroku logs and we get a lot of stuff here if we scroll up we'll see there's
an error and the error happened right here.
Starting process with command NPM start and then it turns out we don't have an NPM start command missing
script start and then that causes all of our errors and things to crash.
So again I did it on purpose to show you one Heroku logs how you could go ahead and take a look because
it it hides the actual error message from you here but that doesn't mean you can't see it.
And this is a pretty common screen if your app is crashing.
Heroku logs and the important command.
But what the arrow is saying is that we didn't have a start script.
So with that start script does is it tells Heroku it tells the server what code to run to start her
application.
So it basically does what we've been doing to start our server.
We've been running node apps.
Yes but we're unable to do that because the code is not running here anymore.
We're not running it on this workspace.
That's the point.
It's on Heroku.
So we give it a start script.
So we open up the package stage a song and it goes inside of scripts.
This is not something that you're expected to know.
This is new start colon and then node after J.S..
So what Heroku will do is when we push code to Heroku it's going to first run NPM install install all
the dependencies every time we push.
So we might upgrade to a new version of express if we add and commit and then get push Heroku master
that will automatically run NPM install on Heroku get the new version and then it runs NPM start which
will run this right here.
Node apt.
Yes.
So we can't just do get push Heroku master because right now our get Master ranch is unchanged.
We haven't added and committed that change we just made.
So if you type get status
you can see on Branch maß.
Oh well I didn't save the file so that would do it.
Now if I take it status you'll see modified package that Jason.
So we want to add that get commit and all that will right here is add start script.
Now all we need to do is get push Roku master and we're good to go.
So get push.
Her master will start that entire process over where it takes our code takes a text at Jason.
It installs these dependencies and then it runs NPM start which we didn't have specified last time.
So the app crashed.
oops! meant to hit Enter over here.
It will take a little bit.
It's pushing it up to Heroku it's installing things installing dependencies and see launching verifying
that deploy.
OK let's try refreshing now.
And there we go.
So we have an application running nameless and I told 6 4 4 9 8 dot Roku at dotcom I can click on the
routes go back and forth.
Awesome.
The last thing that I'll show is on the Heroku dashboard if you go back to your dashboard.
We'll now have our application showing up right here.
Oh it's going to make me log in first.
So once you log in hopefully you won't have to.
But once I log in we'll see what I'm looking for.
And as you can see our new app is here.
You can click on it view information about it anything about how long it's been up how many people have
accessed it how often.
Who has permission to deploy and mess with this who is an owner contributor.
All sorts of different things.
I'm not going to go into all of this.
I mean you can see all the different times we've pushed or deployed when we initialized it when we first
released the app.
And then this is also where you would come to set things up or configure things like custom domains
or you can add add ons.
The one thing Paul mentioned here is that we're using the free Heroku plan right now.
There's no credit card associated where they make their money though is once you start having more users
you're going to upgrade and what you do is click here.
Upgrade to hobby and see you can click on hobby or you can go to a professional so you can see hobby
starts at 7 bucks a month.
So definitely worth it.
If you are going to have if you're going to start having more people for you and your applications but
even free works just fine for like a portfolio project or something you're going to send out to companies
as long as you're not expecting you know thousands thousands of hits a day.
OK.
So that's all there is to Heroku here.
I want to recap that though.
So let's go back and go through this process one more time of updating our application.
I want to update the home page so that it has an image on it that say and I happen to have an image
here.
It's kind of large I didn't think about that.
This is an image I took recently but I'm learning some photography on the side.
So feel free to use whatever image you want of course source equals gigantic source.
Let's test it out locally.
So node app Julius
refresh.
Wow.
And get to image.
That's fine though.
So that's working fine locally on Heroku though that change is not taken effect at all and that's because
they're not inherently linked.
We have to choose what we want to push to Heroku And and that's really the point.
We have a workspace to play around with to make mistakes to try new things and then if we want to incorporate
and incorporate them into the real app I can then push them to Heroku.
But Heroku should always be the last stable build.
The last thing that works before you went and messed something up.
OK so all I need to do is get status need to add that change commit add image of bridge and then get
push Heroku master.
So that workflow is really common.
The first thing that we did that this isn't really part of the workflow but the first thing was make
sure you're in a get repository then Heroku create then once you create then what you're going to do
is make sure you add and commit everything that you want to go over to Heroku and then get push Heroku
master and then any time you change or update it same process get ad get commit get push Heroku master
refresh on our Heroku app and there we go or change is taking place.
Awesome.
All right.
So in the next video we're going to see how to deploy a more complex substantial app with a database
which is a little bit of a headache.
Unfortunately