Deploy to Heroku

Hey guys, in this video, we will be deploying our PHP primer websites to Heroku. And we’ll be doing that by synchronizing it with our GitHub repository. Now just a reminder, Heroku is a web hosting platform, what they do is offer a platform as a service where they contextualize the hosting offering based on the type of code you upload. So on the website, which you can get to Taroko comm you notice that they’re advertising support for quite a few languages. So far, we have Node JS, Ruby, Java, PHP, Python, go and some other ones. All right. So the fact is, you just spin up what you call a bucket, and you put your code there and they do the rest infrastructurally they configure the servers in the bucket and you don’t have to worry about any of that you just put your site there and with very minimal effort, you can have a website up and running on Heroku if you haven’t already done so you can firstly navigate to Heroku comm creates cones by clicking sign up. And it’s a relatively simple process to get signed up just a bit of information here. And then you’re already and if you already have your cones, you can just go ahead and login. Now when you log in, you’re led to your dashboard where you would see all of your applications. If this is your first time, then you have an empty dashboard. It’s not my first time because I actually have deployed things here before. And even if you don’t have anything, that’s fine, because we’ll be doing our first one no anyway. So the first thing you want to do is click New. And then we’re going to create an app. Next, do you want to give your up name? Well, you’re up a name. And the thing is that for the free distribution of this or the free use of Heroku, you’re going to get a subdomain, meaning whatever your app name is, dot Heroku So in other words, you can’t use the exact app name I’m going to use here and I’m just going to use that A name that I think it doesn’t exist already. So your app name needs to be unique. What you can do to probably personalize it is put your name on it. So I’m just going to say PHP, dash primer, bash, and my name is true. So I’m just going to say true. And that is available. So if you put in one that is not available, once again, just try and put something there to personalize it so that you can share it with others, and it would automatically and instantly figure that it’s your own. All right. So PHP dash primer, that true, that’s true. That’s what I have. And that is available, and I can leave my region on the US. But if you’re closer to Europe, then you can toggle that as you need to. And then I’ll just create an app. Now having done that, I’m led to this page where they’re giving me a deployment guide and asking me if I want to add this pipeline, so I think pipelines will start to cost money. The next section asks us what method do we want to use different So we can use the Heroku, get ci commands. And we would have gone through using the get commands from command from from the get interface, the CLA, and the commands are pretty much the same, you just login, which this would prompt you to actually put in your credentials in the command line. And then you go to your project where it would be. So that would be C slash Zamp, slash HD doc slash your folder, or it or whatever it is in your context. And then you get in it, and then you add what you call a remote, which is like a connector to this bucket or this up space that we just created. And then the next few commands would actually just synchronize between your existing gate project and Heroku. So it’s just like pushing things to GitHub. Using your command line interface. It’s the same concept pushing things to Heroku using that command line interface. So that’s one way You can do it. If you choose that method, that’s fine. I’ll create another video where I do it that way. But for this video, we’re going to choose another method, which is to connect to GitHub. Before I move on, though, if you would have already added your project to GitHub, it means that you already have the GitHub repository existing. Alright, so you are already around the get teeny tiny already synchronized with GitHub, and all of these things. So you would have already created some get repository inside that project. So you wouldn’t have to go through all of this, I think, well, you would have to go through with this. But then what you would do after that is just add the remote. So the remote is just the connector. So I think right now the remote would be origin to connect it to GitHub, then you just add another remote called PHP primer. All right. Well, yeah. So essentially, that’s that’s how you would do that using the command line interface. And of course, you have to download and install that command line interface. connector. Alright, but then Today we’re going to be using GitHub. So I just click GitHub connects with GitHub, sorry. And then I’m already logged in. So if you’re not logged in, then you can just connect to your repository here. I mean, I’m already logged in, meaning I’m already logged into GitHub in my browser. So you would just log into GitHub, through whatever interface they allow you here. And then once that connection is established, they will ask you which repository Would you like to deploy? So the repository that we have been working with is PHP dash primer, so I just type that in search. And it’s going to bring back that repository. And then I’m just going to see clinate no one’s that connection is done, then this whole section changes to show that and I can actually see all of the activities on that repository. So we would have uploaded our first one and then we changed some Else just to show just to show how we synchronize with GitHub, so that as many changes as you commit to your GitHub repository, they can be viewed right here in Heroku. Also. Now the next section talks about automatic deploys. So each time you upload to GitHub, you or your team member, you upload to that, what we call the master branch, meaning the central place where everybody’s code comes together to me the final product, then you can actually enable automatic deploys as soon as you publish something to the master branch, it will automatically updated here on Heroku. So you wouldn’t have to come back here and repeat this process each time. Now this says you have to be very careful with this of course, because the good programmers or developers don’t publish things to Monster unless they have tested it and it has gone through all the quality checks and in my represents the final product. So if you are experimenting with something, then what you would do is create a branch. And then you run all your experiments on this branch, and then you request your team lead to consolidate this branch into what we call the master branch. All right? So if we enable automatic deploys, and we say, always deploy the master branch, that means that it’s going to assume that once something hits the master branch, this is know very, very, very quality, assured version of the software. And that is what it will make available to the public. So you have to be very careful and deliberate with with your master branch, and especially if you’re going to enable automatic deploys, well, I’m not going to enable automatic deploys, I’m just going to manually deploy so I’ll manually go down to the manual deploy section. And I will say, I want to deploy the master branch so we haven’t we haven’t looked at how to branch and merge In get as yet, and that’s going to come up. But for now, we can just manually deploy. So deploy branch, and then we give it a few minutes, or moments. And you’ll see that it’s kind of doing some stuff, it’s getting all the libraries, I will give that a few moments to finish. Alright, so now it’s successfully deployed. So if you see a green tick here, that means it was successfully deployed, and you’re good to go. And then the next step would be to view your app. So you can just click this, and that will launch it on another tab, your website that you’ve been working on. So in this case, we’ve been working on PHP brehmer. It’s not the most elegant website, it’s just something to get us ofay with all the basic PHP, code, chords and commands, but let’s just take a step back and pretend that this was a real website. You just built a site in PHP, you have all the pages and wired up everything your navigation You bootstrap your label to everything. And with just three steps in literally less than five minutes, you know how to get on the internet. So that is my address on the internet for this app. And I’ll leave this up up so that you can type it in your browser when you’re watching this video, and browse to my app. Alright. Now what I’m going to do is make an adjustment to this site and obviously no adjustments so that we can see the difference between what we’ve changed on our computers, what we commit to GitHub, and then how we update it here on Heroku. So now I bring up my hold file, and I’m just going to create an anchor tag right here, underneath all of these buttons, so you can do this with me. And I’m just going to meet this one navigate to Alright, and I’m just going to put in my href and wanting to know to the actual They’re not links I always put in the fully qualified HTTP, s if necessary, colon slash slash All right. So that’s one thing that I always try to do. And then since we’re using bootstrap, the great thing is that we can actually style or anchor tag. And I’ll just take a preview of this quickly. So this is what it looks like. Alright, so it’s just a link. But then if I want it to look like one of these buttons, I can actually add all of this CSS to it. So I’m going to make it directly. Alright, so the bootstrap class for red button would be I think it is danger. And if I go back and take a look, refresh, and there we go, so my link now looks like a button. So you know, you don’t know which one is just about Now which one is just the link. So if you want your links to look like this, then you can actually use all of the button classes the same way Just to verify that my link works, when I click it, it should navigate me away to Heroku COMM And I’m going to make one more adjustment because I don’t like when a button navigates away from my website. So I’m just going to say target. So this is another is an HTML attribute that you can use. And this one says target underscore blank as the value. And with that done, and I just refreshed again, when I click, it will always open up that content in another tab, and my website will remain. Alright. So this is the adjustment that we just made to our website. And I’m going to look back at Watson on Heroku. And obviously, I haven’t pushed anything new. So the old version is still on Heroku. So my first order of business is to update my repository. So I’m going to bring up GitHub quickly. So I’m opening up my GitHub desktop up, and the first thing it shows me is the fact that I I’ve made a change to my index dot php, and it highlights the chain. So for as many pages and as many changes as many pages as you have, and as many changes as you’re going to make, GitHub will always show you what was done and ask you what you want to do with it. Right? So I’m just going to say I did link to Heroku. Alright, so when another developer comes along, he can see exactly the change that I at least claim to have me that could mean the change, and it wasn’t done successfully, or whatever. But at least for accountability, each person GitHub requires that each time you’re going to check in a change, you have to state what was done. It might give you a default, but I like to be very specific so that other people can come and benefit from my version or icons of the events. All right, so then I just go ahead and commit to master. All right, and that’s step one. So that was me committing to my local GitHub. Sorry, no, I need to what we do what we call push origin. So, earlier I talked about the remotes are the connectors, the connector for GitHub is usually by default origin. The connector for Heroku is relative to your app, or I think what Heroku is what they call it, but I’m just showing you that you can have multiple connectors. So I’m just going to push to origin. And this will take a few minutes depending on the speed of your internet and how many changes you’re taking in. And this is done. Alright, so if I go to, I had my profile open and look in PHP primer, then you’re going to see that I made a change to the Index page and that is the last change one minute ago. Alright. So always kind of gives an indication as to what was done to what file and if you’re working in a team, it goes as far as seeing who did it. Alright, so the next thing would be To actually synchronize that with my Heroku website. So if I go back to my Heroku website and I refresh, you notice there’s nothing that’s changed because one, I didn’t enable automatic deploys. So that’s one of the things that automatic deploys will do. But once again, I’m I, there are dangers in doing it that way, you have to make sure that your quality is always on fire. So for our personal project, sure, but I’m not going to do it in this video. I’m going to know go and deploy branch again. And then by clicking deploy branch is going to go and get the latest set of from this branch in GitHub, and run all of the updates and in a few moments that should be done. And when I view my site again, it no has the latest version of what awful lot my site is. Alright, so no, I have this one. So if I go back and make a change on for as many changes as I’m willing to make, I We’ll check them into GitHub. And I encourage you in a team setting to always check things into GitHub. And you could designate one person who is in charge of handling the deploy and deploy should only happen after this one person, whether it’s the technical lead or QA person or your DevOps person, after they have seen and tested and done their quality check to make sure that everything is still in order, whatever was working still works after your changes. Now, whatever it is, you claim to have changed, actually works. Then you deploy here, of course, machinery can be set in because you see that they’re asking if you want to wait for a CI, it’s a pass to deploy. So there are a number of things that go into the automatic deployments. And this video is not going to cover all of those little things. So that’s why I’m avoiding using the automatic deploys. But at least from this video, you know how to get your code from your machine into a central repository where all changes can be made, can be stored. And I’m logged, and then how to deploy to Heroku for the wider Internet, and like I said, you would get a subdomain on your site so or you get yourself on a subdomain or other. So you have whatever the app name is dots Heroku app Comm. And you can actually go ahead and pay for a custom domain if you’re at the stage where you want to do that. So now I’m just going to give you a tour of the other tabs quickly. So from the overview tab, once you have the app selected and go to the overview tab, they will show you that you have add ons that you could install. So like a MySQL database will be an add on and they give you a little little apps that you can just put into your project and just pay a monthly fee so you don’t have to buy it one time. If you don’t have all that money you just pay monthly for the use of it. The dinos would be like how many instances of your website, so maybe no, you will have 50 users, it’s fine. But when you scale to 500 users, then you probably need to add more dinos. So you can handle that increased traffic. And then you might not be the only person working on your site. So you can actually manage the access to the sites or to your app, and add collaborators. So each tab kind of speaks directly to that. So to add more dinos, of course, that’s going to cost a bit of money. Deploy, we just went through that matrix, you have to add your credit card. So you can actually view the metrics of your side, see the peak usage, the baseline, those kind of things, the activity shows, like I said earlier, all of the changes being made. So you can actually roll back to here if needs be so maybe deployed. And when it went into what do you call production, which is the actual sites accessible over the internet. He had some arrows and bows and so on, so you can actually just Roll back to the point in time where you know, these issues were not while you work on it. So Heroku makes that very, very easy. And it’s almost transparent to the user access, that’s to add more collaborators. And then in settings is where you can edit or change the name of your app. Once again, the app name has to be available for that to occur. You can look at some other little info information about what kind of stuck and see it automatically detected the framework needed, helmet size you have available to your repo that it is currently synchronizing with and the what you call like get remote for the Heroku connector. And you can actually from here, get that domain and an SSL cert so you can actually do everything here. It’s like a one stop shop. You don’t have to run to go daddy and grew up there and go there. You can do everything here. Of course you may want to shop our own for costing And then if I wanted to transfer ownership back would actually just choose somebody else, maybe another collaborator, I’m no longer team lead somebody else’s team lead, so I can transfer ownership of it to them. There’s also a maintenance mode. So maybe while the system is being worked on, or you’re working with the bugs, again, puts it into maintenance mode where it is not accessible over the internet. Alright, so you see that they’re warning you it will be unavailable. And I can go ahead and enable or cancel that. All right, and then at the end of it all, you can always delete the up, and they try to ask you are you sure and you have to read type this soul, it has to be a very, very, very deliberate effort to delete this up, at which point you would have lost all of your content from Heroku and the actual container space. So that’s it for today on how to get your app onto Heroku and what Heroku offers. If you have any questions or suggestions Feel free to drop me a line. I’m willing to go ahead and create another video where we look at more things and more possibilities.