DEV Community

Kazem
Kazem

Posted on • Updated on

Saving Time with Git: A Deep Dive into Version Control

Image description

In this post, I’m providing a practical and clear explanation about Git, so that even if you have no prior experience of this really valuable tool, you will be able to manage your projects using Git after completing this tutorial.

Git is an official version control system (VCS)

Now what does this mean?

This implies that git keeps track of changes made to our project files over time. Git enables us to record project changes and rollback to a specific version of the tracked files at any time. Numerous individuals can utilize this technique to efficiently communicate and work together on team projects, where each developer distributes his or her own version of the project on his or her own Machine. Subsequently, these independent project versions can be integrated and matched with the original project version.

Git is a popular tool for work coordination and project management among people and teams. Knowing how to utilize Git is, without a doubt, one of the most crucial abilities for every developer and a solid asset to your career!


1. Installing Git

Git is accessed via the command line interface, and you just need to install it on your PC to utilize it. To do so, click on the link below and follow the steps according your operating system:

To ensure that Git is installed on your machine successfully, open your terminal and execute the following command:

git --version
Enter fullscreen mode Exit fullscreen mode

Configure Name and Email

You can use the following command to introduce yourself to git. This sequence explains who is responsible for changes. It is very useful in team projects when a project must be finished by people.

git config --global user.name "Your Name"
git config --global user.email "your@email.com"
Enter fullscreen mode Exit fullscreen mode

Repositories

It is critical to understand the word repository while dealing with Git. A Git repository is a container for your tracked project. We can specify two types of repository here:

  • Local Repository — A repository on your own computer where you work on your project’s local version.
  • Remote Repository — A repository that is located outside of your local system, typically on a remote server. It is a location where you may share your project code, see other people’s work and integrate it into your local version of your project, and submit your modifications to a remote repository. Among the platforms that provide this functionality Gitlab and Github are most popular platforms. Of course, some businesses may set up a private remote repository for themselves, but don’t worry! The procedures are same.

For the sake of simplicity, just the local repository is discussed in this article; and in the next article, I will talk about the remote repository in detail.

2. Creating a Git Repository

To create a new repository and start tracking your project with Git, open your operating system’s terminal and browse to the home directory of your project, then execute the following command:

git init
Enter fullscreen mode Exit fullscreen mode

This command creates a hidden folder called .git for your project, where Git saves all trace data for the current repository. Have a look at the following example:

Image description

As you can see, I create a sample project in the git-tutorials folder and then establish a local repository there.

As you notice master keyword in my terminal is the default branch that You may, of course, modify the default name with following command:

git config --global init.defaultBranch <default-branch-name>
Enter fullscreen mode Exit fullscreen mode

Don’t worry, I’ll explain what the branches are later; just ignore it for now.

3. Committing and Staging

Committing operation is a procedure in which the changes you made in the project are added locally to Git. It’s like snapping a photo of the project you’re working on at that particular time, with the distinction that you can restore all the modifications to the same state whenever you choose! A commit explicitly saves the current version of our code.

With the git commit history, we may make as many commits as we need, and we can jump back and forth between commits to test different modifications to our project’s code. This feature of Git helps us to manage our work more efficiently and track the project during development.

We usually make commits after adding new material, features, or making particular modifications (such as new functionality or bug fixes).

But what exactly is the idea of stage in Git, and where does it fit into this process? Next, I will illustrate with an example:

Before committing the changes you’ve made in Git, there’s an area called the staging area where you should always send them before committing them.

Let me illustrate this notion using the previous step’s example:

We can check the status of our repository using the following command while in our project folder via the terminal:

git status
Enter fullscreen mode Exit fullscreen mode

I just add a js file and then run above command, here is the result:

Image description

This is a common command when dealing with Git that displays us which files have changed, which files are tracked, and so on. As shown in the above example, the file I created is not recorded in the repository I established. It indicates my file is not in the operating area.

Use the git add command to add our files to the working area, which allows them to be tracked. The operational area or stage area simply tells to Git that the files I want to track while committing are the ones I inserted in the stage area.

Now, we use the following command to add a certain file to the stage area:

git add sample.txt
Enter fullscreen mode Exit fullscreen mode

Or to add multiple files, we can do it like this:

git add sample1.txt sample2.txt
Enter fullscreen mode Exit fullscreen mode

Also, instead of adding files individually, we can add all the files in the project at once to the operating area with the help of the following command:

git add .
Enter fullscreen mode Exit fullscreen mode

By executing the above command in our example, we will have:

Image description

Now it’s time to use commit to register our tracked files. We use the following command to do this:

git commit -m "Commit message"
Enter fullscreen mode Exit fullscreen mode

We must enter a statement within “” that will be utilized to identify changes in the project history. This message should be a detailed overview of the repository modifications you are making.

Thus, when you run this command, you’ll get technical explanations from your commit:

Image description

To create a new commit in the repository we’re working on repeat the preceding steps for each change you made.

To see the status of changes in each step, just run git status.

4. History

Now that we’ve completed the committing procedure, it’s time to review its history and switch between them. to see a log of every change you’ve made, use the following command:

git log
Enter fullscreen mode Exit fullscreen mode

Each log contains details about each commit, such as the author’s info, the hash created by git for the commit, the date, and the message you provided when you execute committing.

You can use the following command to return to the previous steps in the project that are evaluated by Git and you have already committed:

git checkout <commit-hash>
Enter fullscreen mode Exit fullscreen mode

