Git UI Tools Guide

Comprehensive Guide to Git GUI Applications - GitHub Desktop, Sourcetree, Fork & More

---

Introduction

While VS Code has excellent built-in Git support, dedicated Git GUI tools offer additional features like visual branch graphs, enhanced diff viewers, and streamlined workflows. This guide covers the most popular Git UI tools and how to use them with our NetSuite development workflow.

Why Use a Git UI Tool?

Benefit	Description
Visual Branch Graph	See your entire branch history as an interactive diagram
Enhanced Diff Viewer	Side-by-side file comparisons with syntax highlighting
Simplified Workflows	One-click operations for common tasks
Better Conflict Resolution	Visual merge conflict editors
Repository Management	Manage multiple repositories in one place

---

Tool Comparison Overview

Tool	Price	Best For	Platform
GitHub Desktop	Free	Beginners, GitHub users	Windows, Mac
Sourcetree	Free	Advanced users, Bitbucket/GitHub	Windows, Mac
Fork	$49.99	Speed, clean interface	Windows, Mac

Decision Matrix: Which Tool Should You Use?

┌─────────────────────────────────────────────────────────────┐
│                    CHOOSING A GIT UI TOOL                   │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Are you new to Git?                                        │
│       │                                                     │
│       ├── YES ──► GitHub Desktop (simplest interface)       │
│       │                                                     │
│       └── NO ──► Do you need advanced features?             │
│                       │                                     │
│                       ├── YES ──► Sourcetree or Fork        │
│                       │                                     │
│                       └── NO ──► VS Code built-in is fine   │
│                                                             │
│  Need visual branch graphs? ──► Sourcetree                  │
│  Need speed & simplicity? ──► Fork                          │
│  Using GitHub primarily? ──► GitHub Desktop                 │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

GitHub Desktop (Recommended for Beginners)

GitHub Desktop is a free, open-source application that simplifies Git workflows with a clean, intuitive interface. It's the official Git client from GitHub.

Installation

1. Download from desktop.github.com
2. Run the installer
3. Sign in with your GitHub account when prompted
4. Allow GitHub Desktop to configure Git with your GitHub credentials

Initial Setup

Cloning the Repository

1. Click File → Clone Repository (or Ctrl+Shift+O)
2. Select the GitHub.com tab
3. Find your repository in the list, or paste the URL
4. Choose the local path (e.g., C:\Projects\netsuite-production)
5. Click Clone

┌────────────────────────────────────────────────────────┐
│  Clone a Repository                                    │
├────────────────────────────────────────────────────────┤
│                                                        │
│  GitHub.com    URL    [Select Tab]                     │
│                                                        │
│  ┌──────────────────────────────────────────────────┐  │
│  │  🔍 Filter repositories                          │  │
│  ├──────────────────────────────────────────────────┤  │
│  │  📁 org-name/netsuite-production                 │  │
│  │  📁 org-name/netsuite-sandbox                    │  │
│  └──────────────────────────────────────────────────┘  │
│                                                        │
│  Local Path: C:\Projects\netsuite-production           │
│                                                        │
│                              [Clone]                   │
└────────────────────────────────────────────────────────┘

Understanding the Interface

Area	Location	Purpose
Current Repository	Top-left dropdown	Switch between cloned repositories
Current Branch	Top-center button	View/switch/create branches
Fetch/Pull/Push	Top-right button	Sync with remote repository
Changes Tab	Left panel	View modified files and stage changes
History Tab	Left panel	View commit history with visual graph
Diff Viewer	Right panel	See file changes with syntax highlighting

---

Daily Workflow with GitHub Desktop

Creating a New Feature Branch

1. Click the Current Branch button (shows develop)
2. Click New Branch
3. Enter branch name: feature/vendor-NS123-invoice-automation
4. Ensure "Create branch based on..." shows develop
5. Click Create Branch

