- Read Tutorial
- Watch Guide Video
Now technically we're not going to be installing Heroku because it's a cloud-based service but we're going to install what is called The Heroku CLI which stands for the command line interface. And so essentially what this means is that you can communicate with Heroku and have a connection with the Heroku servers from your terminal.
So if you are following along then go down here where it says Ubuntu and Debian and we are going to copy this we get command here
and switch back and paste this in and give the password and it's going to go out and install the system for us.
Now if everything works on this installation then we are going to have the ability to log in to a Heroku account directly from our terminal and from that point regardless of what kind of stack you're learning whether it is javascript with node and react or if it's ruby on rails or Python then you're going to be able to deploy those applications directly to Heroku and get them live and on the web.
So it looks like everything here worked if you switch back to the docs it doesn't really look like we have to do anything else for this installation. You can see right here where you also could use NPM and install it that way.
But we have that already on our system so we can move ahead to getting started. Now if I come here in order to get started you need to actually create a Heroku account so I already have a Heroku account but you can follow along and use one as well. So I'll do that and so I'm going to sign up for one here
and so as you're going through this. The account is free but if I remember back to the last time I created an account it may ask for your credit card and it's just to make sure that spammers don't just go and slam up a thousand servers during a free trial period or anything like that but the only way they will charge you is if you tell them that you want to have a paid server so you can feel free to enter all of your information here and you're not going to be just charged randomly. Let's say I'll call this devenv@devcamp.com. And then I'm not gonna put a company name. They want to know a role so you can put whatever you want and then the language it doesn't matter you can pick out any of these. In other words, if you pick out Ruby it doesn't mean that you can't deploy python. So just pick out anyone that you want and then verify that you're not a robot.
Oh, and I hate these things so much. Okay. Select all the images with mountains or hills and let's see this one appears to, so does as this one. I can't believe this is happening during the tutorial but it is what it is. I missed one so select all images of mountains or hills. I guess this might be a mountain too.
There we go! We are not a robot. And so now we can finally create our account. So almost there. It's saying that we need to check this account.
and so I am going to just switch over into windows. And there you go, confirm the Heroku account.
And so this is where it's going to get a little tricky because I don't have the clipboard connected between the two. So I'm going to pause the video here and then I'm going to have it switched over in my in my actual installation. So if you're following along and this was sent your email probably the fastest way of doing it. Actually, I'm not going to pause the video I'll just open this up inside of the virtual machine. So come here and go to my gmail account which I am not logged into on my virtual machine and then I'm going to pause this as I type everything in and come back when I have verified it.
Okay, and we are back and now I'm just going to click this link to verify the account and then it's going to ask for a password. Now, in this case, I would definitely recommend giving a secure strong password because anyone that could hack into this account would have the ability to access all of your applications, and also even communicate with the server, have access to the databases, have access to your API keys, everything like that so I would highly recommend making sure that it is secure.
So I'm going to click here to proceed
and we have a brand new account right here and so it looks like everything's working.
And it didn't ask for the credit card yet so I think we are all good to go. So let's make sure that we can connect our CLI so our local machine with Heroku. So I'm going to come here to the terminal and type heroku login
and now it's going to ask me for my username and passwords so I believe that was I just created a wildcard password. So let me actually make sure that I had the right name. Yes so it's a devenv and I'm just going to paste this in devenv@devcamp.com
and then type in whatever password that you typed in when you created the account and hit enter. And there we go we are logged in.
So now we are going to actually test this and I have something fun for us. If you followed along with the ReactTester when I generated that application. You are actually because we need to make sure this is all working. You're going to deploy your first application right now! Regardless of what Stack you're learning, you are going to have a react entire project live on heroku on a live web server. So that should be fun.
Now before we can do that let's make sure it's working. So I'm going to type npm install. Make sure you're in the React Tester. The project that we created when we tested out the node generator and then this is going to install all of the dependencies. Now once again what I'm doing right now is not related to Heroku at all. This is so that we can test to make sure that our Heroku installation is working completely.
We are pretty confident it's working because we are able to login to Heroku but I do not want to give you a half-hearted kind of installation guide. I want to take you all the way from beginning all the way through to make sure we can actually deploy an application to the Web.
It is a done so that was quick. So now if I have the application make sure it's working locally by just typing NPM start. This will also test to make sure everything is working on NPM and if you're not familiar with react don't worry as you may have noticed we didn't actually touch a line of code. The generator does all of that part for you. So now we can just come to a local host 3000 and if everything's working your devcamp react starter kit should be shown right here. So so far so good that means we have our application working.
And now the way that we can test Heroku is by saying heroku create and then we can give this a name so I can just say devenvreacttester
. Now because I'm taking this name this means that this name is going to be reserved on heroku so you'll have to use your own. And in fact I'm going to use my initials right in front of it just to make sure I'm not taking the super cool name of devenvreacttester away from anybody else and if I type enter this is going to go on to heroku and that worked.
So this created a Heroku app and so if you navigate to this URL then you wouldn't have the app there yet but you would have the application that Heroku has. Now we need to actually push it this is a good exercise because we are combining everything that we've learned in this section. We need to create to git repository so I'll say git init
and then we need to add everything to it. So I'm gonna say git add .
and I'm not following best practices right now just as an FYI. If you follow along in my git course I will show you how to do things like hiding secure items and you wouldn't put your entire node modules directory on git or anything like that. But for right now this is pretty much a throwaway application it's just to make sure everything's working.
So now that we've added everything we can say git commit -m
and say "Testing out heroku"
and now all of that looks like it is going through at least so far. Yes it is.
So we have our repository and the next step we're going to take is one that you usually will not have to take if you are using github. But for right now we're not going to create a github remote or anything like that. Instead, we're going to simply come over here and log into our dashboard. If you click on refresh you should see an application now and we do. So you can see we have this jdhdevenvreacttester
and so this has all the details you can see you're not being charged anything for it. And everything looks like it's in working order.
Now if I click on, let's see deploy I believe, yes so we need to do here is we need to connect to our local git so our local git repo with this server. And so the Heroku system may know about us but now we need to actually point our app to it. So in order to do that we already created our init and all of that kind of good stuff but now we need to create a remote. If you remember how we created a remote with github this is very similar.
And so now if I take that
And come back here to the terminal and paste it in this is going to create a remote that points out our application
and the way you can test this out is by saying git remote -v
and you can see that we have that there.
So if I type git push heroku master
this is going to push our entire application so this entire react application up to Heroku and if everything works and everything is set up properly then that application that you saw on our local virtual machine will actually be on heroku. And then you can tell all your friends you are already a react developer and I bet I'd probably learn a little bit more react before you did that.
So what the systems doing and this is why Heroku is a very very helpful tool in a number of situations is performing a deployment is not a trivial kind of activity. Usually, you have to build and configure a server kind of like how we built and configured our entire system throughout this section of the course. You have to install dependency is like a node and Linux you have to have an operating system and then all kinds of other things even beyond what we've done in order to get it working so that you can go and access it and other people can access it on the Web.
And so what Heroku is doing is it's configuring all of that for us. So it's pushing up the code, it's building all of the dependencies baking them into the system, it's compressing it, and everything that you would need with a real live web application. So we definitely have Heroku installed properly on the system because everything is working and it looks like everything is live.
So if you want a shortcut, anytime that you are in Ubuntu if you hover over a link it will actually allow you to click and open up the browser.
Look at that you have created a live site so you have whatever the app name is .herokuapp.com
and anyone else in the world can go and access your live site. So that is all you need to do to build out an entire deployment engine right on your virtual machine. So great job if you went through that, you now have the ability to work with any stack and deploy those applications to the live Web.