In the <commit-hash> field, you must enter the commit hash that you saw in the git log list.

In our example, I modify index.js and committed it, I normally add two flags git log --oneline --graph which produces better results, as shown bellow:

Image description

Well the commit-hash that I want to switch is 7635a35 (The hash is 40 characters long, however for the convenience of switching between them, some of the initial characters that are unique are sufficient).

as you can see after switching the file is gone.

Image description

As you can see, git occasionally provides you with notes. here Git introduces a new command switch that focuses on branches. I’ll discuss about branches later.

Let me clarify another tip before we go into the branches in Git. Certain files (such as node_modules or env files) may not be tracked in the project and should not be included in the stage area. To do this, create a file called .gitignore in the project’s root directory and specify the stuff you don’t want it.
In our example, I created gitignore file then node_module appended. You can notice that git no longer need to stage the newly node_module directory after installing a npm package and its dependencies.

Image description

_
from here I open my vscode editor. I also use zsh as a shell, which you can get from here_

Remove a file from staging

It may happen to you that mistakenly track a file in your local repository. in such situation by using the following command and putting that file in gitignore , it removed from tracking:

git rm --cached <file>
Enter fullscreen mode Exit fullscreen mode

As you can see, git no longer requests to add a .env file to the stage area! To learn more about gitignore, you can also read this doc from here.

Image description

Reverting in commits

It is also possible to wish to erase the current commit and return to the prior commit. You may accomplish this by using the following command:

git revert <commit-hash>
Enter fullscreen mode Exit fullscreen mode

As you can see in the screenshot below, I attempted to use this command in our project. Please keep in mind that this will generate a new commit that includes any modifications that occurred before to the given commit.

Image description

It’s also feasible to revert a range of commit with this one:

git revert <oldest_commit_hash>..<latest_commit_hash>
Enter fullscreen mode Exit fullscreen mode

I also use --no-commit flag which prevents another commit from being added to my history, just make your stage ready to commit new changes.

Image description

What is the HEAD?

If you see the HEAD in the history and logs, here’s why: HEAD like a bookmark, pointing where you are in your code’s history. It’s similar to a little pointer that indicates the version of the code you’re looking at or working on. So in prior command I tell git I want to revert everything from dc12243 to HEAD

Resetting commands

Lastly, you may wish to delete any changes in history that occurred after a given commit! even from logs and history! It’s a somewhat cleaner method, but it’s risky because there’s no way to undo the changes at all.

git reset <commit-hash>
Enter fullscreen mode Exit fullscreen mode

Just like that

Image description

As you all the changes that we create after adding src directory vanish without any chance to undo it.

tip: one of the option of HEAD is using HEAD~n the n is the number of commits to go back.

5. Branches

A branch can be considered as an operating environment in Git. You may define various branches in your project in parallel this manner. In this situation, you will have many versions, each of which was generated for the reasons you specified and will be monitored in parallel.

Git’s tree feature enables us to build separate branches of the project (for example, test, development, or a new feature branch) without affecting the main branch (commonly referred to as master) or the stable version of the project.

Create a new branch

The following command is used to create a new branch:

git branch <new-branch-name>
Enter fullscreen mode Exit fullscreen mode

The new branch refers to the current stage of the project. After creating a branch, to go to another branch, it is necessary to enter the following command:

git checkout <branch-name>
Enter fullscreen mode Exit fullscreen mode

This will send you to a different version of the project that you are working on. You can also use the concurrent command to create and go to a new branch:

git checkout -b <new-branch-name>
Enter fullscreen mode Exit fullscreen mode

To view all of the branches you presently have, we utilize git branch command.

In the super simple example that we made here, I created another branch called develop and created a folder called src that has a index.js file in it. Note that these changes are in the develop branch and not master

Image description

We also can use git branch to see all the branches you currently have.

The interesting thing here is that if we commit the changes in the develop branch and then go back to the master branch, the files we put in the develop are no longer visible in the directory.

Merge branches

It is also feasible to merge modifications made in another branch into another branch with Git. Simply enter the following command to merge another branch into the one you’re presently in:

git merge <branch-name>
Enter fullscreen mode Exit fullscreen mode

Imagine that in the example we are working on, we want to merge the develop branch and every change in it into the master. For this, we first go to the master. Then we combine the develop branch with the above command:

Image description

As you can see, all the changes in the master were also applied. So easily!
Remove a branch

The develop branch was merged with the master, as you saw in the previous section. Nevertheless, if you use the git branch command, you will notice that the develop branch is still present! When you no longer require a branch, you may remove it using the following command:

git branch -d <branch-name>
Enter fullscreen mode Exit fullscreen mode

This is the end of the article. In this article, I attempted to cover the majority of the key aspects required to work with Git in a local repository.

Git commands have so many functions that I doubt anyone can claim to be familiar with them all 😊

Anyway, everything you need in the local repository is stated here, and you can see extra features by pressing -h at the end of each command.

In the following article, I will provide a tutorial on the remote repository. if you have any questions about it, please leave them in the comments.

Top comments (4)

Collapse
 
jumydeveloper profile image
Jummy D

Amazing man It’s was really helpful for me

Collapse
 
kazemmdev profile image
Kazem

my pleasure!

Collapse
 
mehultatva profile image
mehultatva

Please provide tutorial for remote repository

Collapse
 
kazemmdev profile image
Kazem

Yeah sure! I'd be happy to help you with that!