The Big GitHub Desktop and SourceTree Throwdown!

Git and the command line can be a daunting prospect, luckily there are multiple Git GUIs, which work across a variety of platforms such as, OSX, Windows, and Linux.

In this post, we’ll be taking a look at the two most important ones. GitHub Desktop and SourceTree by Atlassian, the company behind Bitbucket.

So why would you use a Git GUI? It’s perfect for learning the ins and outs of Git-based code management, before advancing to more complex command line tools. If you really want to understand what’s going on behind the scenes, you will still have to dig into the command line. Check out WP Pusher’s free video course on Git for WordPress for more on this.

GitHub Desktop

The GitHub Desktop application is developed by GitHub and is the perfect way to easily manage all your GitHub projects.

The layout of the GitHub Desktop application is simple and straightforward with an uncluttered interface, making it perfect for the beginner, though still including more powerful options for the advanced developer. This is where GitHub Desktop stands out when compared to SourceTrees more cluttered interface. Which could easily confuse a beginner that isn’t familiar with Git.

GitHub desktop overview

There’s quite a few things going on in that screenshot, let’s break down each piece:

On the left hand side you have your repositories, these are repositories that you’ve already created in your GitHub account and synced to your PC. You won’t see repositories that you have added to GitHub and haven’t synced to your PC. In other words don’t panic, if you can’t see your repositories. We’ll cover adding repositories in a moment.

Next to the repositories we have our commits for the currently selected repository:

Commits and selected repo

Notice that next to the repository name there is a padlock symbol? That denotes the repository is private and can only be seen by people that have been granted access. Which means if someone went on your public GitHub profile and you didn’t have any public repositories but had two private ones it would show as if you’ve got no repositories.

In the above screenshot, see how there’s an 11 next to that top commit. This means 11 files where modified. If you click on that, you’ll get a full list of all changed files:

Modified Files in the GitHub Desktop application

If we click on the commit at the top, we can see what’s has been changed on the right hand side. Red = deleted, Green = added.

Removed code

Let’s take a closer look at the commit information.

Closer look at Commit

At the top there’s the commit title, this should generally be a brief description of what has been changed, ideally 50 characters or less. Then under that going right to left, we have the GitHub username of the person who made the commit, then next to that, we have the commit number, the commit time and finally the commit options. Which includes:

  • Revert this commit
  • Copy SHA
  • View On GitHub

In addition to this. All the commit information is a clickable link, opening up that particular commit in your browser within GitHub on click.

Comparing branches

The GitHub Desktop application also allows you to compare branches. At the top just above your commits, if you click on Compare, you’ll see all the branches within that repository to select from. For me this is why I’d choose to go with the GitHub Desktop application rather than SourceTree while you can compare SourceTree commits across multiple branches, it’s presented in a much more user-friendly manner within the GitHub Desktop application.

Compare Branches

If we select our Develop branch, we can then see a couple of extra options. Namely, the option to update one branch from the other. In this case, develop from the master branch. Clicking View Branch just takes us back to the overview of our originally selected branch, which in this case is master.

Switching Branches

Switching branches is a breeze, just click on the drop down selector on your current branch and then select the branch you want to switch to from the drop down list.

Switch Branch in The GitHub Desktop app

Once you’ve changed branches, you’ll see all the commits that have been made to that branch. As well as the ability to update from the master branch.

Update Branch From Master

Creating a New Branch

To create a new branch click on the branching symbol which is next to your current branch name.

Create New Branch

Then you’ll need to enter a name for your new branch and pick from which existing branch you wish to create the new branch from. This would normally be your master or development branch, though you can pick any branch to create from. Once you’ve entered the required information click on Create Branch.

Once you’ve clicked that, GitHub Desktop will automatically load your new branch. At the top right you’ll see the option to Publish your branch. This will publish your branch remotely on your GitHub account and allow other code committers to see your branch and pull/push to it if they have the required access.

Adding a Repository.

In the top left of the GitHub Desktop application you’ll see a plus sign click that and you’ll see the option to Add, Create and Clone repositories.

Create, add and clone repositories

Adding a repository, means adding a repository from a local file/folder which is on your PC. You can pick the repository and then click on Create & Add Repository. Once you’ve added the repository, you’ll need to commit your code. Click on commit to master. Once the code is committed, you’ll need to publish it. Click on Publish and you’ll then see the options to fill in the name and description of the repository along with which account you want to publish it to if you have a GitHub premium account you can also select to make the repository private.

