Welcome back! It's time for us to actually deploy our app that we've been working so hard on.
Now up to this point our entire project, our entire beautiful app has just lived on our laptops.
If we wanted to show it to somebody well be needed to have it set up on our laptop.
But that's not really realistic right.
If we ever want to get users and spread the word out about our project we need to have it online accessible
to everybody and we're going to do that in this section.
If you remember we have the front end all done with react.
We have our backend server that has a beautiful API created by node in Express and we also have our
postgres database set up and we're going to be setting up each one of these rectangles that you remember
should be separate computers.
We're going to deploy them separately so that as long as they can communicate and they know where each
other lives it doesn't matter where each one of them is.
As long as they have this connection and we're going to be deploying to a place called Heroku and Heroku
is just a company that has a ton of computers and they're willing to host the files that we give them
for us and I'm going to be walking you through this and you might be asking yourself why aren't we using
something like HostGator or something that I've heard of before.
Well HostGator or blue hosts or most hosting platforms that you've heard of are these simple platforms
that we've talked about before right.
They have usually an Apache server that is just hosting files.
So they're really really good at hosting and serving really simple HTML based projects.
If you just have an info page or an about Web site well they're really useful maybe you have a WordPress
web site that's good if you're not worried about the servers and everything is taken care of.
But that's not how we deploy apps anymore.
If you're actually building applications which are more complex we need something that gives us more
control.
And there's many options and these are some of the more famous ones such as Amazon, Heroku which we'll
be using, Engine Yard, Digital Ocean.
There's also Google and Microsoft that offers web services and they offer a ton of different things
that we don't really need to get into.
There's a special industry called dev ops that really focuses on this domain.
But we want to know how it works so that when we encounter it we can explore more and understand it.
At the end of the day these are just computers managed by these companies.
They allow you to run your files on their computer and in return,
Well, we pay them.
But they also make sure that the computers are going to be running really really fast.
And if we're running something like postgresql or a data base they're going to try and do their best
to make sure that it doesn't go down or that there's backups and you're going to be hearing a lot about
these sort of companies a lot.
When you get into the Web development field we're using Heroku here because it's really developer friendly.
And they also offer a free tier which is great for projects like this just for demo purposes.
If you go to their Web site they have really really good documentation and it's so simple to set up.
So I'm going to go ahead and tell you to sign up for this.
It's completely free.
As soon as you log in you will be directed to something like this your personal dashboard and you can
see you can use different languages to deploy.
In our case we're using node and we can just click on node and it will take us to documentation that
takes us from zero to getting our app deployed.
But you don't need to go through all of this because it's so simple.
Let me show you.
I'm going to link to all this documentation after this video so you can take a look for yourself.
But it's really really easy if you go to documentation and deploying with Git
it's as simple as a few commands.
It tells you that we essentially need two things.
One we need Git which we already have.
And Heroku.
So let's talk about our game plan.
We're going to be putting our server on Heroku and also our postgres database on Heroku and the Front-End
the react app.
We can put it anywhere really but we can use Github pages that we've used before for background generator
project because it's free.
Let's look at the API first because that's the most important one I think it's the connector of the
two.
We already have Git installed.
So let's get Heroku CLI which is the command line interface that is we can use it in the terminal to
install it.
Now before we get into this I went ahead and put our API on Github to make sure that we can actually
run these commands and make sure that this is a Git project.
I went ahead and did that without recording it because we've gone through it before.
I didn't want to bore you with that.
You should know how to do that by now.
So look at the Heroku CLI.
We have both Mac Windows and Ubuntu operating systems that we can run it on.
So again I'll link to these.
And you can decide which way you want to install it yourself.
For me it's a Mac.
So I'm going to use brew install and install this command line.
I mean as you can see over here I already have this installed but for you it might take a little bit
longer and once it's done it will say it's installed go and have some fun.
All right.
So we have Heroku installed.
If we go back to the documentation it tells you how to add your app to Git which we already know.
So we can skip over it and it says that we need to just run Heroku create to create an app.
We go into our directory and simply run Heroku create
And look that! It created our app, even gave us a URL we can reach our app.
Allright, awesome.
But in order for us to use this well let's go to this URL and see if it works.
We can use Heroku open to actually take us to this link.
Let's see what happens.
It says couldn't find that app. Because we actually have a few more steps we have to actually deploy the
app and the way we deploy it we have to first check something called Git remote.
And it's something we haven't really talked about.
But let me show you what it is.
If we can Git remote dash V, we get...
Let me open this.
Make this a little bit bigger.
There you go.
We see that we have Heroku and origin.
Up until this point when you work with Git the default is origin so you may do commands like Git push origin master.
That meant we're pushing to Origin which is Github and we're pushing onto the master branch and
origin is just the default name that Github has. We might have done the command
Just Git push because the default is always origin and master.
So that was just the shorthand way of doing it.
But now because we've run these Heroku commands we also have Heroku now.
So instead of pushing to Github we can push to Heroku
So in our case if we go to deploy code we see that we simply run Git push Heroku Master.
Let's do that. I'm going to ran Git push Heroku master and see what happens.
You see here that I got an error and this is an error that you might not get but because I've used Heroku
before.
It has a different name.
You can see over here "shielded-anchorage".
versus the name that I actually want which is "radiant-ocean".
And we see that in our remote as well that we don't have the radiant-ocean app we have something else
that I've created before. And the way we get around this is in the - for an existing Heroku app you can simply
run this command to rename it.
So we do Git Heroku Git remote dash a and the name of the new app that you want to add in our case
it's this.
And now if I do Git remote dash V.
All right I have radiant ocean as my app and don't worry if this is confusing.
It's just a matter of reading documentation.
It's very specific to Heroku and something that you'll get used to but now our app is pointing in the
right direction.
So we'll try that again.
We're going to try and Git push Heroku master once again.
All right.
Looks like it's running.
And you can see over here we're creating an environment, we're installing a bunch of things it's installing
node modules so it's running NPM install for us and getting everything set up and it's saying verifying deploy done.
Awesome.
Let's do Heroku open and see if this actually works.
And is just hanging there.
And don't worry, I did this on purpose.
The reason it's not working is instead of me telling you let's figure out what's actually going on.
There is another command that we can use which is Heroku logs dash dash tail.
And this gives us a log into what's happening in this computer where the server is running.
Right so it looks like everything is running.
Node server is listening to port 3000.
We see that we get an error now.
So it looks like we're getting a boot timeout and saying web process failed to bind to port.
And this is something that you'll read in the read me or the documentation of Heroku. What's happening here
is that Heroku has its own port that it assigns.
And as we've talked about environmental variables before because we're setting our port to listen to
3000 here Heroku wants its own port, doesn't necessarily care about 3000, has its own thing.
So the way we get around this is we can use process dot env Dot PORT so that if we receive a port from
the environment that we're running in in this case Heroku run that otherwise run port three thousand
and we can change app is running on port 3000 to something more dynamic like process dot env dot PORT.
All right let's go back.
And run
Git push Heroku master.
But here's the thing.
Because we're going through Git.
We actually have to add these changes to our repo so we're pushing everything.
If we run this command just by itself will say everything is up to date because we haven't done the
Git ADD Git commit commands.
So let's do that Git add Git commit adding port and then we'll do Git push Heroku master. It will run through
the commands again.
It's redeploying the entire server.
And if we go to Heroku open
it looks like we're hanging again and we get internal server error.
Let's look at the logs.
We go again to Heroku logs tail.
And this is a little bit tricky if you scroll up here.
We want to go to app.
OK.
So nodemon is running, app is running on port 9098.
But if you keep going down after NPM start we get a reference error - database is not defined.
And this something that I left out here on purpose.
Just to show you how debugging works where you have to look through the logs.
If you remember we're no longer using that database that we created, the first variable.
And because our app when it first loads goes to the root route it's going to run this command and it's
going to say well database doesn't exist.
I don't know what you're talking about.
So to fix that let's just change this to.
It is working.
If we save and yes unfortunately we have to go through our Git commands again.
We're going to Git add Git commit
changing response and Git push Heroku Master
All right.
So running through some magic and let's do Heroku open
it's working.
Our app is now at this location and we can reach it using this.
Let's test that theory.
Let's add this instead of our local host to our front end app and by the way if you go to the Heroku
dashboard which I can just use over here
and we see that my app is running.
It has all the logs that I need.
I can look at metrics, I can look at activity
you can look at the deployment process and add different things.
There's just so much stuff you can do.
It's really really cool.
But let's just test our assumption to make sure that our app actually works.
I have the smart brain application running here.
Let's open up apt dot js
And I make this a little bit smaller so we can see and where we do our fetches we're going to change
localhost which is our computer to the actual endpoint.
Let's copy the endpoint
that Heroku gave us.
And change it for all the localhost locations.
So we have this.
And if you remember we also have the register and sign in as well.
Just to confirm with you what we just did. We've essentially just told the front end where these arrows
should point and it should point to the location of the server which was provided to us by Heroku.
All right so let's give it a try.
I'm going to run NPM start
and hopefully everything is working as we want it.
If we sign in or just click on sigh in.
Nothing happens.
So we need to register somebody.
We'll go with Todd Todd at gmail dot com.
One two three register.
Oh we get an error.
Let's see what we get.
If we go to console - server responded with status of 400.
Bad request. let's look at the network and see what happens.
I click register
and we get unable to register which is actually a really really good sign because that is what we've
written.
Remember in our server we said that when we tried to register
if it fails we want to return.
Unable to register.
So it's actually connecting to our front end.
That's amazing.
But you may notice a problem. That is now the fact that we don't have a database anymore because our
database and the backend is referencing,
If you remember our localhost but since this computer now lives somewhere on Heroku he has no idea.
Well it may know what localhost is but they definitely don't have a database called smart brain do they.
So now let's create a postgres database on Heroku.
But this video getting already a little bit too long.
So that's for the next video.
I'll see you in that one Bye-Bye.