Git is a free and open source version control system. What this basically means is that you can use Git to store your projects and their files and it will keep track of different versions and changes to the files for you. You can use Git to store and manage files locally on your PC but most likely you will want to use one of the free cloud services that allows you to store the files online. Storing the files online makes it easier to share your projects and it also serves as a way to back up your file in case your PC crashes.
The 2 main cloud services I know of are Github and Bitbucket. You can use either. The technology itself and the commands you use are not tied to the cloud provider you choose — they are an open standard so it really doesn’t make much difference. I think Github is the more popular choice and it is what I use. The only disadvantage is that it does not allow you to host private repositories for free. This means that your repositories are publicly available for anyone to see and download unless you pay for a private repository. Bitbucket offers free private repositories so it might be a better choice if you don’t want your repositories to be publicly visible.
I’m going to assume that you have a development environment setup with Node and Git installed and that you have created a project that you want to manage as a Git repository. If you need help in getting the environment setup then check my post “A beginners guide to setting up a modern web development environment on Windows 10”
To get started head over to Github.com and sign up for an account. Then create a new Repository. For this example, I have called my new repository “node-environment-test” in keeping with the name of the sample project I built in the previous article.
The next step is to initialize Git within your local project directory. Make sure that you are in the working directory for your project and then enter the following command on the terminal.
Next, we need to add the files on our project directory to a Git Header. This basically stages the files and makes them ready to be committed to our Git repository. You can do this for individual files by specifying the file name or you can do this for all files in the directory by using a . instead of the file name.
git add .
Whats important to note here is that you have not actually added the files to the Git repository yet. You have just used this command to stage the files that you later intend to commit to the repository. In order to commit the files to the repository you need to issue the below command.
git commit -m "First commit"
Ok, all good so far. What you have done is create a local instance of a Git repository and committed your files into it. However, we want to store the files in our cloud repository that we created on Github. To do this we need to add a “remote” which basically tells Git to use a remotely located repository instead of the local one.
Adding a Remote Repository
Go back to your Github.com page and copy the url for the Github repository you created.
Issue the below command in your terminal window replacing my Github Url with your own. This will create a “remote” or link between your local instance of Git and the Repository you have created on the cloud.
git remote add origin Github-URL
Next enter this command to verify the reporitory.
git remote -v
Great, you are all set. You have created an instance of a Git repository locally and committed your files to it. You have also created a remote that links your local and cloud hosted repository together. The final step is to push your local changes to the remote repository. To do this, issue the following command.
git push origin master
You’ll need to enter your Github.com username and password and then you are done. Go back to your repository on Github and you should see your files now exist there.
In this example Git is not doing much more than acting as a secure cloud backup of our project files. Whilst that’s useful its not exactly mind blowing. Lets explore some other functionality that makes Git so useful.
My original file looks like this:
var x = 1 &lt;g class="gr_ gr_278 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="278" data-gr-id="278"&gt;var y&lt;/g&gt; = 2 var total = x+y; console.log("The total is " + total);
I am going to make some changes so it looks like this now:
var x = 1 var y = 2</pre> var total = x+y; console.log("The total is " + total); //Adding some changes to the file var x_times_y = x*y; console.log("X times Y is " + x_times_y);
Then I will commit these changes and push them to the remote repository.
git add . git commit -m “Adding multiplication calculation” git push origin master
Now when I go to my repository on Github I can see the history of the test.js file. I see when changes were committed and by whom.
What’s more I can click on any change and Github will highlight the new lines of code and removed lines of code so that I can see exactly what changed.
In any significant application you will usually need to support different branches of the application. You may have a branch for the code that is running in production, another for the code that is being tested as part of the next release and another that is being worked on by the development team for a release later in the year. Git makes it super easy to manage different versions. We can issue the following command which will create a new branch of our project called ‘development’ based on the existing branch that we have which is ‘master’. The push command then pushes this new branch up to our cloud repository on Github.com
git checkout -b development master git push origin development
You can switch between branches using the ‘git checkout branch-name’ command.
Working with Teams
One of the biggest advantages of Git is that it makes it easy to work with teams where more than one developer is changing code. This benefit won’t be obvious if you are starting out by yourself but as you start to work with others you will see its brilliance. Git can be used to keep a single repository that multiple people are developing on in synch and it will help you to manage competing changes in your code.
Pulling changes from a Git Repo
So far we have looked at pushing changes up to Git but haven’t talked about how to get the changes back down. Lets say for example that your friend has made some changes to repository that you are working on together. You know this because you can see from the Github history that he has committed some changes and you want to include these changes in the version of code you are working with. To do this you just need to issue the following command:
git pull origin master
Cloning a new project from a Git Repo
One of the most common uses of Git when you are starting web development is to clone an existing repository that someone else has created so you can start playing around with it. This also works if you lost your local changes and need to restore your own repositories onto your development machine. To do this just issue the below command. Replace ‘github-url-of-repo’ with the url to the repository you want to clone and ‘folder-to-create-in’ with the name of the folder you want to create the project in on your local machine.
git clone github-url-of-repo folder-to-create-in
If you are a beginner like me then this should hopefully give you a decent working knowledge of Git. As you start out you’ll find that you won’t use it that much. Its nice to have your projects backed up to the cloud but it doesn’t offer a great deal more to simple projects with one developer. As you start to branch out, work with other people and pull other repositories to play around with you’ll start to get more value from its incredible functionality.