┌─────────────────────────────────────────┐
│  Create a Branch                        │
├─────────────────────────────────────────┤
│                                         │
│  Name: feature/vendor-NS123-invoice     │
│                                         │
│  Create branch based on...              │
│  ┌─────────────────────────────────┐    │
│  │  ○ develop              ✓       │    │
│  │  ○ main                         │    │
│  └─────────────────────────────────┘    │
│                                         │
│                    [Create Branch]      │
└─────────────────────────────────────────┘

Making Commits

1. Make changes to your files in VS Code or any editor
2. Switch to GitHub Desktop - changed files appear automatically in the Changes tab
3. Review each file's changes in the diff viewer (right panel)
4. Check/uncheck files to include in commit
5. Write a commit message:
   • Summary (required): [NS-123] Add invoice validation logic
   • Description (optional): Additional details
6. Click Commit to [branch-name]

Commit Message Format

Follow our team standard: [TICKET-ID] Brief description of what changed

Pushing Changes

After committing, the button in the top-right changes:

Button Text	Meaning	Action
Publish branch	Branch doesn't exist on GitHub yet	Creates branch on GitHub
Push origin	Commits ready to upload	Pushes commits to GitHub
Fetch origin	Check for remote changes	Downloads info (not files)
Pull origin	Remote has new commits	Downloads and merges changes

Click the appropriate button to sync with GitHub.

Creating a Pull Request

1. After pushing your branch, click Create Pull Request (or use Branch → Create Pull Request)
2. GitHub Desktop opens your browser to GitHub.com
3. Fill in the PR details:
   • Base: develop
   • Compare: your feature branch
   • Title: Brief description
   • Description: Testing done, changes made, etc.
4. Click Create pull request

┌─────────────────────────────────────────────────────────────┐
│  GitHub Desktop                              [Push origin]  │
├────────────────┬────────────────────────────────────────────┤
│                │                                            │
│  Changes (3)   │   Modified: src/FileCabinet/invoice.js     │
│  ○ History     │   ──────────────────────────────────────   │
│                │   - var taxRate = 0.08;                    │
│  ┌──────────┐  │   + var taxRate = 0.10;                    │
│  │ ✓ file1  │  │                                            │
│  │ ✓ file2  │  │   + // Added validation for EU orders      │
│  │ ✓ file3  │  │   + if (order.country === 'EU') {          │
│  └──────────┘  │   +   validateEUCompliance(order);         │
│                │   + }                                       │
│  Summary       │                                            │
│  [NS-123] Add  │                                            │
│  invoice valid │                                            │
│                │                                            │
│  Description   │                                            │
│  [Optional]    │                                            │
│                │                                            │
│  [Commit to feature/vendor-NS123-invoice]                   │
└─────────────────────────────────────────────────────────────┘

---

Handling Merge Conflicts in GitHub Desktop

When you try to merge and conflicts occur:

1. GitHub Desktop shows a warning: "Resolve conflicts before merging"
2. Click Open in Visual Studio Code (or your preferred editor)
3. Resolve conflicts in the editor (see Merge Conflicts Guide)
4. Save the files
5. Return to GitHub Desktop
6. The resolved files appear in Changes
7. Commit the merge resolution

info

GitHub Desktop integrates well with VS Code for conflict resolution. It automatically detects when you've resolved conflicts and saved the files.

---

GitHub Desktop Tips & Shortcuts

Shortcut	Action
Ctrl+Shift+O	Clone repository
Ctrl+Shift+N	Create new branch
Ctrl+Enter	Commit changes
Ctrl+P	Push to origin
Ctrl+Shift+P	Pull from origin
Ctrl+B	Show/hide branch list
Ctrl+1	Show Changes tab
Ctrl+2	Show History tab

---

Sourcetree

Sourcetree is a free Git GUI from Atlassian that offers more advanced features than GitHub Desktop, including a visual branch graph and detailed history view.

Installation

1. Download from sourcetreeapp.com
2. Run the installer
3. Create or sign in with an Atlassian account (free)
4. Choose Git as your version control system
5. Connect your GitHub/Bitbucket account in Tools → Options → Authentication

Key Features