Publish Repository

Create a Repository

To create a repository click on the plus sign and then enter the name of the repository and the local path of the repository. The path of the repository will be automatically filled in once you’ve entered the repository name, though you can still modify the path as needed. Once you’re happy with everything click on Create Repository.

Cloning a Repository

To clone a repository click on the plus sign and then pick clone, once you’re on the clone menu, you can pick any remote repository and select the clone option which reads Clone your-repo-name. You’ll need to select where you want to save the repository locally on your PC, make sure it’s somewhere that is isolated, you don’t want to save your repository in a folder that is constantly changing like your downloads folder. Once you’re happy with everything, click on Clone and wait while the cloning process completes.

Making a Pull Request

This is another area where GitHub Desktop has the lead over SourceTree. you can make a pull request completely within the GitHub Desktop application, whereas with SourceTree it involves you starting the request in SourceTree but then leaving the application interface to go on the Bitbucket website to complete the pull request.

Making a pull request couldn’t be simpler in the GitHub Desktop application, simply click on the Pull Request button on the right hand side, which will open up the pull request interface like this:

Make a Pull request

Here you can select which local branch you’re making the pull request from, for example, you might be making a pull request to the master branch from the development branch. Enter your description and then just click Send Pull Request.

Remember a pull request will always be for all commits from your local branch to the remote branch of your choice, this is why many developers work on features and significant changes in separate branches to make the management easier for all team members. It’s much simpler to have each team member working out of their local branch and then submitting pull requests, rather than having all team members committing and pushing to the master branch.

Using Git Ignore

Go to your Repository settings, which is in the top navigation bar > Repository > Repository Settings.

Git Ignore

Once you’ve opened up your repository settings, click on Ignored Files any files you list here will be included in the .gitignore, which means they won’t be included on commit and instead be excluded.

Git files have been ignored

When you are happy with the changes you’ve made to your .gitignore click on Save.

Pull and Push

You can Pull and Push within the GitHub Desktop application with a couple of simple keyboard shortcuts.

CMD + P. Will push your code changes to the remote repository. Up + CMD + P. Will pull down the latest remote updates.

SourceTree

One of the alternativse to GitHub Desktop application, is an application called SourceTree, developed by Atlassian, the company behind Bitbucket. SourceTree can be used for both Bitbucket and GitHub repositories.

The layout of the SourceTree application is very simple, though not as straightforward as the GitHub Desktop application and is let down by it’s overly confusing/cluttered interface when managing each repository.

SourceTree Layout

There are two main tabs, local and remote. On the Local tab you’ll see all your local repositories you’ve added to SourceTree. On the Remote tab you’ll see all the remote repositories you have synced with the Bitbucket or GitHub account that you have linked to the SourceTree application.

Exploring the interface

Double click on any local or remote repository to open the primary interface to manage your code base.

SourceTree Main repository interface

Making a Commit

Making a commit is simple, just check the box next to the files you want to commit then enter your commit message and press Commit.

SourceTree Making a Commit

Once you’ve made your commit if all locally modified files are committed, you’ll see a message in SourceTree reading “Nothing To Commit”.

Exploring Branches

At the right-hand side of the application you’ll see all the branches for the repository you currently have opened. You’ll also see all commits for that branch as well. Along with the option to change branch as well as which branch to view commits from. For example all branches, this is very similar to the way the GitHub Desktop application works and is simple enough in it’s easy to use nature.

Checking Commits

Creating a Branch

To create a branch, click on Branch enter your new branch name. Then pick if you want to copy directly from the parent branch (master), or if there is a specific commit you want to work from. Make sure the check box for checkout branch is selected and then click on Create Branch.

Creating a Branch

You’ll then see your new branch on the right hand side under Branches.

Creating a Repository

To create a repository go back to the main SourceTree interface and click on New Repository. You can pick to clone from URL, add an existing local repository, create a new local repository, or create a new remote repository.

Creating a Repository

If we pick create a new local repository, just fill in the destination path which is the local path of where the repository will be accessible on your PC, then enter repository name and select the repository type which can be either Git or Mercurial. There’s also the option to setup a remote repository at the same time as creating the local one. Leave that unchecked to create the remote repository at a later date.

Create a Repository part 2

