In this post, we will see about git branching. Branching is a very important concept in Version Control System(VCS). So What is branching? Suppose you are working on a website. And you want to develop its frontend, the manager said you have to use custom CSS. So at this point in time what you can do is, you can create two branches, in one branch you will apply only custom CSS and in another branch, you will use bootstrap. You can see which is better UI and can merge that branch in your master.
In the above image, you can see that there is one master branch and there are two other branches namely CSS UI and Bootstrap UI. Here black dot on branches represents one commit. So after the 4th commit, we have created two branches, in the CSS UI branch we have used custom CSS to develop the front-end, and in the Bootstrap UI branch, we are using bootstrap. We can switch between these branches using the git command. Also, we can merge the other branches in the master branch.
In this post, we will see how we can create a branch, switch between branches, and how we can merge the branch into the master branch. I’ll be using VS Code to demonstrate the example. You can download Vs Code from here.
I have created a new folder and opened that folder with VS code.
In above picture there is my basic website, as you can see haven’t applied any kind of CSS to it. Now I’ll intialize this as git repository and commit the changes.
So now I’ll create a new branch for Custom CSS. To create a new branch we use following command:
git checkout -b branch_name
The above command creates a new branch and automatically switches the working directory to that particular branch. We can see the number of branches we have created in our project using the following command like above: It shows the star in front of the current directory we are in.
git branch Now if you execute git status it will show following message:
In the above image, you can see that it showing “On branch CSS-UI nothing to commit” which means our current branch is Css-Ui. Now I’ll add custom CSS to our website.
After adding custom CSS our website will look like this.
Now we will stage this changes and commit them.
Now, we will switch back to master branch and create new branch “Bootstarp Ui”. We can switch between branches using following command:
git checkout Branch_Name
As you can see in the above image I first changed branch to master, then created the “Bootstrap-Ui” branch and I am currently working on that branch. Now “Bootstrap-Ui” branch will have the code like our master branch because we are creating that branch from the master branch only.
Note: Always remember before switching to any branch keep your working tree clean. Then run above command or else you can lose the changes you have made.
After making the changes into Bootstrap-Ui branch it looks like follows:
As you can see in the above image I am using bootstrap and also there is no “style.css” because we are currently in a different branch and it only reflects the code of the previous branch. Now I can choose between these two branches and merge them with my master branch.
If I want merge my “Bootstrap-Ui” then I’ll use following command:
git merge Branch_Name
Now what I have done here is, first I switched my branch from “Bootstrap-Ui” to the master branch. Then I executed the merge command, which will try to merge “Bootstrap-Ui” with the master branch. If there are not any conflicts then merging will be successful. Since there were no conflicts merging is successful. Now our master branch has the Bootstrap Ui.
So this was a basics of branching in git. It can be difficult when there exists conflicts between two branches.