Feature	Description
Visual Branch Graph	Interactive commit history with branch visualization
Interactive Rebase	Reorder, squash, or edit commits visually
Git Flow Integration	Built-in support for Git Flow branching model
Submodule Support	Manage Git submodules easily
Custom Actions	Create your own toolbar buttons for common tasks

Interface Overview

┌─────────────────────────────────────────────────────────────────┐
│  Sourcetree - netsuite-production                               │
├───────────────────────────┬─────────────────────────────────────┤
│  WORKSPACE               │                                      │
│  ├── File Status         │   ┌─────┐  ┌─────┐  ┌─────┐         │
│  ├── History             │   │ ● ──├──┤ ● ──├──┤ ●   │ main    │
│  └── Search              │   └──┬──┘  └─────┘  └─────┘         │
│                          │      │                               │
│  BRANCHES                │   ┌──┴──┐  ┌─────┐  ┌─────┐         │
│  ├── main                │   │ ● ──├──┤ ● ──├──┤ ●   │ develop │
│  ├── develop             │   └──┬──┘  └──┬──┘  └─────┘         │
│  └── feature/            │      │        │                      │
│      └── vendor-NS123    │   ┌──┴──┐  ┌──┴──┐                   │
│                          │   │ ●   │  │ ●   │ feature/vendor-   │
│  REMOTES                 │   └─────┘  └─────┘ NS123             │
│  └── origin              │                                      │
│                          │   Visual Branch Graph                │
└───────────────────────────┴─────────────────────────────────────┘

Basic Workflow in Sourcetree

Creating a Branch

1. Right-click on develop in the left sidebar
2. Select Branch from develop...
3. Enter branch name: feature/vendor-NS123-description
4. Click Create Branch

Committing Changes

1. Click File Status in the left sidebar
2. Select files to stage (check the boxes or click Stage All)
3. Enter commit message at the bottom
4. Click Commit

Pushing and Pulling

• Push: Click the Push button in the toolbar
• Pull: Click the Pull button in the toolbar
• Fetch: Click the Fetch button to check for remote changes

Viewing History

1. Click History in the left sidebar
2. See the visual branch graph with all commits
3. Click any commit to view its changes
4. Right-click commits for options (cherry-pick, revert, reset, etc.)

---

Fork

Fork is a fast, lightweight Git client known for its speed and clean interface.

Installation

1. Download from git-fork.com
2. Run the installer
3. The app is free during evaluation, then $49.99 for a license

Key Features

Feature	Description
Speed	Extremely fast, even with large repositories
Quick Launch	Open repos from the command line with fork open
Image Diff	Visual comparison of image changes
Interactive Rebase	Easy commit manipulation
Merge Conflict Resolver	Built-in conflict resolution tool

Interface Overview

Fork has a clean, minimal interface:

┌─────────────────────────────────────────────────────────────┐
│  Fork - netsuite-production                                 │
├─────────────────────────────────────────────────────────────┤
│  [Fetch] [Pull] [Push] [Branch] [Merge] [Stash] [Terminal]  │
├───────────────┬─────────────────────────────────────────────┤
│               │                                             │
│  Branches     │   ●───●───●───●───●  main                   │
│  ├── main     │        \                                    │
│  ├── develop  │         ●───●───●  develop                  │
│  └── feature/ │              \                              │
│               │               ●───●  feature/vendor-NS123   │
│  Remotes      │                                             │
│  └── origin   │                                             │
│               │                                             │
│  Tags         │                                             │
│               │                                             │
└───────────────┴─────────────────────────────────────────────┘

---

Comparison: VS Code Git vs Dedicated UI Tools

When to Use VS Code Built-in Git

Scenario	Why VS Code Works Best
Quick commits during coding	Stay in your editor, no context switching
Simple branch operations	Create, switch, delete branches easily
Viewing file diffs	Inline diff viewer while editing
Basic push/pull	Sync button in status bar
Resolving simple conflicts	Built-in merge editor

When to Use a Dedicated Git UI Tool