Once created, you’ll see the new repository in your list of local repositories, double clicking the repository name open up the code base management interface for that repository.

Tagging

One option you’ll see that is different to the GitHub Desktop application is the ability to Tag. This is useful when you’re making a public release and want to keep track of your code. If you were making an initial public release of your new project, click on tag and enter the tag name, which could be the version number such as 1.0.0. then click on Add.

Making a Pull Request

Making a pull request in SourceTree has a few additional steps to creating one in the GitHub Desktop application, which overall lets SourceTree down, as it involves leaving the application which gives it a poor user experience, when compared next to the GutHub Dekstop application.

Make sure you’ve chosen which branch you’re working from and add/edit your code as needed. Once you’re ready to commit click on Commit, pick your files and enter your commit message. Now click Commit Options and select Create Pull Request.

Create Pull Request

Now click on the Commit button at the bottom right-hand side of the application. When you click that, you’ll see an overlay about selecting which local branch and which remote branch should be used for the pull request. When you’re happy with that, click on Create Pull Request on Web.

Create Pull Request on Web

That will open the Bitbucket web interface if you are using a Bitbucket based repository, here you can enter the name and description for the pull request, as well as entering a reviewers name. If you select a user as a reviewer, they’ll receive a notification about the pending pull request. When your happy with what you’ve entered click on Create Pull Request.

Pull Request creation

Your pull request will then be created and can be managed from the Bitbucket web interface.

Comparing Branches

To compare branches, make sure you are on another branch than master, then right click on the master branch to bring up the menu and select Diff against current.

Compare Branches

Once you’ve selected that option, you’ll see the comparison between the branch you’ve selected and master, for example development and master.

Compare branches Diff

Which Application is Better?

Neither is technically better than the other, both applications have different interfaces and have different workflows/code base management. If you are just using GitHub and have no plans to start using Bitbucket, then I’d personally recommend going with the GitHub Desktop application. But if you are either exclusively using Bitbucket or a mixture of Bitbucket and GitHub, then it would make more sense to go with SourceTree as you can manage all your repositories from one central application. Overall the GitHub desktop application has the better user experience and user interface over SourceTree.

If you are still deciding between Bitbucket and GitHub as a place to host your code/projects. The primary factor for some will be pricing.

Bitbucket Pricing

Bitbucket is priced based on the amount of users within your company, rather than by how many repositories you have. That means you get unlimited private repositories for free for up to 5 users. With pricing plans going up from $10/month for 10 users to $200/month for unlimited users. Making Bitbucket the most wallet friendly apart from self hosted open source solutions like Gitlab.

Bitbucket Pricing

GitHub Pricing

GitHub works different to Bitbucket, in that you get no private repositories at all without paying, whereas for 5 users on Bitbucket unlimited private repositories are free. On the GitHub personal plan (just you) 5 private repositories would cost you $7/month. Want to share private repositories with your team? You’ll then need a organization plan. That’ll set you back $25 and cover you for 10 private repositories as well as supporting unlimited team members. Which if you run a business could work out cheaper than Bitbuckets pricing structure where it’s based on users rather than repositories, if you run a business that is working on one large project and has 20 or so users that need access, it’ll work out cheaper to use GitHub.

GitHub Pricing

Conclusion

Both GitHub and Bitbucket are great solutions to hosting your code/repositories. Ultimately which one you pick comes down to a personal choice. As you most likely gleaned from this article, I use GitHub. Already have a favourite? Let us know what you prefer in the comments below.

 

Want to read more like this?

Add your email address below to stay in the loop when new content arrives. You'll never miss a post.

Jack Kitterhing

 
  • jrf

    While GitExtensions is not platform independent, for Windows users (or Mono users) it is an awesome alternative. I tried both the GitHub Client as well as Sourcetree, but GitExtensions is the one which stood out in usability, intuitiveness and feature completeness.
    No need to ever go to the command line, I can do *everything* from within the GUI.

    https://gitextensions.github.io/

  • Quasel

    Seems you missed the recent price changes for github – https://github.com/pricing – unlimited private repositorys … there is a big discussion ongoing about the changes …

    • Peter Suhm

      Yeah, it’s very interesting to follow how that will affect the state of things! 🙂

  • chzumbrunnen

    It’s easily possible to have remote repositories on bitbucket managed in GitHub Desktop.

    • Peter Suhm

      Great tip!