Why you should be using Git Branches in LS 101

A step by step guide to the magical world of Git Branching

“It is easy to shoot your foot off with git, but also easy to revert to a previous foot and merge it with your current leg.”

— Jack William Bell

Why you should be using git branching

While working through Launch School, you will end up working on games such as Rock Paper Scissors, Tic-Tac-Toe, and other similar projects. That wonderful moment finally arrives when your code is working as it should and you can happily move on to the next lesson. Then you see that you have to add some bonus features to the game. OK, that sounds like fun.

Inevitably, you start to add new features and end up breaking your code. This is normal, we’ve all been there. What most beginners will do is Ctrl + Z (undo) until the code starts working again, but now you’ve lost all your progress and it’s a very messy way to undo changes.

The magic of git branching

What if I told you there was an almost magical way to try out new things, add new features, and not have to worry about breaking your code in the process? Well, today is your lucky day. Thanks to the magic of git branching, you can try out new features and undo them at any time. You can restore your code to a working state with just a few short commands. So how does it work?

I’m going to assume you have gone through the Introduction to Git book that is required reading in the Launch School prep phase, and that you are committing your code regularly and pushing it to GitHub. If not, now is the best time to start!

Every time you make a git commit, you are saving a snapshot of your code. This allows you to branch your code, which essentially means you can work on a copy of your code without affecting your main branch. It’s not actually making a copy but that’s the easiest way to think about it.

How to use git branches

If you use VS Code, the easiest way to follow these instructions is to open your project folder, click on the ‘Terminal’ tab at the top of the screen and select ‘New Terminal’.

I’m going to use my project as an example. I’m currently working on my project Launch School Time Estimator, and I want to add a new feature. I type the command git status into the terminal and I get this output:

[eamon@fedora lstimeestimate]$ git status
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean

This message means that all my changes have been committed. If you get a different message, that means you have to add and commit your code before continuing. You can do that by typing git add . and git commit -m 'insert your message here'.

Note that I will put a reference list of all the necessary commands at the bottom of this article.

Creating a new branch

To create a new branch, I type git checkout -b development into the console, and in response git prints the message: Switched to a new branch ‘development’. You can name the branch whatever you like, for the purposes of this article I’m using development.

git checkout -b development is shorthand for git branch development and git checkout development, it creates a new branch and switches to it in one command instead of having to write both commands out separately.

Using a new branch means that any changes I make to this branch will not affect the main branch. So I’m free to experiment without having to worry about messing up my code. But happens if I mess up and want to restore my original code? All I have to do is switch back to the main branch and delete the development branch.

I can do that by typing git checkout main into the console. Now my changes have disappeared and my code is restored to the working snapshot we saved earlier. And I can delete the development branch by typing git branch -d development.

Merging changes back to main

OK, that’s simple enough, but what if I add a new feature in the development branch and everything works as expected? In that case, I can merge the development branch into the main branch, which incorporates any changes I’ve made back into the main branch.

You first have to commit your changes to the development branch if you haven’t already done so, so run git add . to stage all your files for the commit, then type git commit -m 'insert your commit message here'. Your new feature has now been saved to your development branch and all we need to do is merge it back into the main branch.

To do so, first switch back to the main branch by typing git checkout main. Now your newly added code has disappeared, but that’s OK as this is what allows you to undo any mistakes if necessary. Now to merge branches and incorporate your new features from the development branch to the main branch type git merge development.

You should see output something like this:

[eamon@fedora lstimeestimate]$ git merge development
Auto-merging app.js
Merge made by the 'recursive' strategy.
 app.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

Now your main branch contains the same code as your development branch, and you can feel free to push it to GitHub or to wherever you store your code.

Note that if you delete a line of code in your development branch and then merge that branch, it will also delete that line from your main branch. So branches can be used both to add and remove code.

Now that your main branch and development branch both contain the updated code with your new features, you can delete the development branch by running git branch -d development.

Conclusion

You can open as many branches as you like and you can even open different branches for different features, but that is beyond the scope of this article. For now, practice using git branches every time you add a new feature to your project, soon it will become second nature.

Now is the best time to get comfortable with using git branches as they are an essential part of a developer's workflow. Feel free to message me on Slack if you have any questions.

List of all the git commands contained in this article:

• git add . — Stage your files, preparing them for the next commit.
• git commit -m 'your message here' — Commit your changes, creating a snapshot of your code.
• git checkout -b development — Creates a new development branch and switches to it. This is shorthand for the following two commands.
• git branch development — Creates a new branch called development.
• git checkout development — Switches you over to the development branch.
• git checkout main — Switch back to the main branch.
• git merge development — Merge the changes from development to the current branch.
• git branch -d development — Delete the development branch.
• git branch -D development — Force delete the development branch.
• git status — Shows you the status of your current branch.

If you want to learn about some of the more technical details of how branching works, take a look at this article: https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell

Check out some of my other articles on development, Launch School, and JavaScript here.