So we did take care about the database
as a next step,
we can now deploy our code.
And for this, we should,
first of all,
go through the Heroku language specific setup instructions.
In our case,
we should go through to a specific note JS deployment
instructions,
though no worries,
that will be rather simple.
Now here,
we learned that we should have the dependencies that we need
in package.Json.
And we do have that
because we always use the NPM installed
for adding them,
so they were automatically added.
This is now all the where the difference
between dependencies and dev dependencies
becomes important because Heroku will,
once we pushed our code to Heroku,
automatically install all the dependencies,
but not the dev dependencies,
because the idea behind the dev dependencies is that,
as their name suggests,
we only need them during development.
That's why it's so important to have all the
key dependencies in this dependencies node
in packaged.json,
because Heroku will use that to install all the
dependencies after we pushed our code.
So that's something we have to take care about,
and that is something we did take care about.
As a next step,
we can specify the specific node version we want to use.
Now, of course,
we have a certain version installed locally,
we can see it if we type node--version
but just because we have that locally,
does not mean that Heroku will use the exact
same version.
It might be using an older version.
And if we are then using a node JS feature that only exists
in the latest version,
then that older version Heroku might be using
might not be enough.
Now here, that's not the case.
Still,
you might want to add an extra node here
to your package.json file anywhere in there.
And that would be the engines node,
the engines key value pair,
just as mentioned here in the Heroku documentation,
where you set the node version you want to use.
So in the engines object here,
we can set node.
And in my case, I'll set it to 16.X to use that version,
or to be precise,
to force Heroku to use that version for executing our code.
Now, once that is done,
you can specify a start script,
if you didn't add a Procfile.
So if no Procfile exists,
then you should update your start script
to use node instead of node mon.
But since I do have a Procfile,
that will be prioritized by Heroku
and this command will be executed instead.
So we should be fine regarding that.
And we don't need to update our start script.
Now we can then also test this locally
with the Heroku local web command
to preview this website locally
as Heroku would execute it on the server,
but I'll skip this here.
And instead I'll make sure that we have the
get ignore file setup properly.
And for this,
we can copy the settings from here
and override our get ignore file with the configuration
from there though,
the configuration we had before would have also worked.
And now we can deploy our application to Heroku
by first of all,
adding a new commit
logging in, which we already did,
creating, which we already did.
And therefore pushing is the step we now need to do.
So, first of all,
I'll create a never commit with all the changes we applied,
get commit finalized deployment.
And after doing this, we can run this command here,
get push Heroku main
to push our code from our local machine
to Heroku's servers.
Though actually, in my case,
my main branch is still called master.
So I'll have to change this.
You in the end can run get branch
to see what your branch name is.
And if this this main, this command will work.
If it's master, as it is here for me,
you should change this to master.
And this will now push our code to Heroku's servers.
And then there,
we automatically will get this built output
where Heroku will now install all dependencies
and then start our server.
Though, starting that server
will actually fail here,
as you will see soon,
because connecting to the database will fail.
Now we get the URL automatically here
in the output where we should be able to
visit our deployed website.
But if you entered this,
you won't see anything there,
because as I just mentioned,
deployment will fail
because what we need to do,
since we used environment variables,
is we show up log into Heroku
and go to dashboard.heroku.com,
or just to heroku.com,
and I'll accept this here,
and now here,
I got two applications actually,
because I did this twice on different machines.
This one is the one I just pushed.
So you probably only have one
application here.
And here on this screen
you'll find more information about your website,
your application, and you can configure it.
And most importantly,
here we can also add environment variables.
Here under config vars.
Here, we now need to add this environment variable,
which we expect in database JS
the MONGODB URL variable,
not the process.env part,
that's not JS specific,
just the name after .env.
and that is now what we add here as a key,
and as a value,
we take this URL here from MongoDB atlas,
and we paste this in here as a value though,
you have to make sure you use the correct username here,
and you replace the password with the concrete password
you set up for this MongoDB database user.
And then click add
that's important.
We could have done that locally with that Heroku tool
as well,
but I wanted to also show you this interface
and where you could set environment variables there.
Now, there are more things you can configure here.
For example,
you could add a SSL certificate for HTTPS serving,
which is recommended if this would be a serious website.
You've got documentation and easy to use process here
on Heroku to add this certificate,
to add extra security to your website.
And you can also add a custom domain here
just as you could do it on Netlify.
As I mentioned earlier,
most hosting providers offer features like this.
Now here, that's all fine, though.
I'll instead go here to more
and actually click restart all dynos.
A dyno is just a remote machine,
a server in Heroku's world.
And with that, I restart my website,
now that I got the updated environment variable.
Now, after doing that,
maybe after waiting a couple of seconds,
you should be able to click open app,
and now you should see your website
and you can also click this button here,
and when you click that button,
you see the counter increases.
And if you reload,
of course,
it's still there because this is now dynamic
with our service site code.
Now, however,
as you can tell by the URL,
not running on our local machine,
but instead on a remote machine provided by Heroku.
And now as mentioned,
you could dive deeper into Heroku
into its documentation,
add a custom domain, and so on,
and then you would have a real website hosting
for a real website.