Now that was the static site.
For the dynamic website,
we can't use Netlify drop because now we don't
just have a bunch of browser site code.
We also have all the backend code.
We now need a hosting provider that allows us
to host a Node.js site.
Now if you search for Node.js hosting,
you'll find many possible hosting providers.
One provider which I like for courses like this one,
because you can get started with it for free is Heroku.
Heroku is also a hosting provider
which does not just support Node.js,
but as you can see down there also
other programming languages and it makes deploying websites,
no matter which programming language you use
really, really easy.
Again, as always, you wanna dive
into the official documentation and also the pricing pages
if you are a serious about using that.
And if you have a real website that you wanna host.
Here, I'll show you a brief example for this dynamic site
I provided to you.
And for this to get started,
we can click on documentation and then here Node.js,
and here we can now learn how we can get started
with Node.js on Heroku.
For example, by clicking on getting started
on Heroku with Node.js.
And the first step you wanna go through here is
that you need to install the Heroku installer
on your local machine.
This is a utility tool which will push our local code
to Heroku's servers for us.
So here it's not a drag and drop interface
as we had it a couple of minutes ago,
instead here we need this extra tool.
It's also worth noting that this extra tool requires Git.
This version controlled system to
which we also introduced you earlier in the course.
So you wanna make sure that you installed
the data tool before.
If you haven't, you will find links here
that will walk you through the Git installation.
Then you can download the installer for your operating
system here and I'm on Mac OS but on Windows,
you would also get a straightforward installer
which you can download.
And then you'll get a default installer
for which you can walk which we'll install
this Heroku tool on your system.
Like this.
Now, once it was installed,
we can move on and next we need to log
into our Heroku account with that tool
that we installed by running this command in the terminal
or the command prompt.
Of course, for this we first of all
have to create such a Heroku account
and therefore I will indeed sign up here.
And once you did that, once you did sign up,
you can run this command.
For this here, I'll go back into my project
and open the terminal there.
And I'll actually cd into the dynamic site folder first.
And then here in this terminal, I will run Heroku login.
This should work.
If the Heroku command is not found,
make sure you went through that Heroku installers
successfully and maybe try restarting your system
before you try this again.
Now here, we need to press any key.
This will now open the browser and there we can now log
into Heroku which I did real quick here.
And therefore now here,
it also says that we are logged in.
Now as a next step,
we need to make sure that we use a node version greater
than 10 which you can check
by typing node dash dash version.
and I use 16 dot six dot two.
So that will be fine.
And all these other settings here should
be satisfied as well.
You specifically wanna make sure
that you have Git installed as mentioned before.
Otherwise you wanna install it first.
Now we can move on to the next step by clicking
on this button here and here we now actually get
an example application which I don't wanna use.
Instead, I'll move on to a different article
which shows us how to deploy a node application
to Heroku in general.
Now, what it then tells us here is that we, first of all,
need to have Git installed.
Yes we know that and that.
And that we then need to track our code with
Git and again, we learned about Git before.
Now to track our code with Git,
I did add a Git ignore file in this dynamic site folder
where I ignore node modules.
And actually I'll also ignore this DS store file thing
which only exists on Mac OS though.
And then we can run Git in it.
And then after that, Got add dot git commit,
initial commit, for example.
And with that, we now saved a code snapshot with Git.
So to say, in case this is unclear.
You can just follow along with the commands and you can
then take a look at this full course section,
which we have in this course
where you can learn more about Git.
Now that we did start tracking our code with Git though,
we can move on to the second step
and add a Heroku Git remote,
which simply means that we add a remote cloud-based code
repository to our project,
to which we can push our code with help of Git.
Very often, GitHub is used for this.
This is a great place to store your code remotely
and to collaborate on it.
We've got a full Git course,
if you want to learn more about that.
Here however, we'll add Heroku
and therefore in Heroku's servers as a remote.
So did we can push our code with help of
that Heroku command line tool,
which uses Git under the hood directly to Heroku's servers.
Now, here we find a link on how that works.
Of course, I'll also show you how it works.
All we need to do in the end is run Heroku create inside
of our project folder.
So here, back in my project folder, I now run Heroku create.
And then back in the other documentation,
we wanna add such a Procfile
which is the in the end the configuration file
for Heroku that specifically tells Heroku
how to start our server.
And that's very important because thus far,
we of course always use the script and packaged up JSON
for this, which use nodemon.
Nodemon is a great tool for development,
since it automatically restarts our server
whenever the code changes
but it's not for a deployed website because they're on
that server, on that remote machine.
We won't have any code changes.
There we wanna run our app.js file with node itself
and not with nodemon.
Therefor we now add a Procfile
and it's really just a file named Procfile
with no file extension.
And in there you type web and then node app.js.
This tells Heroku that for this website in the end,
it should start the server by running node
and then targeting the app.js file.
And that's also what you find
at the official documentation here.
Now you also have to make a change to the code though,
as it also tells you here,
you need to listen on the correct port.
And that's very important.
In app.js, we are listening on port 3000.
Now this was great for a local development,
since this is a port which is typically not occupied.
Now, when you wanna expose your website to real visitors,
you typically don't use this port though.
Instead for websites,
the default port for exposing them to the world is 80.
Or if you're using HTTPS,
which is a more secure version of the HDP protocol,
you use four for free, typically.
However, you don't set this up yourself here.
Instead, we'll let Heroku do that for us
because they might be using some other port internally
and then just proxy which means in the end
forward that two 80 or four for free for us.
And hence we wanna inject the port dynamically
and gets to concrete port value from Heroku.
For this we can use an environment variable
as we're already doing it here in database JS
for the MongoDB URL.
I'm now going to do the same here in app JS.
Here, maybe at the top,
though the exact position doesn't matter.
I'll add a port variable and set this to 3000.
And then I'll check if processed or port is set
because Heroku, as they tell us in their documentation,
will provide this port environment variable for us.
So therefore if we have this,
which means this is running in production
on this remote machine, then I'll set this port variable.
Of course, we can also write a lowercase here by the way,
to avoid confusion, it doesn't matter.
Both would be fine.
Equal to processed on env dot port.
Now, of course, this name, this port here,
that's not up to you because that's the name Heroku
will use when it sets that variable.
And then we can use this port variable here for listening so
that in local development, we still use 3000
but once it was deployed and this environment variable
is set, we use that value instead.
That's another important step here.
Now, once that is completed,
we also have to take care about our database.
Now Heroku offers managed databases, for example,
for SQL in this case, Postgres SQL
which is an alternative to mySQL.
And I already mentioned before that for MongoDB,
which we are using here, I wanna use MongoDB Atlas.
So therefore before we actually deploy
this and push our code to Heroku, we wanna make sure
that we got the this MongoDB Atlas
hosted database server up and running.
Otherwise our website won't be able
to connect to it after it was deployed.