Deploy your first App with Heroku and Node.js

hey welcome I'm Johnny and today I'm gonna show you how to deploy a simple node app on Heroku so my app over here is really simple it's a chat app that runs on node and Express and WebSockets and a really simple HTML page with some jQuery and a file and all it really does is allow me to send messages to myself and I'm gonna deploy this app to Heroku so that instead of having it local locally run here on my local host I can have it run on a link that I can send to my friends so the first thing I want to do is go to Heroku comm and all you need to do is create an account you can just click sign up for free enter your information and for primary development language choose nodejs because that's what we'll be using but really you can change that later so don't worry too much about it I'm gonna skip this because I already have an account but once you have filled in your information you're gonna get an email for you to confirm your email address and then you'll be set up it shouldn't take more than a couple minutes and then once you've done that you can come back and login once you've logged in go to the top right corner of your dashboard - this button that says new and that's what's going to allow you to create a new app so I'm gonna create a new app and I'm gonna call it they call it whatever you want really something that's relevant and it'll tell you the name is taken or not so I'm gonna call my chat app JK create it and then once you're in the dashboard the next thing you want to do is get the Heroku CLI and you can find that in this link right over here I'm gonna click that and it's going to give me the links for the different downloads depending on whatever OS I'm on so the simplest way is to download the installer I'm gonna download it and once it's downloaded I'm gonna click it and open it it's gonna look a little something like this I'm not going to go through the steps because I already have that one on my computer as well but it shouldn't take too long once you have the CLI downloaded you should be able to access your Heroku account through the terminal so I have here in my vs code my interior terminal and I'm going to type in Heroku login it's gonna ask me for my information and I'm gonna type in Johnny K underscore 78 oh cool and it'll say logged in as Johnny canvas course 7e AHA Balcom so it's successful but it doesn't mean that we've connected the app to our Heroku yet to our actual repository yet first thing you want to do is make sure that your app is initialized as a git repository and just to make sure it is you can check get status and here I can see the status of my repository if it isn't you can always just do git init get I an IT to make sure that your folder is now git repository and as we can see from the instructions the next step after that will be to connect that repository to the app that you have on Heroku so if we go back to the page here it tells us to run this command here so we can just copy and paste it let's go back to our code and this command here is going to set our repositories remote as the repository that's Heroku has and its services so it's gonna do git remote and then eight which is add and chat app JK which is the name of our app on Heroku once you run that it'll say set get remote Heroku - and this is a link to the repository that Heroku is using alright once you've done that you can stage your files commits make a commit with a commit message and then push it to master so why don't we do that by going back and we'll do a git add and then we'll do git commit I'm ready for Heroku every time we make a commit you gotta add a commit message so that's in your records your repository has a reference of what was then at that time then I can type in git push Heroku master and what that's doing is pushing all these files to the master branch of the repository that Heroku has access to and now our app is online but it's not working yet and as a matter of fact if we go on the top right corner to open app we're gonna see application error and the reason why the app isn't working yet is because Heroku doesn't really know how to run the app and to give it instructions we need to create something called a proc file all right so I'm gonna create a proc file this proc file allows you to give instructions to Heroku for how to run your app so here when we're running it on localhost we did it by running the command node index J s and we want Heroku to do the same thing on the web so we're gonna say web and node index J s so now Heroku is going to run your app the same way that you run yours locally now it's still not gonna work because when we were running our app locally we could specify the port that we wanted our server to listen to as we did here with port 5,000 but on Heroku you can't do that your server has to listen to the port number that Heroku gives it and that's port number will be available through a variable called process dots env for environment dots so with this expression here we're saying we want our port number to be whatever Heroku gives us through this process that env that port and if it's not available which will be the case if our app is running locally then we just want to use five thousands so once we so once we've made that change we can just commit them after staging the files then push it to Heroku with the same command get push Heroku master and once that's done you can see your app being built and once it's all done you can go back to your app refresh it and it should be working fine and just like that you've deployed your first app as you can see it was pretty straightforward it gets more complicated of course as you start building more complex apps with things like databases but Heroku is very very well documented so you'll find a lot of good information on their websites and of course there a lot of tutorials out there just like this one that go more in depth into what you'll need to do when you start building those bigger apps that involve more configuration but I'll leave it if that's please let me know if you have any questions hope you enjoyed it and of course don't forget to Like and subscribe thank you

Channel: Jonny Kalambay

Views: 186,571

Rating: 4.9549942 out of 5

Keywords: javascript, node, heroku

Id: MxfxiR8TVNU

Length: 8min 9sec (489 seconds)

Published: Sat Jul 21 2018