‫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.