All language subtitles for 006 Deploying Our App to Heroku_Downloadly.ir_en

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.