{{announcement.body}}
{{announcement.title}}

Git Up Your App

DZone 's Guide to

Git Up Your App

This article give you everything you need to know to start setting up your Git environment and repository and clone it for your local machine.

· Open Source Zone ·
Free Resource

I was once invited to give a 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, one thing we struggled with was sharing code. There were some hands-on-exercises and some starter code through which I discovered that the trainees were not aware of the Git system. 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 later. But it would have been much easier if we had had Git set up from the start.

You may also enjoy: Git Commands Tutorial - Part 2

I was thinking of writing about Git and sharing my setup, which is very simple. 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 makes code sharing and versioning very simple and easy, suitable for every project, and supports a variety of workflows from simple to advance.
  • You can easily set up a git repository on https://github.com/ to start with, and there are other similar systems like Bitbucket as well.
  • You can use Git for other type of files as well, like images and documents. 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 a more systematic way.

In this post, I will share my approach for a very minimum Git setup. This will be very subjective approach so feel free to adjust it according to your requirements.

Git Setup

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 set up a repository for your project on GitHub as a remote (we will see how to do so later in this post). Here is one link you can look at for step by step instructions based on your environment.

After Git is installed you can create an account on https://github.com/ so you can create repositories in the cloud and for our remote repository location.

Repository Setup

Now, for each project, you will set up a repository; think of it as a folder on file system. Create a repository on Github, give it a name, and leave other settings on default.

Repository name

Repository name


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

Cloning repo on local machine

Cloning repo on local machine


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

Open PowerShell
Open PowerShell

At this point, you have cloned the Github repository on your local computer. This process is the same if you want to clone someone’s else repository. Our repository is currently empty, so let's 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 is used to exclude certain files or folders from being synced on the actual codebase. For example, during development, there are files in the bin or obj directory, or similar places like the node_modules folder, which are just development artifacts and don’t and shouldn’t be checked into your codebase. The 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. This just polluted their source code repository and I 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 a starting point and then modify it as needed. In most cases, I do not need to modify the .gitignore file. You can also set up one for your projects as starting point. In the following screenshot I copied the files to the project’s directory.

Copying files to a project directory
Copying files to a project directory

At this point, I normally do my first check-in, so we will do this next and at the same time, learn a few 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 the PowerShell window. Type  >>git status.  >>git status   shows the status of files and we can see that two files have been detected and now we can add those for tracking.

Using git status

Using git status


Adding File(s) for Tracking

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

Using the git add command

Using the git add command


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

Using git commit
Using git commit

Pushing Changes From the Local repository to the Remote Repository

So, now that we have committed changes to our local repository, we can now push these changes to our remote repository on Github. 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.

Checking your changes
Checking your changes

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

Changes pushed to the master repository
Changes pushed to the master repository

So, far we did not have any code in this folder, but we can now create an Angular application, a Typescript project, a .NET Core application, or this repository to share documents, slides or anything. Just add the files to your local project folder, use the above-mentioned commands to add and commit on your local repository and once you're ready, push those changes to your master branch on GitHub.

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

One more command you will often use is  >>git pull. When more than one person is working on the 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 the git pull  command to get those changes and your local repository will get synchronized. 

Synchronize changes
Synchronize changes

If you like, you can now clone the repository, which we just set up, and give it a try, and make some changes. Let me know if something is not clear and in the coming posts, we will move towards some advance features of git. Happy Coding!

Here is link for this repository which we just set up. You can use  git clone command to clone it right away.

Further Reading

Git Explained: For Beginners

Commands and Operations in Git


Topics:
github ,git ,github repository ,git commands ,cloning ,git setup ,remote repository

Published at DZone with permission of Jawad Hasan Shani . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}