God level frontend: Part 2.1 (Git and GitHub)
Table of contents
- Importance of a Version Control System
- What are VCS, Git, and GitHub
- Installing Git and creating an account on GitHub
- Creating a new GitHub repository
- Linking Git and GitHub using Command line
- Branches, Stages, and git push
- Merging
Importance of a Version Control System
Here is a dialogue to explain to you the importance of a version control system.
Prologue: Joey has completed a project for his very first client and has asked Chandler to help him add some more additional features before the deadline. Now, they both have started the work.
Chandler: Hey! I have made some changes to the main.js file. I have sent the file to you, please check.
Joey: Okay, let me check.
Joey: I have also made some changes to the main.js file, can you please tell me what are all the lines you have added so that I can copy it from your code and paste it into mine.
Chandler: Sure! Just a min.
After 10 minutes
Chandler: I have declared variables in lines 3, 6 & 7.
Chandler: Also, added a function from lines 90–102.
Chandler: I have Modified your code somewhere around line 50, compare it, and change it.
Joey: Okay I will update it and let you know.
After 20 minutes
Joey: Code is not working properly. Are there other changes too?
Chandler: Oh! I just recalled there were some more modifications at lines 23, 67, and 89. Check them too.
After 30 minutes
Joey: Still not working!!
Joey: The demo is scheduled after 30 mins from now, I will just go to the last working version.
However, unfortunately, Joey wasn’t able to resolve the issues or revert back to the previous version since it had been overwritten and therefore, disappointed his first client.
Such issues are very common if you are working with a team. To avoid such issues of collaboration and to avail such functionalities like reverting back to the previous version, we use a Version Control System.
We will be using Git for the scope of this article as a VCS(Version Control System).
What are VCS, Git, and GitHub?
A version control system is a system that detects and records changes in your files or folders; there are multiple use cases of that, for example, you can go back to a specific version anytime or compare two versions or update the code from some other branch (hold on! We will explain about branches in this article, below).
Git: “Git” is a version control software. It comes with its own Command Line Interface(CLI) called “GIT bash”.
Interested?
As soon as you have added Git to your project, it starts keeping track of your files. Git sees data like a series of snapshots of a filesystem. With Git, every time you commit or save the state/version of your project, Git basically takes a picture of what all your files look like at that moment and stores a reference to that snapshot.
Git is extremely fast and to store and retrieve the project versions you don’t need an internet connection at all. Git stores everything locally on your machine. In case you want to recall a previous version of your project, Git does not need to go out to a server to fetch your project history. Instead, it can simply retrieve everything from the local git database on your machine.
GitHub: “GitHub” is an online platform for hosting your Git repositories. You can collaborate and work together on projects in a team and share a common codebase. Git runs at the heart of GitHub. GitHub provides a visual interface to Git.
Installing Git and creating an account on Github
Go to the following URL and download the version according to your operating system and then use the conventional method to instantiate the installation and then follow the on-screen instructions.
Git download URL: https://git-scm.com/downloads
To check if Git is installed correctly on your machine, open CMD or terminal anywhere on your machine and type
git --versionCreate your account on GitHub
GitHub URL: https://github.com/
And now you need to use the following two commands to link your GitHub account to Git.
git config --global user.name “YOUR_USERNAME”git config --global user.email “EMAIL@example.com”
Once you are done with these two things you are good to go.
Creating a new GitHub repository
A repository is like a folder for your project. It is where all your project files are. First, we will be creating a new GitHub repository and then we will link it to our Git repository which will be created locally on our machine.
Step1: Once you have logged in into your GitHub account, click on the “+” on the top right corner and then click on “New repository”.
Step 2: Give a name to your new repository, you can also add a description, make your repository public or private according to your need, and also instantiate it with a readme.md or/and a license file(Do not worry much about these things now, keep the specifications as shown in the image below).
Step 3: Now, click on “Create repository”. There you go! You have made a new repository. Let’s start exploiting it.
Linking GitHub to your local Git repository
Now, there are two methods to do so. We’ll do them both one by one.
#Method 1
Step 1: Create a folder anywhere on your machine. Open the folder.
If you are Windows, then right-click and click on “Git bash here”.
If you are Linux, then open a terminal in the current directory.
Step 2: In your terminal type in “git init” like below and press enter. This will initialize a new Git repository.
Step 3: Open the GitHub repository that you had just created. Click on the “Code” dropdown button and then click on the “Copy to clipboard” button as shown in the image below.
Step 4: Now come back to your terminal/Command prompt and type in the command
git remote add origin <THE_LINK_YOU_JUST_COPIED>As shown below.
Interested?
Let’s break down this command.
remote → It acts as a bookmark to make a connection to any online repository.
origin → It is just a shorthand name for the remote repo.
Woohoo! You have successfully linked your local git repo to your GitHub repo.
Step 5: Now, we will bring all the files which are there in our GitHub repo (currently only Readme.md) to our local repo. Type in:
git pull origin masterNote
This command must raise some questions in your mind. What is master? First, let’s understand what a branch is.
Branches are used to maintain different versions of your project at the same time. Your repository can consist of multiple branches. Initially, when you create a repository, it has just one branch, the master branch. However, if you are working on different features of your project simultaneously, you will need to push them to different branches. Also, if multiple people are working on a project they can all push their codes to their individual branches. Later branches can be merged into the master branch.
#Method 2
Step1: Go to the directory where you want to create your project repo. Open git bash/terminal. Remember, no need to create a separate folder.
Step2: Now, copy the link, as per Method1, step3.
Step3: Finally, perform the command
git clone <THE_LINK_YOU_JUST_COPIED>That’s it, now you have your local git repo linked to your GitHub repo. The result will be the same as that of method 1.
Branches, Stages and Git Push
Step1: Let’s create a new branch. Inside your project folder, open the command prompt/git bash. Type in:
git checkout -b <NEW_BRANCH_NAME>Note
“git checkout -b <NEW_BRANCH_NAME>” will create a new branch and switch to that branch. Though you can switch to any other branch by using “git checkout <BRANCH_NAME>”
As given below
Step 2: Let’s start adding files to our project. Create an index.html file and add the code given below or any other code you want:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>God level frontend</title></head><body><h1>This is a Demo file.</h1></body></html>
You need to understand that in Git VCS there are four stages your files can be in. First of which is, untracked. As of now, index.html is in the untracked state. You can know the current stage by using the command:
git statusYou still need to tell Git to track it for changes. Let’s do that.
We will be referring to the following diagram to explain the four stages.
Step 3: In the terminal in your project’s root directory, type
git add index.html as shown in the image below.
Now, your file is being tracked and is in the staging area’s staged state. It means that you have told git that this file will go into your next saved version but haven’t really saved/committed it yet.
If you type “git status” again you can see that clearly as below.
Note
To add all files at once to use:
“git add .”
Step 4: Let’s now commit these changes. When you commit, your project’s current state gets saved in git’s history and is now called a version. The ` ` command to do this is:
Git commit -m <YOUR_MESSAGE>Note
-m stands for message, you can add any message with your commit. The convention is to write your message in present tense for example: “added index.html” is not a good message if the convention is followed.
Step 5: Now is the time to upload your changes to GitHub. You can push these changes to any branch but we usually don’t push changes directly to the master branch instead we will push to the branch we created above. The command to do this:
git push origin <YOUR_BRANCH_NAME>As shown below:
It may ask for your email and password. Provide the credentials and your changes will get pushed.
Now, why don’t you open your GitHub repo and have a look at your branch with your file?
Note:
Therefore, as shown in the diagram above a new file is in the untracked state, when you “add” it, it comes to the staged state. Upon commit it, it gets committed to your local git repo(committed state) and when you modify a staged file it comes to the modified state. You need to “add” it again to bring it to the staged state.
Merging
Step 1: We will now raise a pull request.
Now, what is a pull request?
Pull request is basically a request to commit and merge the current branch to any other branch.
We are going to merge our code from our current branch to the master branch. For this, we raise a pull request from our current branch against the master branch. This will compare the code between the two branches and then let us know if we can merge the branches.
Navigate to your branch as shown below.
Click on “Pull request” to raise a pull request as shown below.
Step 2: It will show to you if you can merge it or not as it is shown below, you can also add a comment to this merge request.
So, now click on “Create pull request”.
Step 3: Once the pull request is done you can merge by clicking on “Merge pull request”.
That’s it, we have merged the initial branch to the master branch.
This is, however, not the best practice to merge your branch to the master branch if you are working in a team or working with multiple branches parallelly. In the next blog in this series, we will be covering the best practice to merge and to resolve merge conflicts. Stay tuned!
If you have any doubt feel free to contact us at thedevelopershomepublication@gmail.com and you can also subscribe to this series using the link given below.
Written by:
Previous Article Link
Next Article Link
Coming soon….
