Git up your App

I was once invited to give training to developers of a reputed company regarding application designs and architectural concerns utilizing various technology stacks in areas of both front-end and back-end development. Though the overall training sessions went well but one thing we struggled with was sharing of code, there were some hands-on-exercises and some starter code and later I discovered that trainees were not aware of GIT system and in their workplace they were using TFS and that was not the time for me to go through git mechanics with them. So, we shared the code via USB and I also pushed changes to my git repository and they were able to access it eventually later. But it would have been much easier if we had git setup from the start.

I was thinking writing about Git and share with you my setup, which is very simple and in this post I will go through the basic GIT setup and initial commands to get started. Here is some info about Git in general.

• Git is a distributed version control system.
• It is the ultimate time travel machine.
• It makes code sharing and versioning very simple and easy, suitable for every small or large project and support a variety of workflows from simple to advance.
• You can easily setup a git repository on https://github.com/ to start with, there are other similar system like bit-bucket as well.
• One more thing, that you can use Git for other type of files as well, e.g. images, documents, etc. Because at the end of the day, our code is also a file.

In my opinion every project you start should have an associated git setup, as it requires minimum effort but then you have a very powerful mechanism to manage your code in more systematic way.

In this post I will share my approach for a very minimum GIT setup. This will be very opinionated approach and feel free to adjust it according to your requirements.

Git Setup

So, to start with Git, first you will need to install it on your computer, so you can work on your project from your local machine, you also need to setup a repository for your project on GitHub as a remote (we will see how to do so later in this post). To install Git on your computer you can google it or here is one link you can look at for step by step instructions based on your environment:
https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

After Git is installed you can create an account on https://github.com/ so you can create repositories on cloud and it be our remote repository place.

Repository Setup

Now, for each project, you will setup a repository. You can consider it as a folder on file system.

Create a Repository on github.com, give it a name and leave other settings on default.

On the next page, copy the link as follows, we will need it to clone this repository on our local development machine.

Now on your local computer, create a folder for root of your project as follows. and open a powershell window inside that folder:
Type >>git clone + paste link you copied above and press ENTER.

at this point you have cloned the github repository on your local computer. This process is same if you want to clone someone’s else repository. Our Repository is currently empty, so lets add some files to it.

.gitignore and readme

After cloning the repository on your local machine, you can add these two files (.gitingore and readme.md). These are useful files. gitignore file is used to exclude certain files or folders from being synced on the actual code base. For example, during development, there are files in bin or obj directory, or similar places like node_modules folder which are just development artificats and doesn’t and shouldn’t be checked-in in your code base. readme file can contains some instructions related to your project.

I have seen many projects, where people were using git, but they didn’t setup their .gitignore file which resulted in a lot of these additional files copied and just polluted their source code repository and I do like to keep these files out of my source code repository. For this purpose I have a ready-to-go file, which I normally copy for my new project as starting point and then modify it as needed, in most cases, I even do not need to modify .gitignore file. You can also setup one for your projects as starting point. In the following screenshot I copied the files to the project’s directory.

at this point, I normally do my first check-in, so we will do this next and same time learn few of the git commands, I will encourage you to for detail usage of these commands, check the official github website or search in google. Well, now back to powershell window and type >>git status + ENTER
>>git status command shows the status of files and we can see that two files have been detected and now we can add those for tracking.

Adding file(s) for tracking

We can use >>git add . command to include both files for tracking. there are various flavors of git add command, which allow you to do more specific operation, like only adding certain files etc. So. I performed git add . and then used git status command to check the status again:

So, you noticed that our files are now being tracked for changes (color is green), at this point we can commit our changes to our local repository. So, next command we use is git commit. we can also add a message for this commit.

Pushing Changes from Local repository to Remote Repository

So, we have committed changes to our local repository, we can now push these changes to our remote repository on git hub, this is also called “code check-in“. The command we can use for this is >>git push origin master. So, we are checking in our changes from local repository, which is on our local development machine to a remote repository which in this case is github.

Now, if we go to our github account and check our repository there, we will see that our changes have been pushed to master repository.

So, far we did not have any code in this folder, but we can now create an angular application, typescript project, .NET Core application or may be instead use this repository to share documents, slides or anything. Just add the files, to your local project folder, use the above mentioned commands to add, commit on your local repository and once comfortable, push those changes to your master branch on github.

You can share the link of this repository with you friends, colleagues and then clone this repository on their local machine, may be they add some files, adjust some code etc and then same process on their side and they can also push changes to master branch.

One more command, you will often use is, >>git pull. When more than one person is working on same repository, then to synchronize your local repository with changes (which other persons might have pushed to master branch during this time) you can use git pull command to get those changes and your local repository will get synchronized. If no changes are detected then no harm 🙂

If you like, you can now clone the repository which we just setup and give it a try, make some changes, may be add few files or look gitignore etc. Let me know if something is not clear and in coming posts, we will move towards some advance features of git e.g. branching etc. Till then, Happy Coding!

Here is link for this repository which we just setup, you can use git clone command to clone it right away.
https://github.com/jawadhasan/TypeScriptStarter1.git