In this lab you will practice following a workflow that will help you to collaborate as an engineering team on joint project that is stored in git.
The lab will walk you through the following steps:
For the purposes of this lab, each team member will pick one of the following colors.
- Red
- Green
- Blue
- Yellow
We will use each team members color as their name in the instruction below. Before you start with lab, agree within your team which team member gets which color.
- Pick one team member to fork (= copy) the lab repository to
their Github space:
- Follow this link
- Click on the button labeled Fork on the top right of the screen
- Select your personal github space as the destination where the team repository will be created.
- Permission all team members as collaborators:
- Click the Settings button on the just created fork of the project repository
- Select Collaborators, and add all team members as collaborators
- Each team member should accept the collaboration invitation.
- [Optional] Protect the master branch of the repository from being written to directly:
- Click the Settings button on the just created fork of the project repository
- Select Branches adn then click on Add rule in Branch protection rules and check off the following:
- โ Require pull request reviews before merging
- โ Include administrators
- Each team member now should clone the team repository to their computer. In git bash run:
git clone <link-to-team-repository>
The instrunctions below are written for team memeber Red, but should be followed accordingly by the other team members as well.
-
In git bash, ensure you are in the folder/directory that contains the project.
Run
git remote -v
- this should list the project repository on the Github server and look similar to this:origin [email protected]:jadelet/team-workflow-lab.git (fetch) origin [email protected]:jadelet/team-workflow-lab.git (push)
-
Create a branch called
red
for you to do your work on:git checkout -b red
Note: Branch names should brief, but descriptive. They must not contain spaces, but people use hyphens to separate words if needed.
-
In the
docs
folder add a file calledred.md
with the contentTeam member RED is John Doe.
[Optional] Check if git notices the new file:
git status
This should list
docs/red.md
in red, indicating it is a new file that needs to be added. -
Add the file the file to git:
git add docs/red.md
Running
git status
will show the file in green now, indicating that the file is not ready to be commitedCommit the file
git commit -m 'add file red.md showing who team member red is'
-
Commit the content of the feature branch to the team repository on Github:
git push -u origin red
Note: Remember, at this point you are on your feature branch red, but this branch does not exist yet in the team repository on Github. The push command creates this new branch in the team repository. The flag
-u
in the command connects the local copy of your branch to the new created branch on the server. This way, going forward, future commits can be made usinggit push origin red
. -
Create a Pull Request (PR) to request a code review and merge the code into the
master
branch:-
Go to the team repository on Github and click on New Pull Request.
-
In the window that opens up, make sure the right button says
red
(the name of the source branch) and the left button saysmaster
(the name of the target branch). -
Add a brief comment about the changes that were made in this update
-
Click create pull request.
-
Assign a team member to review the code: under Assignees add one of your team members. In this example, assign the PR to team member Blue.
-
-
Team member Blue now reviews the changes and merges it into the
master
branch:-
Blue opens the team repository on Github and selects the Pull requests tab towards the top of the page.
-
Open the pull request that Red had created and click on Files changed. This will show all the changes that Red made.
-
[Optional] It is possible to add comments to the changes that Red made. Hover over a new line (one with a green background), towards the line number. and then click on the blue
+
symbol that appears. Enter a short comment. Click either Add single comment or Start a review depending on wether your planning to provide more comments. -
To approve the changes, click on the green button Review changes, select Approve and click submit review.
-
On the next screen, there should now be a green button Merge pull request, click it merge the changes into the master branch.
-
-
All team members (except Red) should now retrieve the updated code. In project folder in git bash:
-
Checkout the master branch:
git checkout master
.If you have made changes in your folder that you have not commited to git, you will need to commit them first with
git add ...put.your.file.names.here...
and thengit commit -m '... put commit message here..'
-
Retrieve the updated
master
branch:git pull master
-
Merge the changes into your feature branch. E.g, if you are user Blue, run
git checkout blue git merge master
This should not cause a merge conflict in this lab. In the next step we will discuss how to handle merge conflicts when they do arise.
Important: As a best practice, always merge
master
into your feature branch when working in a team, not the other way around. Any code that gets added to themaster
branch needs to be added through a pull request.
-
This third step is optional, but it reinforces the concepts discussed above by requiring each team to make changes to the existing skeleton code.
-
Create a button labeled
Red
. This should be added to the existingindex.html
file. -
Add a style for the button to the
style.css
file, so that the button has a background color red. -
Add code to the file
app.js
, that changes the text inside the divmessageDiv
to "The red button was clicked". -
Update the project so that clicking the button
Red
will run the code that displays the message inside the<div>
box. -
Update the code so that clicking th button also changes the backround color of the
messageDiv
to red.