All right, guys, here is the moment of truth.
It's no fun making a newsletter sign up webapp if we can only sign up ourselves through localhost,
right.
So let's deploy our Web app so that we can send anyone the link and they can access our server to sign
up to our newsletter and get rid of this localhost business because we're no longer just deploying static
websites.
We can't use GitHub pages or any servers that only support static content unless we want to build our
own service stack and live with noisy servers running 24/7.
And believe me, it's really noisy and it's really hot.
I've done this before and it's a lot of fun, but nobody will ever want to live with you unless you're
in Iceland or something.
Buying and setting up your own servers is a lot of work because you need to keep it running 24/7.
You need to maintain the software and solve any problems that you come across.
And there's a lot of problems.
Instead, we're going to rent some servers from somebody else so they can have all of the hassle and
all the pain of keeping our servers up and making sure that people can access it over the World Wide
Web.
So some of the best people who provide the service is Heroku.
And the best part is they let you rent their servers for free so you can create up to five project for
free with them.
And they will host your server to keep your website live on the Internet and want your app gets popular
and you have lots and lots of requests to your server.
Then you can scale it up dynamically with Hiroku pretty much just by using a slider bar.
And immediately you can get access to more servers who can respond to requests from more browsers.
And this is when you've made it in the world and you've become Pokémon go or some huge hit.
They can support your success as well.
And only at that stage do you start paying them for that privilege.
So obviously the first step is signing up for their services and you don't have to provide a credit
card and it's completely free to sign up.
So if you haven't got a Hiroku account, then sign up right now.
And once you have done, then you can go ahead and log into your account and you will land on your dashboard.
Now, Hiroku has really good documentation, which you can find at Def Center dot Heroku dot com, and
we can click on the get started button to take a look at their step by step guide for deploying our
first app.
So we're going to choose no Geass because that's what our code is based on and we're going to use that
step by step guide to upload our code and make our server go life.
So the first step is to download the Hiroku command line interface.
So when you click on it, it should automatically choose for you the right version, be it Mac or Windows
or other systems.
And once you've gone through the wizard and installed it, then you can begin to use the Hiroku command
from your command SQL.
So that's going to be hyper for us.
So once it's installed, you should be able to write Hiroku log in and you will need to enter your email
and password that you signed up to Hiroku with.
So don't forget those things.
Now, once you've authenticated, then we can go ahead and do the other version checks.
So for example, you can check for the version of anything you've installed just by writing the item,
say Heroku and you can say dash dash version.
So our Hiroku is currently up to date and it's running seven point zero point forty one.
Now, the next thing is that they're saying that this tutorial will work for any version of node greater
than eight.
So we can check that on.
Node version is greater than eight.
And it is it's eight point eleven point one.
So perfect.
Now, the other thing is that NPM is installed with node.
So let's make sure that we've actually got NPM so we can say NPM Dasch version.
And of course, if you have a version, then that means that this item is obviously installed.
The last thing to check is gett and to make sure that we've installed it.
And if you haven't, you can simply click on this link and you can go ahead and download for your system
and install it.
So we're going to be covering Ghiz and GitHub in a lot more detail in the next module.
But at the moment, we're just going to use this tutorial to have everything up and running.
And once you've checked all three of these and everything's ready to go, then we can click and confirm
and go to the next step.
So the next step is to prepare our.
So in their case, they're asking you to use their sample app, which is something that they've created,
and you can see the code for it over here, it's got some noad code and allows you to test out Hiroku.
But in our case, we actually want to deploy our current app, which is the newsletter sign up website.
So we're not going to follow their steps here.
Instead, we're going to prepare our own app.
Now, there's a couple of things that you have to do in order to update it so that it will work on Heroku.
And the first thing is inside your app.
Currently we are listening on a local port, which is the Port 3000.
Now, once we upload our code onto Heroku servers, then our code will be running on their system and
their server might not want to use the Port 3000.
So the way that Hiroku works is that it might pick and choose a port for you.
So to enable this, you have to tap into something called process dot, EMV, dot port and the port
is in caps.
So this is basically a dynamic port that Heroku will define on the go.
So at any given point, it might decide to deploy your app to Port 3000 or 5000 or whatever it is on
their local system.
So by changing our port to this, it'll allow us to work seamlessly with their system.
But the problem is that if we try to run this app now locally using localhost, then our computer won't
know what this is all about because this process object is defined by Hiroku.
So what we can do here, if we want to run it, both testing locally as well as deploying to Hiroku,
if we want to do that simultaneously, then we can tell our app to listen on this port for Hiroku,
but also add an OR to tell it that you can listen on 3000 when we're running locally.
So by putting in this as the port, then our app will work both on Hiroku as well as our local system.
So now that we've set that, let's go ahead and hit save.
And the next thing that we have the change is we need to create a profile.
This is the file that Hiroku is going to check to see how to launch your app.
Now, currently we've been launching our app with no money, just so that it's constantly refreshing
in the background and updating any changes.
But normally we would runner up using the command node and then the name of our server file, which
in our case is app.
So in order for Heroku to figure out what command to run in order to launch the app, we need to specify
this.
In this format, we need to say Web kolon, which is the process type, and then the command that we
need to use in order to launch our app.
So let's go ahead and add this to our site.
So I'm going to cross over to our project, which is currently in my case, under desktop slash newsletter,
sign up.
And then once I'm inside this project directory, then I'm going to create this proc file.
Now, it's really important that if you read their documentation on proc file, it can't be named something
like proc file, dot text.
It just has to be called project file with no extensions and it has to be spelled exactly the same way
with P.
So just make sure that you're careful when you type this in and when you create this file.
Now that we've created this file, let's right click to open it using Atem and inside here we're going
to type Web Kolon and then it's how we're going to start our process which is going to be node apgar's.
So this is all that we need to tell Hiroku how to launch our app and also which file actually contains
our server code.
So sometimes you might decide to name this indexed JS or Apgar's or server Dodgers, and Hiroku doesn't
know which it is that you want to use.
So it's important to add this file and this line.
And the next step is to save our work, to get in order to do this.
The first thing is to make sure that we are in the right place.
So make sure that this part, which comes after your laptop's name, is at the location of your project.
So this should be the project folders name.
If it's not the make sure that you add to it and remember that you can drag and drop folders into the
terminal so that it will navigate to that address.
And that address has to be the folder that contains all of your package, JSON node modules and APGAR'S.
This is the project folder and we've confirmed that we are at that position and the next thing we're
going to do is we're going to say get.
It and this will initialise a brand new git repository now it is a swear word in English, but it's
also a way of allowing you to save all the different versions of your app or your code.
So remember when you used to write essays in high school or in or for college, you would save the essay
and you would say essay final and then you realize that there's some changes and then it becomes essay
final, final, and then it gets to essay Final four, real essay, definitely final.
And at some point it just gets out of control and you don't know which one's actually final.
This has happened to me so many times, but git and version control allows you to save each and every
time point of your work.
So it's almost like having a time machine for all of your projects so that you can roll back to any
time in the past and you can create experimental branches and mess around with your code.
And there's going to be all of that goodness that's coming up in the next module.
But for now, we're going to use Git and we're going to add all of our files that are in this current
repository.
So that's been added to our version control.
And the next step is we're going to commit our changes to this current version.
So this key word means that we are starting a new version, say, version three, or in our case, it's
actually version one, because we haven't been committing all of our changes.
And we can also get to as a message by adding the M flag.
So Dash M and then we're going to specify a string, which is our message.
So we're going to say first, commit or any message you wish, and then we're going to hit enter and
all of our files and everything gets committed.
So now that we've done that, we are in sync with the tutorial and we can go to the next step.
Now, the next step is to deploy this app, and they want you to create a new app on Hiroku using the
key word Hiroku create.
Now, at this stage, you have to be logged in in order for this to succeed.
If you aren't ill, ask you for your Heroku password and username again.
But if everything looks green and blue and not red, then that means everything's working fine.
So now they've created your brand new container.
So your brand new server has been created at this address HDB Saltpetre Heroku app Dotcom.
And you can check it out by just clicking on it.
And you can see this is welcome to your new app.
But it doesn't have any content yet because we haven't pushed it over.
So let's continue with their tutorial.
The final thing that we have to do before we can get our app life is to write, get push her Roku master
and this will push our local version that's been stored using it to her Roku.
So let's try it out, get push her Roku master, and that will take a little bit of time of uploading
all of our local files relating to on node app and it will send that to her Roku's servers on the Internet.
And once it's done, it will show you verifying deploy done and we can access it at the previous location
that we had.
So let's refresh this page and just a word of warning.
You might get an application error when you try to load up the site immediately.
Now, it's important that you give Heroku just a few minutes for it to set up all of this fancy, complicated
stuff for you behind the scenes and come back to it maybe after five or 10 minutes.
So this is our moment of truth.
Let's go ahead and test our app that is running on the web and see if this works.
So I'm going to click sign me up.
Awesome.
You've been successfully sign up to the newsletter, and if I refresh on my MailChimp, then I can see
that my latest person has been added from a live and up and running website.
So if you've gotten to this point and everything is working just as it is, then it's time to really
pat yourself on the back, because we did a lot of really complex things just now in this module.
And without tools such as Hiroku or Noad or Express, we would have spent a month or two writing the
code and then maybe another two months building our own service stack.
This is really, really cool what we have done.
But if you had any problems doing any of that, make sure that you check the Heroku logs and it will
usually give you an indication of what might have gone wrong.
So, for example, say, if I forgot to change the port to process Emberg port, then you might end
up with a page that looks something like this.
And in that case, of course, it's going back to the Hiroku logs, which will help you.
Then it'll say something like Web process failed to bind to port within 60 seconds of launch.
And it didn't work, basically.
And essentially it's trying and trying again, but it can't bind to the port that Heroku needs to bind
it to.
And that's all because of forgetting this step.
And in other cases, you might have forgotten to add a profile or you might have misspelled the profile
or you might have not added the actual name of your server, or you might have some typos here.
And again, you will see the crash logs by using the Hiroku logs command.
So this is really, really helpful to diagnose what might have gone wrong.
But once you are done and you have completed your app, then updating your app is as simple as going
into here, making some changes.
So, for example, let's change our success page to Brillion instead of awesome because awesome is really
awesomely overused.
And in order to push those updates to Hiroku, all you have to do is again use git add to add your changes,
get commit to save this current version.
So this current version is different because I changed the success page each one and now I can again
do get push to Hiroku Master and that will update my website with the changes.
So that includes the change to the each one in the success page.
Now once that is done, I can head over to my website to go and check it out because this is no longer
running on the localhost.
I can share this Jarrel with anybody and they can sign up to my newsletter.
So this is a good time to mention that if you want to sign up to the App Brewery's newsletter, then
be sure to head over to approve slash P. Slash newsletter.
And we only send this out once a month so that we can collect all of the best stuff that happened during
the month.
And we will send you this short and sweet newsletter that will hopefully teach you five new things every
month about programming, design up cool new tools to try and also the app showcase of the best things
that our students have built in this month.
So that's just a little plug from me.
I hope you enjoyed building this awesome project.
And in the next module we're going to be looking into GitHub and get to learn much more about version
control and how all of this magic actually works.
So all of that and more.
I'll see you on the next module.
Before we start deploying.