Instructor: So, after all this time
and all this work building this huge complete project,
it's now finally time to really deploy it
to a web server and really share it with the world.
So, in this video, you will learn how
to deploy a project onto Heroku.
And, the first thing that we actually need to do is
to install Heroku on our computer.
So, let's just search for Heroku NodeJS.
And so, here, we basically have a getting started guide
for NodeJS with Heroku
because you can host all kinds of apps on Heroku
like PHP or Ruby on Rails applications.
So, it doesn't only work for NodeJS.
And, we will take a closer look at Heroku in a second,
but for now, let's just start by installing
this program here.
So, I'm in the setup part of this guide here.
And so, now, please go ahead and install the installer
for your platform, whether that's macOS,
Windows, or Linux.
Or, in this case here, I guess it only works for Ubuntu.
No, actually it says here that it's available
for other Linux as well.
Anyway, please go ahead and install the version
that you need for your computer
and then, in the meantime, while that is installing,
go ahead and create a new account.
So, click here on Sign up
and then open up your free Heroku account.
So, yet another account that you need to create.
So, there really are a lot of different accounts
that you need to create in order to complete this project,
but I guess that's just how modern web development works.
Anyway, after you have your account created,
let's take a quick look here at the Heroku website
just to get an overview of what this platform is all about.
So, Heroku is this platform
which makes it really, really easy and hassle-free
to deploy your web applications.
And, again, they can use any language
that you can imagine.
As you see, NodeJS, Ruby on Rails,
this one I guess is Go, or actually it's Java,
or PHP, Python, this one is Go, right?
And so, all kinds of apps really run on Heroku.
So, let's see what they say here.
And, this is mostly just marketing talk I guess.
So, nothing all too interesting here.
But, of course, you can take a look here
at all these different manuals.
And, actually it is free to get started with Heroku
on a really basic application.
But, of course, once you start to level that up,
you're gonna have to start to pay.
But, here, the free version, as you can see,
comes with all the core platform features.
You can even add custom domains.
But, the only problem with it is
that the application will basically sleep,
so, basically, after 30 minutes
of no one accessing the application.
But, anyway, you can take a look
at all of this on your own.
So, let's now actually go back to our project here.
And, to get started with the deployment process,
let's start by logging into Heroku on our command line.
And, that is going to work because of the installation
that we just did.
All right, let's give it some more space here.
Clean that up and now write heroku login.
So, if your Heroku installation was successful,
upon typing heroku login, you should see this message here,
press any key to open up the browser.
So, just press really any key, as it says,
except Q because that will exit the app.
And so, that is then going to open up a window for you
where you can log in.
And, after that, just like magic,
you will be logged in on Heroku in your command line.
So, it should probably take a bit
and sometimes, it doesn't even work on the first try.
So, actually that happened to me before.
And so, just hit control C.
And so, on a Mac, that really is control C, not command C.
And. Let's try that again.
Press any key, go back to the browser, log in again.
Go back again, and so then that's done.
So, you see, now I'm logged in with my email address.
So, again, this was not the first time
it didn't work for me on the first time.
And so, if that happened to you,
then just do it exactly the way I did it here.
Anyway, now, with this, we are logged
into Heroku here in our console
and so we should now be able to create a new project.
Now, before doing that, we actually need to change something
in our NPM package.json file.
So, this one.
And, that's because Heroku actually uses
our start command here to start up our application.
Now, in production, we do not want to use nodemon here.
We simply want to run our application
using the node command and not nodemon
because that one is really only for development.
And so, let's change that and I will duplicate this line
and then we'll call this one dev.
And then, the start one will only be node.
So, again, in your package.json, you should always
have this start script like this.
So, the node command and then your entry point.
Now, it's also important for Heroku is
that you specify these engines here.
And so, we did that before, I think,
because some package, or actually
because ESLint required it to work properly.
But, if we hadn't set it back then,
well, then we would need to really set it at this point.
Now, since we changed this file,
now, we need to commit these changes to our repository,
so let's git add package.json here.
And then, git commit.
And then, with a useful commit message.
Now, another thing that's really important
when you deploy an application to Heroku is
that you listen to the port at process.env.PORT.
So, right here in the server, we actually do that down here.
So, we specify the port variable as process.env.PORT.
And so, again, on Heroku, that's absolutely mandatory
because otherwise, it will not work at all.
So, if here, for example, we just specified
some random port, like 3000 here,
then that would really not work
and that's because behind the scenes,
Heroku will actually assign a random port
to this environment variable.
But, a bit more about that in a second
because now, we are really ready
to do the actual deployment.
And, to do that, we create a brand new Heroku project
in our project folder.
So, make sure that you really are in your root folder
and then, once you're sure you're there
and you're logged into Heroku, which we did before,
you can then write heroku create.
And, this will then create a new app basically
with a completely random name.
So, in my case, that's radiant-springs
and then this number, but your application
will, of course, have a completely different name.
Now, what this did was
to actually create a new remote branch
in our Git repository.
And, this branch is called heroku.
So, remember how before, in one of the previous lectures,
we added a remote branch pointing to GitHub
and that branch was called origin.
And so, then we pushed our code to that remote branch
using git push origin master, so like this.
Remember that?
And so, now, as I mentioned,
we have a new remote branch here, which is called heroku.
And so, really, the process of deploying our application is
as simple as pushing our code to that remote branch.
So, git push heroku master.
And, it really needs to be the master branch.
It is the only branch for which this deployment works.
But, in our case, as you see here,
we are actually in our master branch
and you can also see it down here in the corner of VS Code.
And so, that's no problem.
So, let's now run this command,
which should then take a couple of time
because, of course, it will upload all your files
that are in the repository up to Heroku.
And now, you see all of this process here going on
and so what this is doing is
that it's actually installing all our dependencies here
in our new application.
So, in our application that is now on Heroku.
So, let's wait until of this is done
and I'll see you back when this process has finished.
And so, that's done.
So, I hope you got the message, Verifying deploy... done.
So, you see, launching, and so it really means
that our application is now deployed to Heroku
onto this URL.
So, you see the build succeed.
And, really, all these messages
that I already talked about before.
And so, now, in order to open up our application,
all we need to write is heroku open.
Now, we don't expect this to work just yet
because all of our environment variables
are actually not defined
because we did exclude this configuration file here
from our Git repository.
But, still, just for the fun of it,
let's actually try to open our application.
And so, indeed, that opens up our URL,
in this case, at radiant-springs-85848.herokuapp.com.
So, basically, it's the subdomain of Heroku.
And so, again, as expected,
we actually got some error here.
And, once more, that's because our environment variables
are, at this point, not yet defined.
Now, we can also take a look at these errors
in the Heroku logs.
So, let me show you that as well.
So, heroku logs --tail.
So, here, you see state changed from storing to crashed,
so let's see what we have here.
Actually, you see the error message
that we created ourselves here.
So, UNCAUGHT EXECEPTION with this emoji
and then Shutting down...
And, you see here,
Cannot read property 'replace' of undefined.
And so, again, that's because the environment variables
are not defined at this point.
So, let's exit these logs here, again, with control C.
And so, now, let's actually define
these environment variables in order
to make our application work.
And, the way we do that is
to specify each environment variable
using a special Heroku command.
So, Heroku and other hosting platforms,
they don't use a .env file like we did here
in development for all our config variables.
So, again, here in development, we use this config.env
to put our environment variables.
But, here in Heroku, we will define them
in a different way.
But, then in our code, everything
that we have works exactly the same.
So, let's start with the NODE_ENV variable
that we need to set to production.
And so, we do that by saying heroku config:set
and then the name of the variable, NODE_ENV=production.
And, actually, this NODE_ENV variable
is actually set by default to production by Heroku.
But, still, let's make 100% sure
that it really stays this way,
even if Heroku changes something.
So, really, to be sure, let's still do this
because, as we know, a lot of our code actually depends
on this variable and it also
can make Node applications run up to three times faster.
I think we talked about that before.
So, the importance of setting NODE_ENV to production.
But, anyway, it's a good thing to do it actually.
So, just hit return and it will
then set this environment variable
and restart the application.
And so, now, all we need to do is
to basically do this for all
of the relevant environment variables.
So, we did NODE_ENV, now, the port, we will not set it
because, as I mentioned before,
Heroku will actually, behind the scenes,
assign a random port to our application.
And so, next up, let's add the database.
And, actually, let's copy all of this.
And then, just paste it here.
And, that didn't really work,
so let's try that with some quotes here maybe.
Yeah, that looks much better.
Next up, the database password.
Let's clear it here.
Next up, the secret.
So, just like this.
And so, this is a bit boring to do it for all of them,
but, well, we only have to do it once,
so it's not really a big deal.
Now, we also need this one here
because all of this here is just for mailtrap
and we actually do not need that in production
because remember that when we're in production,
all our emails are actually sent using SENDGRID
and no longer using mailtrap.
And so, in our Heroku application,
we do not need these for variables.
But, we do need the email from.
So, that's our next one.
Then, we need to SENDGRID_USERNAME
as well as the password.
And finally, our secret stripe key.
And, with this, I think we have all
our relevant variables set here.
And so, let's try again, heroku open.
And, that looks perfect, beautiful.
So, really, our application is now deployed
onto radiant-springs or whatever you have in your case
and everything seems to be working beautifully.
So, all our images are here.
Let's take a look at a single page here as well.
And, indeed, all of that works just beautifully.
So, our map also shows up.
And, yeah, it seems to work just fine.
And, the fact that all of this works just so seamlessly
also shows the beauty
of having a hosted database all the time
also during development
because no matter if we're in development
or in production, our database just keeps working.
So, if we had used a local database,
then now, we would have to export all the data
from that local database then create a hosted database
and upload all the data onto that hosted database.
And so, that would, of course, create an extra step
and some extra work.
And, again, with this, it just works.
So, that's a very nice developer experience right there.
So, let's see if we can also log in here,
which should, of course, be possible
with laura@example 2, 3, 4.
And, it seems so.
So, beautiful.
Let's see if all our book tours are still here,
but why wouldn't they?
And, indeed, well, it's actually only one,
but, indeed, it is here.
So, great, that's absolutely fantastic.
And now, let's just take a quick look
into our Heroku dashboard.
So, here, let's open up Heroku.
Close these two.
And so, since we logged in previously here,
this should automatically take us to the dashboard
and that dashboard will then show you, by default,
all the applications that you have currently deployed.
And so, the one that we just deployed is
this radiant-springs here.
So, let's open that one up.
Then, here, on the right side,
you can see all the activity.
For example, setting all these configuration variables
that we just did.
You have your resources and many of this is only interesting
if you have a paid dyno.
And, a dyno is really just the term
that Heroku uses basically for a container
in which your application runs.
So, we have some metrics where we can see
who is accessing the app, but, once more,
that only works if you have a hobby
or a professional dyno.
But, what really matters here is the settings
and so here, I wanted to show you
that we can reveal the configuration variables.
And so, instead of changing or adding them
in the command line, we could also do so right here.
So, these are all of them that we just added
in the command line.
Then, another very important thing is up here in More,
we can actually see our logs.
So, let's wait for it here.
And so, Heroku then gives you all of these loggings really
for everything that happens in your application.
So, when we opened up the app in the browser,
it requested all of these files
as you can see here, for example.
So, really, everything that's going on
will be right here in these logs.
And so, if your app crashes or if something happens
and basically everything for which we used a console.log
will then end up showing here in these logs.
And so, these were the Heroku logs
that I mentioned in one of the previous lectures.
Now, one thing that we can do is
to actually change the name of our application.
So, instead of it being called this random name,
we can give it a more meaningful name.
Now, we could do that here, but that would
then kind of mess up our application in the terminal
on our local computer.
And so, instead, what we do is
to change the name directly here.
So, let's say, heroku apps:rename, like this,
and then the new name for the application.
And, I will call it natours,
but you, of course, will then not be able
to also call it natours because that subdomain
will then already be taken.
So, you can then call it natours with your name
or with your username or really any other word
that you'd like.
So, I'll go ahead and now, really call it natours.
Oh, but I see that someone already took that name from me,
so that's unfortunate.
But, probably that's because I already used the name natours
in a project in another course.
And so, someone must have taken it.
So, let's call it natoursapp and, of course,
I need to then write everything else.
So, heroku apps:rename
and then natoursapp.
So, hopefully, no one took this one.
And, it seems it's doing something,
but someone has already taken that one as well.
Well, that's really weird.
So, I guess I have a lot of students out there
who post their apps to Heroku,
so I will just follow the example that I gave earlier
and will add my name here.
So, third try with natours-jonas.
So, yeah, let's hope that the third time, it will work.
So, let's wait for it here.
And, that's it.
So, let's try heroku open.
All right, and here we go.
And, now, at this point, the old version
will actually no longer work.
So, this one is gone, let's close it.
Let's go back to the Personal here.
And so, yeah, here we go.
That is natours-jonas.
Great, so our website is now officially in production.
Now, another thing that I want to do here is
to actually update the Postman environment variable
for production, remember that?
So, let's go ahead and copy this here.
And, also not how actually automatically
we are on https here on Heroku.
So, Heroku does all the SSL certificate management
for us behind the scenes so that our page is always secure,
always with https.
So, that's another really nice feature of Heroku.
So, now, here in Postman,
let's go ahead and change this production and the URL.
Of course, this one was just a placeholder.
And, instead, what we want is now our real production URL.
And, I'm not sure if it is correct like this,
but just update and compare it with the development one.
But, indeed, it is.
So, it needs to end with this slash.
And so, the one that we just did does that as well.
So, let's update, close, and now,
all we need to do here is to change from development
to this production natours environment.
And so, now, if, for example, I try to get Get All Tours,
which is actually the one that we had open,
then let's see if that works.
Let's turn all of this off.
And, indeed, it does, great.
Let's see if we can actually
see the complete URL somewhere here.
Well, it doesn't really show.
But, anyway, it doesn't really matter
because we still know that it did actually work.
So, we now really got this data back here
from our production API and we can easily prove that
because the development version is currently
not even running.
So, if we send this, we get this error.
So, once more, really, congratulations
for almost now finishing the project at this point.
It's already at the live server
and you can, at this point, share your project
with the world and show everyone what you've accomplished
after all of this work building this project.
Just one more really small thing that I wanted to do here,
as I said in the last lecture, is to test that compression.
So, let's just search for test gzip compression here.
And then, that should be this first result here,
Gift of Speed.
And so, if we enter our URL here and then check, let's see.
And, we see GZIP Is Enabled.
And so, that is because of that compression package
that we used in the last lecture.
So, originally, our page would have 14K,
but then compressed, it's 2K.
And, of course, that doesn't make a big difference
in this case, but for a much larger page, of course,
it can really make a difference for your users.
Perfect, now, in the next couple of videos,
there's only a couple of small things
that we still need to fix here.
And so, we will do that
over the next two or three lectures though.
And so, after that is
when the project is really 100% finished.