If you are a newbie to programming you might come across a problem with merging your source code with another co-worker/person you are working with. It's like you have made some changes and pushed to your favorite version-control hosting platform and then someone has pushed the code to a new branch and now you have to manage the dirty process of merging their branches with yours. This tutorial deals with the same topic.
OK, Let's start.
So, let's first know what is Git?
Git, as specified by Wikipedia, is a distributed version control system for tracking changes in source code during software development.
In layman terms, it means that while you code you can save your changes with a message that probably reminds you of what work you had done.
Now, to demonstrate the merging process in Git, we need an application with some code in it. Let's make a new angular app by running the ng new command as follows:
ng new new git-example-for-devto
This command will generate a new application with a default component name AppComponent. The folder structure of our app looks like this:
our-project-name
|
--- e2e
|
--- node_modules
|
--- src
|
--- app
|
--- app.component.html
|
--- app.component.css
|
--- app.component.ts
|
--- assets
|
--- enviornments
|
--- other files
Now, we need to write some code in our app.component.html
For this tutorial, I have written some basic code as our main focus is on merging the branches rather than writing the code. Here is the code for this post:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body >
<!-- Changes from my computer -->
<p style="background-color: black; color: white;">This text is from my computer</p>
<!-- Changes from my computer -->
</body>
</html>
To demonstrate changes I made from my machine, I have enclosed the code around comments which says
<!-- Changes from my computer -->
Some Code here...
<!-- Changes from my computer -->
For remote machine, I will enclose the code around comments which says
<!-- Changes made by <person-name> -->
Some Code here...
<!-- Changes made by <person-name>-->
For Git to work properly it requires a version-control hosting platform where all your code is saved. A version-control hosting platform is a place where all the files of your code live.
For this tutorial we will use GitLab as our Hosting Platform, you can use whichever you like.
I have already set up my project so I won't go into detail in that. If you don't know how to set up a project under GitLab, you can have a look at this guide. So here is my project setup:
So, you can have a look there are two branches named 'master' (which is the default branch and 'gaurang' a branch pulled out from master. Now we will merge branch 'gaurang' with branch 'master'.
Before merging, we will make sure we have the latest pull of our code. For that we will execute the following command:
git fetch
This will fetch all the commits to your local working copy of your Source Code.
Now let's merge our two branches. For merging there will be two branches:
- First, the branch in which we are merging the changes i.e. receiving branch i.e. master
- Second, the branch which we will be merging i.e. gaurang.
The command for merging is:
git merge <branch name>
where the branch name is the branch which is to be merged i.e. 'gaurang'. Remember the here will be always the branch which is to be merged no the branch in which we are merging. Let's execute that command.
As you can see in the screenshot below git automatically tries to merge the changes but if two persons have made changes to the same file then it will show a 'MERGE CONFLICT' and the merge will fail. This means you have to resolve the conflicts yourself manually.
Let's do it.
As we can see in the screenshot the file in which merge conflict is there in src/app/app.component.html. Let's open that file.
After we have opened our file, we will see two types of changes denoted by:
- <<<<<<< HEAD(Current Change)
- >>>>>>> origin/gaurang(Incoming Change)
Current Change is the change that we have done in our master branch and our HEAD is currently at that change.
Incoming Change is the change that is done in another branch.
So, we have to accept either of the two to resolve the conflicts. So, the deciding factor in choosing which changes to keep is the latest change or the latest code. If the developer who is maintaining the branch named 'gaurang' has made the latest changes then that changes should be accepted and not the changes are done in the 'master' branch.
So, let's accept the Incoming change. You can accept the Incoming changes by clicking on the 'Accept Incoming Changes'
The Code before Accepting Incoming CHanges is:
https://paste.ofcode.org/zEtJmsw9ue89jNTpw23tqQ
The Code after Accepting Incoming Changes is:
https://paste.ofcode.org/3axvjm5ThdE2FfWjHvNnFQh
Once, you have resolved the merge conflict then you have to add the conflicted files:
git add <name-of-the-conflicted-file>
and commit the changes (as you would do normally)
git commit -m "COmmit message"
After that we need to push the changes to the receiving branch i.e. master:
git push origin master
After pushing if you see the Graph of the changes you will see something like this:
This means that our branches have been merged successfully.
Happy Coding.
The Complete Source Code for this project is available at Gitlab
P.S.: In the next tutorial we will see what if the current tip of the main branch is ahead of the feature branch.
Top comments (0)