Merging Git Branch

[00:00:00]
>> Kevin Powell: All right, so we finished that feature, it's completely working, but we've been on another branch up until now. And that means that our code's not live on our website yet, or anything like that even if we commit those changes, we're not gonna see them. So we need to commit these changes to the branch that we are working on, and then we need to merge this Branch with our main branch now that everything is working.

[00:00:19]
So the first thing we'll do is commit those changes, so I can come here and say functional hamburger menu, or added hamburger menu functionality, put in what you want. I'm gonna click the + to stage those changes, and I'm going to commit those changes right there. And we can also sync the changes, so those changes are in GitHub.

[00:00:43]
But if you haven't done anything with version control or branching before, as I've mentioned, this is all on our hamburger menu branch. If I switch back now and look at my main branch, you're gonna notice the hamburger menu disappears. We have two separate branches of code right now, so our hamburger menu is only living in that hamburger menu branch, our main branch doesn't see those changes yet.

[00:01:04]
And you can change between the two of them down here, and then just select the one that you want. Be really careful if you're actively working on a branch and then you go back to main cuz if you haven't committed those changes that you made, it'll basically think that your then working on the main.

[00:01:19]
So if you're in a branch, work from that branch until you're ready, or until you've committed the changes that you've made. There is a way to merge branches directly within VS Code, but I wouldn't really recommend doing it cuz it's only gonna do it within VS Code and locally on your machine.

[00:01:34]
We will have to delete our Branch from here eventually, but what we'll actually do next is go over to GitHub where our project is living, that was fem, from scratch. At the top here, I can see this hamburger menu had one recent push, 1 minute ago, cuz I just pushed this change over to GitHub through my COURCE CONTROL right there.

[00:02:01]
And I have this option to compare & pull request. So if I click that nice big button, they make very easy to see, you can see it says, open a pull request. And the idea here is generally speaking if you're on a solo project, it's a little bit different cuz in the real-world.

[00:02:16]
You'd open your pull request then someone else would review it, and then someone else would probably be the one merging it in. We're gonna be doing all of those steps cuz we're the only one working on our project. So you can add a title, it's already gonna put one there based on the name of it.

[00:02:31]
So if you wanna change the title, you can, you can add a description, solo project. You're probably not gonna be doing a lot of descriptions, but it could be a really good habit to come in with a detailed description of what you did. So we won't do it too much, but, added hamburger menu functionality for small screens.

[00:02:53]
And then I would even come in with a bullet list, potentially, explaining the area hidden and a few of the other things that are expanded and a few other things that we did. If someone else is gonna be reviewing it so they know exactly the types of things you did, why you did them, a bit of an explanation of what's happening in the code.

[00:03:10]
And once you're finished with that, you can create a pull request.
>> Kevin Powell: You're gonna get this checking for availability to merge, you shouldn't run into any issues unless you've done something on your main in the meantime. If you're doing solo things, you're just creating one branch at a time, you probably won't run into any conflicts.

[00:03:29]
But if you're working in teams, there's potential that there's been other merges that have happened in the meantime, and there's conflicting code, that's a whole other story. Frontend Masters has a course on Git that probably has a lot more information on that if you're interested in learning more about it.

[00:03:45]
You'll also notice, as I was talking there, the screen changed a little bit just because we are on Netlify, so GitHub did some initial checks. And then Netlify actually did a little bit more here at the same time cuz it built the site, [LAUGH] or it made a preview of the deploy.

[00:04:00]
And what that means is you can actually before you pull it into your main branch, you could go to the Netlify, it's gonna have a random address. But you can check that everything is working online, it'll have its own domain name, everything is there. And you can preview it to make sure everything is working before you actually pull it into the main code if you want to, and you can see that is right here.

[00:04:20]
Or if I click on that link, we have, no, okay, that brought me here, and then here I can do, Open deploy preview, and it's going to be deploy-preview-1, and so it has its own domain name, and this is the live version. Now, part of my main site yet, but it's a nice thing with Netlify that you get to preview it live before you pull it in to make sure nothing broke along the way.

[00:04:41]
So I can close those down, I know everything is good, I can come all the way down, and then I can finally, merge pull request. They wanna make sure that you're being very careful, so then I can Confirm merge right there, and it will merge in, pull request successfully merged and closed.

[00:04:59]
Last thing here is it's gonna give you the option to Delete the Branch, it's very safe to delete at this stage, if you ever need to reopen it for whatever reason, there's ways you can do that. We're just gonna click on Delete branch cuz we don't need it here anymore.

[00:05:12]
This is deleting the Branch from GitHub, though, it's not doing anything on your local computer. So locally, if we come and take a look, it's kind of interesting, cuz when our SOURCE CONTROL updates, or, sorry, I'm gonna click on this bottom part, you might already have it open, but the SOURCE CONTROL Graph.

[00:05:26]
And here we should get the, I'm still in my hamburger menu, I'm gonna go back to my main branch. And if I go in my main, you can actually see that it's showing us, can I zoom in on that? We can make it a bit bigger, I can see the different work that was done here, and let me zoom out again, there's the handle bar, okay, let's just go full screen.

[00:05:57]
So we can see here the different parts, so here we'd finish page one, we made the ranch, added the hamburger. These are the different steps along the way, when we were making commits along the way on that branch. And then we can see that that branch got pulled into the main thing, so it gives us a little bit of a visualization of what's happened.

[00:06:14]
So then I can now sync my changes, so it's gonna pull the changes that are on GitHub back into my computer cuz these changes were part of the hamburger menu. Branch locally, they're not locally part of my main Branch yet. So going back to my main branch, I want to sync those changes back into here, and I can see the colors are all blue.

[00:06:32]
If it's purple, it means it's online on GitHub, if it's blue, it's also local on your machine. And you get the little visualizations here showing you that as well. So we've merged our pull request number one from your name and all of that, and everything is good to go.

[00:06:48]
You will still have your hamburger branch here, it's gonna stay local on your computer, you could leave it if you wanted to, it probably won't cause any issues. But if you do wanna clean it up, you can do, git, I did the wrong thing, it's control, can we do it through here?

[00:07:06]
I wonder, if I choose that Branch and I go to the menu Branch, there we go, you can. So as long as the hamburger menu is the active branch, we can go in the GitHub, the SOURCE CONTROL menu, go to Branch, and then you can just Delete the branch.

[00:07:25]
Make sure you're not in the hamburger menu, I do apologize. From your main branch, you can go into,
>> Kevin Powell: This SOURCE CONTROL menu, go to your branches, and then you can Delete a branch. You can't delete the branch that you're actively on, you can only delete other branches, which makes sense.

[00:07:45]
So Delete Branch, which one do we wanna delete, and we can delete our hamburger menu from there. And now that feature is done, and we are good to continue going.