Skip to content

Basic Branching Workflow in Git

When you are working on a team project, you need a way to make sure that people’s changes don’t get all mixed up and overwrite each other. Two practices in your team with help with this:

  1. Be clear about who is working on what. Assign specific files to people to work on.
    • An extra tip here is to separate out your CSS into different files for different parts of the design so you can not all have to work on one giant CSS file. Some suggestions:
      • typography.css
      • color.css (if you can use CSS variables for this even better)
      • layout.css (alternatively you can have a css file for each page or template that has a unique layout
      • nav.css
      • style.css (even with the specific sheets above it can still be helpful to have a general stylesheet where miscellaneous items can go.
  2. Use Branching

This post is about the second recommendation.

Branching Cheatsheet

Here are the basic commands:

  • copy only one line at a time. Don’t copy # on (greyed out) those are just comments
git checkout main
git pull
git checkout -b myBranch # use this if the branch does not exist
git checkout myBranch  # use this if the branch already exists
# do your work
# commit your work, use visual or use below
git add .
git commit -m "commit message here"

# you can pull the changes from main into your branch to see if there are any issues, this is optional
# if ther are issues, then fix and redo git add and commit.
git pull origin main

# push your branch to GitHub
git push # use this one if the branch already existed on GitHub
git push --set-upstream origin myBranch   # Us this if you just created with checkout -b

# =======================================
# OPTIONAL: here is how you merge in Git. You can also do the merg on GitHub with a pull request instead of this.
git checkout main  #go back to the branch you will merge into
git pull # make sure that branch is up to date
git merge myBranch
# if you have any issues they will show here and you will have to resolve them (merge conflicts) before moving on.
git push

# ========================
# OPTIONAL delete your branch if you won't use it again
git branch -d myBranch

The Workflow

Here is a more detailed explanation

Imagine Git branching like having different rooms in a house for different tasks. Each room (or branch) is your personal space to work on a specific task, without disturbing the rest of the house (the ‘main’ branch). Here’s how you move around the rooms with terminal commands, and remember to check the main room for any updates before you combine your work:

Step 1: Make sure your local main branch is up to date with the GitHub main branch

When you make a new branch it creates an exact copy of the current branch. So, before you make the new branch make sure your current branch is up to date. 

git checkout main
git pull

Step 2: Create a new branch

Creating a new branch is like creating a new room to do your work. Git will help you out by copying everything over exactly as it was from the current branch when you make the new branch. In the example below a new branch named feature-x is created. The -b part of the command tells Git to create a new branch.

git checkout -b feature-x

Step 3: Make changes and commit them

As you make changes here, they only affect your branch. People working on their own branches or the main branch will not see your code. Make sure to commit your changes when you are done. You can do this in two ways

Option 1:

Make the commits visually with the tools in Visual Studio Code like we have done so far in class.

Option 2

Using Git commands in the terminal (they will commit ALL changes you have made). Paste and run one line at a time

git add .
git commit -m "Add new feature"

Replace Add new feature with your own message. Be sure to KEEP the QUOTES: git commit -m “my commit message”

Step 4: Pull in the latest updates from the main branch

Before integrating your work back into the main project, ensure you’re working with the latest version. While still on your feature branch:

git pull origin main

If there were any additions you will have to commit the changes you pulled using the same two options from step 3 above.

If there are any merge conflicts at this point you will have to deal with them before you can commit. If you’re having trouble with this, contact Prof Stein on Discord.

Step 5: Merge your changes into the main branch

There are two ways to do this

Option 1: Create a Pull Request in GitHub.com repository

Start by moving your branch up to GitHub.com (replace feature-x with your branch name):

git checkout feature-x

This code will push your new branch to GitHub (again replace feature-x with your branch name, keep origin)

git push --set-upstream origin feature-x

If you get anerror that says something like “the current branch has no upstream branch, copy the line that starts with git push and run that.

Then you go to your repository in Github. You may see a message that shows your branch name with a Compare & pull request button. YOu can click that. OR you can click on the pull request button and create a new pull request.

I will add in a video showing this process.

Option 2: Use Git Terminal Commands to merge

Go back to the main branch

git checkout main

pull in any changes just in case your teammate has made a change

git pull

Merge your branch with main

git merge feature-x

Push the new version of main to GitHub. If you don’t do this, your teammates won’t see the changes.

git push origin main

OPTIONAL: you can delete the branch you were working on now that you have merged your changes

git branch -d feature-x

Tags:

Leave a Reply