Scenario	Why Dedicated Tools Work Better
Reviewing branch history	Visual commit graph is clearer
Complex merge operations	Better visualization and control
Managing multiple repositories	Switch between repos easily
Interactive rebase	Visual interface for commit manipulation
Large file diffs	Dedicated diff viewers handle better
Team collaboration	PR management, code review features

Using Both Together

The best workflow often combines both tools:

┌─────────────────────────────────────────────────────────────┐
│                    RECOMMENDED WORKFLOW                     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────┐         ┌─────────────────┐            │
│  │    VS Code      │         │  GitHub Desktop │            │
│  │    Built-in     │         │  or Sourcetree  │            │
│  └────────┬────────┘         └────────┬────────┘            │
│           │                           │                     │
│           ▼                           ▼                     │
│  • Write code                • View branch history          │
│  • Quick commits             • Create pull requests         │
│  • Switch branches           • Review complex diffs         │
│  • Simple push/pull          • Resolve merge conflicts      │
│  • View inline diffs         • Interactive rebase           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Recommended Setup

Install GitHub Desktop alongside VS Code. Use VS Code for coding and quick Git operations, switch to GitHub Desktop when you need visual history or PR management.

---

Common Operations Quick Reference

This table shows how to perform common operations across different tools:

Operation	GitHub Desktop	Sourcetree	Fork
Clone repo	File → Clone	File → Clone	File → Clone
Create branch	Branch → New Branch	Right-click → Branch	Right-click → New Branch
Switch branch	Click current branch dropdown	Double-click branch	Double-click branch
Stage files	Check boxes in Changes	Check boxes or Stage All	Check boxes or Stage All
Commit	Enter message + click Commit	Enter message + click Commit	Enter message + click Commit
Push	Push origin button	Push button	Push button
Pull	Pull origin button	Pull button	Pull button
Create PR	Branch → Create PR	Right-click → Create PR	Repository → Create PR
View history	History tab	History in sidebar	All Commits view
Merge	Branch → Merge	Right-click → Merge	Right-click → Merge
Resolve conflicts	Open in editor button	Right-click → Resolve	Resolve Conflicts button

---

Team Recommendations

For Vendor Team Developers

Experience Level	Recommended Tool
New to Git	GitHub Desktop - simplest learning curve
Comfortable with Git	VS Code built-in + GitHub Desktop for PRs
Advanced user	Sourcetree or Fork for visual graph

For IT Team Developers

Experience Level	Recommended Tool
New to Git	GitHub Desktop - easy onboarding
Intermediate	Sourcetree - more features when needed
Advanced/DevOps	Fork or command line + VS Code

For New Employees

We recommend starting with GitHub Desktop because:

1. Simplest interface - fewer buttons and options to confuse beginners
2. GitHub integration - seamless with our GitHub repositories
3. Safe defaults - harder to make destructive mistakes
4. Clear workflow - obvious path from changes → commit → push → PR

After 2-3 months, explore other tools if you want more advanced features.

---

Troubleshooting Common Issues

Authentication Issues

Problem: "Authentication failed" or "Permission denied"

Solution:

1. In GitHub Desktop: File → Options → Accounts → Sign out and sign in again
2. In Sourcetree: Tools → Options → Authentication → Remove and re-add account
3. In Fork: File → Accounts → Remove and re-add account

Repository Not Showing

Problem: Can't find repository in the tool

Solution:

1. Ensure you have access to the repository on GitHub
2. Try cloning via URL instead of browsing repositories
3. Check if the repository is private (may need to grant additional permissions)

Sync/Push Failures

Problem: Push or pull fails with errors

Solution:

1. Fetch first to check for remote changes
2. Pull before push if remote has newer commits
3. Check network/VPN connection
4. See Git Troubleshooting Guide for more solutions

---

Additional Resources

• Git User Guide (VS Code) - Complete VS Code Git guide
• Git Commands Reference - Command line alternatives
• Git Workflows - Our branching strategy and workflows
• Merge Conflicts Guide - Detailed conflict resolution
• GitHub Desktop Documentation - Official docs
• Sourcetree Documentation - Official docs
• Fork Documentation - Official docs