Morning Exercise (code along in class, then finish as homework), to teach git branching and merging in preparation for group projects
Title: Happy Fun Ball: Introduction to Git Branching and Merging
Type: Morning Exercise
Duration: "0:45" - As code along + "0:30" - Finish on own for homework
Creator: Karolin Rafalski
Course: WDIR-Matrix
Prerequisites: Fundamentals of Git, CSS, HTML
After this lesson, students will be able to:
- Explain how git's version control allows developers to work differently on projects
- Explain what a git branch is
- Make a git branch
- Switch between branches
- Merge branches
- Resolve a merge conflict
So far, you have been using git to get code (pull) from a remote repository (on github), writing your own code, tracking it with git, and moving (push) the code from your computer (local version) to github.
When using git locally (on your computer), you have been running the commands in Terminal (Command line).
A git command has a minimum of 1 argument.
Git commands are always executed by first typing git
The first argument is the command (or verb), like
git init
(initialize a new git repository)git push
(send the code to a remote location)
The second(+) argument gives the first argument context (when needed)
git add .
(add all files in this directory)git pull origin master
(get all files from the url that has an alias oforigin
, from the branchmaster
)
Lastly, flags can be added
git remote -v
(git show remote(s) and be verbose(give more detail))
Here is a table of our commonly used git commands that we've used in this course so far:
git | Argument | Flag(s)/Additional arguments | Description |
---|---|---|---|
git | init | Initializes a new repository | |
git | add | . or filename |
Takes untracked files and adds them to the staging area so that they can be committed |
git | commit | -m 'some message' | Takes a snapshot of files in the staging area/ saves this version of them as a commit |
git | remote | -v | Shows the remote repositories associated with the local repository. Most repositories have an alias for their urls like origin or upstream |
git | pull | upstream master | Gets files from a url with an alias of upstream from its branch master |
git | push | origin dev | Sends files to a url with an alias of origin to its branch dev |
git | log | --oneline | Shows a log of commits of a repo (--oneline shows a truncated message)q to exit |
git | status | Shows the state of files in a repo (untracked, modified, staged) |
Link to our wiki with a more complete list of git commands
Note: fork
is not on this list because fork
is not a git command; it is github-specific for copying a repository on github to a new location on github.
Git is a VCS (Version Control System). There are a few popular ones, but git ends up being a top choice because of its branching and merging feature.
If we think back to our past projects, when we wanted to implement some major changes to our code and failed our popular options were to
⌘Z
throughout our files and hope for the best- Comment out a ton of code and hope to restore the functionality of our code to a previous version
- Seriously contemplate coding out our project from scratch again
- Curl up into a ball and hope the code would revert via magic
Git's about page has 4 great reasons why it works so well for individuals and large teams.
- Frictionless Context Switching - Switch between branches, whenever! No worries!
- Role-Based Codelines - Have many versions of your code - Production, Development, Day-to-Day etc.
- Feature Based Workflow - Create a new branch for each feature
- Disposable Experimentation - if a branch doesn't work out, you can just walk away or toss it. It has no impact on the working code
You may be thinking 'this sounds too good to be true!' It's not! But there is a catch! Git requires changing the way we are used to working on projects. Which means it takes some time and practice to learn to use git.
To be able to use branches, we will have to learn some new git commands
git | Argument | Flag(s)/Additional arguments | Description |
---|---|---|---|
git | branch | Lists branches | |
git | branch | branch_name | Creates a new branch |
git | checkout | branch_name | Switches branches |
git | checkout | -b new_branch_name | Creates a new branch and switches to that branch |
git | diff | Let's you see the changes that you have made (before git add ) |
Even though these are just five new commands, it is going to take some practice to master them. Let's get started!
Note: You may have noticed that git merge
is missing - we will be merging our branches via github, so we will not use this command.
You have been hired by Wacky Products Incorporated. They are just weeks away from starting a global marketing campaign for their new hot product Happy Fun Ball and they want a top-notch web page to be launched as soon as possible.
Mysteriously, the entire dev team has lapsed into comas and it is up to you to save the project.
As a professional developer, you will do whatever it takes to finish this project! Everything, BUT work directly on the master branch!
- Fork Happy-Fun-Ball (make a copy of this remote repository to your github account):
- Go here and click fork (upper right) to fork it to your personal repo (Don't worry! You can totally delete it after the lesson!)
Show Screenshot
![Upper right on github](https://i.imgur.com/TjcbBOB.png)Show Screenshot
![Copy or Clone button](https://i.imgur.com/6uAnb0R.png)- Navigate to a directory OUTSIDE of wdi-remote-matrix
mkdir
(if you need to) $git clone `[email protected]:your-github-handle/hfb.git`
(use⌘V
to paste the url from github)- The above command should create a new folder inside your current directory and make copy of everything in the Happy Fun Ball remote repository, locally (on your computer) and initialize git.
Let's check:
cd hfb
into the cloned directory and thenls
and check thatindex.html
andmain.css
are in your folder (README.md
&hfb.png
will also be there)
git status
Example output
`On branch master``Your branch is up-to-date with 'origin/master'.`
`nothing to commit, working tree clean`
git remote -v
- to check your remote set upExample Output
origin [email protected]:your-github-handle/hfb.git (fetch)
origin [email protected]:your-github-handle/hfb.git (push)
To help with today's lesson let's be sure we have autocorrect on. Let's test:
git chekotu
Example output:
git: 'chekotu' is not a git command. See 'git --help'.
Did you mean this?
checkout
We can configure git to have autocorrect, if it is not already set as a default. We are going to install it locally (just to this repository). If you end up liking the configuration, you can always install it globally, later.
git config --local help.autocorrect
-if the setting has updated, there will be no message- try mistyping a git command
git chekotu
Example output:
git: 'chekotu' is not a git command. See 'git --help'.
Did you mean this?
checkout
- To make a new branch AND checkout the new branch(we will call our new branch 'dev'):
git checkout -b dev
Example output
Switched to a new branch 'dev'
ls
index.html
&main.css
, etc. - should still be there
git status
to confirm everything looks like it shouldExample output
On branch dev
nothing to commit, working tree clean
- Get this branch on your github repo:
git push origin dev
Example output
* [new branch] dev -> dev
- See your new branch on github (it should be there, refresh if you don't see it. If you still don't see it, let me know and we'll trouble shoot)
It will be a new message along the top of github OR from clicking the
Branch: master
button
atom .
open the files in atomopen index.html
open index.html in the browser (remember you can doopen i
and then presstab
to autocomplete index.html)
We are going to be going between the browser, the command line and Atom frequently. Be sure you can work efficiently and effectively by setting up a good workflow! Start by organizing your browser, command line and Atom so that you can easily switch between them (don't forget to use Spectacle). Close extra tabs and browser windows.
Here is how I worked on this project(You will have to also account for Zoom and Slack):
Browser:
- My repo
- Happy Fun Ball
index.html
- README.md for this lesson
- Color Names (we'll be referring to this a few times, there is a link below)
- All other tabs are closed, no other Browser windows are open
Atom:
- directory tree (toggle view:
⌘\
).- See all Atom shortcuts :
⌘⇧P
- See all Atom shortcuts :
- index.html
- main.css
Take a couple minutes to get familiar with the code you'll be working on.
Your first new feature! Working in index.html
, you will add a link to main.css
, then you will merge it into the dev branch, and then into master.
- Let's make a new branch specifically for our new feature
git branch
- to check that you are on thedev
branch. This command will show all the branches and highlight the one you are on.
git checkout -b link-files
- this will create a new branch (a copy of the branch we are switching from, in this case:dev
) calledlink-files
and check it out
Example output:
`Switched to a new branch 'link-files'`- In the index.html - between the
</title>
and</head>
tags, let's insert a link to our css : <link rel="stylesheet" href="main.css">
⌘S
- Save our changes in atom
⌘R
- Reload our browser view of theindex.html
- The CSS should now be loaded into our
index.html
git status
git add index.html
git commit -m 'index.html and main.css linked'
git push origin link-files
(Remember:origin
andlink-files
can be autocompeletd by usingtab
)Example output:
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 402 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local objects.
To github.com:Krafalski/hfb.git
* [new branch] link-files -> link-files
Screenshot
![github new branch screenshot](https://i.imgur.com/YtFNJEk.png)- See new branch (either a message will pop up or use the left side pull down to see)
- You will either have a yellow bar with your branch name and a green
compare & pull request
or you will have to choose thePull requests
tab (the yellow bar does not always appear. It does not automatically mean that something is wrong)
Note: if you do not get the yellow bar, you will have slightly different navigation to complete this step, a detailed outline is down below in the Part 6: Merge Dev Branch into Master
section.
- Push the
Compare & pull request button
that is on the right of the yellow bar - Select
base:dev
andcompare: link-files
Screenshot
![github pull request](https://i.imgur.com/AW5kmXJ.png)Screenshot
![image of able to merge](https://i.imgur.com/Q3BzVry.png)- All clear! Go ahead and press the
Create pull request
button, wait a moment and you should see a greenMerge pull request
button about midway down.
Screenshot
![image of a successful merge on github](https://i.imgur.com/QFpGVAQ.png)Note: When you work on a team it is unlikely that you would merge your own pull requests
Note: You can refuse a merge and close the pull request by pressing the grey Close pull request
button further down
-
git checkout dev
(Notice: no-b
) -
git pull origin dev
-
Check Atom (
index.html
has the link to CSS) -
Your browser view (
index.html
is displaying with CSS loaded - don't forget to⌘R
/refresh your browser to be sure you are seeing the updated version) -
If everything looks good, let's merge these changes into the master branch
git pull origin master
(this should come back as clean but it is a good habit to pull before you push)
Example output
`From github.com:Krafalski/hfb`` * branch master -> FETCH_HEAD`
`Already up-to-date.`
git push origin dev
(this should also come back as clean - since we have changed nothing in our code), it is good to get in the habit of checking yourself often!
Example output
`Everything up-to-date`- If you are still on the merge page, navigate back to the main view
- Open the
Pull Requests
tab - On the right select the green
New pull request
button - Compare
base: master
tocompare: dev
- Wait to be sure there are no conflicts
- Green
Ceate pull request
button - New screen that lets you add comments, midway to the right press green
Create pull request
button - green
Merge Pull Request
button - green
Confirm Pull Request
button
git checkout master
(Notice: no-b
)git pull origin master
- Check to make sure everything has updated as expected (
index.html
has link to css and when you refresh the browser, the CSS still loads)
Work on a new feature: Working in the main.css
file, you will update the colors of the Happy Fun Ball web page
-
Before we begin, let's make a new branch specifically for our new feature:
- Check that you are on the dev branch **
git branch
will list all your branches and have a*
next to the branch you are on. Then:git checkout dev
git checkout -b color-updates
** GOTCHA: Branches can be created off any other branch. Be sure you are on the branch that you want to branch off of before creating a new branch!
- You probably noticed that index.html had a typo! On (or around) line 19
class="pr"
should actually beclass="price"
. - Let's update that! (Don't forget
⌘S
/save) Now, it's not really our task, or our file to work on, but we're just being proactive and helpful! What could possibly be wrong with that?
- Let's go ahead and
git status
git add index.html
andgit commit -m 'fixed typo in index.html'
, there! We added our changes and put in a descriptive commit message. We are undoubtedly awesome.
- Now let's update the colors in the
body
, let's changecolor
(font color), andbackground-color
to whatever our heart desires. Go ahead and use hexadecimal colors, rgb, hsl or some of the standard web colors.
- When we've found the colors we like, we can go ahead and
- ``⌘S
/save
git status
- see the status of our filesgit diff
- see what we have changedgit add main.css
andgit commit -m 'updated colors'
git log --oneline
-see our commits so far (q
to exit)
git checkout dev
(Notice: no-b
)
- See that our changes are gone
- Refresh the page and see that the page has reverted to the original version
Let's get back to our changes!
git checkout color-updates
(don't forget you can usetab
to autocomplete branch names too!)
Go through atom and the browser to see that your changes have come back
- Let's make one more color change, now that we are on our color-updates branch.
.price
change the color from orange, to whatever color you want - Can't find
.price
? ⌘F
will open a find/replace tab at the bottom of Atom and let you look for.price
esc
to close the find/replace tab- make your changes (we are changing the color of elements with the class of
price
) ⌘S
-Don't forget to save your file- Refresh your browser to see your changes
There was an error! The price of Happy Fun Ball is supposed to be $24.95, not $14.95!
Let's make a new branch off of the dev branch to hotfix this major problem! **
git checkout dev
- Oops! We forgot to
git add .
&git commit -m''
!!
error: Your local changes to the following files would be overwritten by checkout:
main.css
Please commit your changes or stash them before you switch branches.
Aborting
-
We will commit our changes (we will not cover
stash
today): -
git add .
-
git commit -m 'changed .price color'
-
git checkout dev
-
git checkout -b price-fix
to make a new branch off of dev (and automatically be switched to the new branch) **
- Update the price of happy fun ball from
$14.95
to$24.95
(~ line 19 ofindex.html
) ⌘S
/save
git add index.html
git commit -m 'fixed price of Happy Fun Ball in index.html'
git pull origin dev
(this should come back clean, but it is good practice to pull before pushing)git push origin price-fix
to create a new branch on github
** GOTCHA: Branches can be created off any other branch. Be sure you are on the branch that you want to branch off of before creating a new branch!
- See our new branch (either a message will pop up or use the left side pull down to see)
Screenshot
![github all clear](https://i.imgur.com/L72S16y.png)- All clear! Go ahead and press the
Create pull request
button - A new screen will appear, enter a message if you like, otherwise push the
Create pull request button
merge pull request
button, wait a moment, then go ahead and confirm the merge! (Note: when you work on a team, it is unlikely that you would merge your own pull requests)
Screenshot
![Merge Pull Request message and button](https://i.imgur.com/2yUuGmq.png)- Whew! That was exciting! It's nice to be back to working on this feature. We know there were changes to the
dev
branch, so let's get them
git checkout color-updates
git pull origin dev
- to pull down your changes from the remote to your local copy
...
...
...
ERROR! Merge conflict! Example output:
* branch dev -> FETCH_HEAD
c1df4fd..cc1ba3e dev -> origin/dev
Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.
Uh-oh...
-
Delete everything between (including these lines as well)
<<<<<<< HEAD
and========
:
Which is ALL of this:
<<<<<<< HEAD
<h3 class="price">Only $14.95</h3>
=======
-
This conflict is our doing, let's get rid of our mistake from working in index.html when we were only supposed to be working in main.css and keep the change made from the price-fix branch
-
Now that we've removed the conflict let's finish cleaning up the conflict and remove the line
>>>>>>> 3b73c340f2c158a80ce20828fd94ad83ea60b444
Note: your numbers/letters after the >>>>>>>
should be different
- Let's also clean up any extra white space
⌘S
git add index.html
git commit -m 'fixed merge conflict'
git push origin color-updates
Example output
Counting objects: 11, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (11/11), 1.05 KiB | 0 bytes/s, done.
Total 11 (delta 7), reused 0 (delta 0)
remote: Resolving deltas: 100% (7/7), completed with 3 local objects.
To https://github.com/your-github-handle/hfb
* [new branch] color-updates -> color-updates
- We fixed it! Now we can continue working on our project
- Make your final updates to
main.css
git add main.css
git commit -m 'updated colors'
git push origin color-updates
- Pull Request
- Compare
base: dev
tocompare: color-updates
- Wait to be sure there are no conflicts
- Create Pull Request
- Merge Pull Request
- Confirm Pull Request
git checkout dev
git pull origin dev
-
Take the time to review that the changes to the dev branch that you wanted are there and there are no errors or bugs
-
Only working code should ever be merged to master!
-
If everything is ok, go ahead and merge the changes to master
-
If you made changes, don't forget to
-
git add
and -
git commit -m ''
git pull origin dev
(yes, we just did this, but it is a good habit to do a pull before doing a push. It is ok if git tells youAlready up-to-date
)git push origin dev
(it is ok if git tells you thatEverything up-to-date
)
- Pull request
- Compare
base: master
tocompare: dev
- Wait to be sure there are no conflicts
- Create Pull Request
- Merge Pull Request
- Confirm Pull Request
- Check to see that your changes have been successfully made to the master branch
- Make a new branch, continue to update the Happy Fun Ball web page, and merge back your changes (New Feature Ideas: change color of Happy Fun Ball. Add a google font. Add some js/jQuery to show/hide Happy Fun Ball's Warnings.)
- Research and try
git stash
- Delete a branch locally and remotely :
git push origin --delete branch_name
git branch -d branch_name
- Well, it was fun while it lasted?