The goal of this workshop is to demonstrate how to get started with some of the most important features in a GitHub repository, with a focus on the GitHub Flow. Links to descriptions of GitHub terminology are included in the steps below.
Table of Contents:
- Concepts
- Create an Issue
- Add your file and create Pull Request
- Now, a pipeline
- Setup CI
- Setup CD
- End-to-End Test
Let's spend a brief moment going over some terminology. Links are provided to learn more about the concept.
- Developers are key to innovation and growth
- Why do we use Source Code Management (SCM)?
- Git + GitHub
- Integrations and the GitHub Marketplace ✨
Every repository contains administrative settings for you to manage your project effectively, including (but not limited to) visibility, collaboration and quality checking. Check out each of the settings to learn how you can find tune your environment.
Let's create a tracking Issue to record our first item of work, which will be to create a file with your name.
- In the repository's Issues tab, click New issue. 📷
- Enter a Title indicating you will create a file with your name on it 📷. Example:
Create a new file - John
- In the Body of the Issue, let's add a Description similar to the following 📷:
I need to create a new file with my name.
- Click Submit new issue. 📷
Let's propose a file change to the repository to create a Pull Request:
- In the repository's Code tab, navigate to the
workshop-attendees
folder. 📷 - While in the
workshop-attendees
folder, click Create new file. 📷 - On the Create new file screen, be sure to provide a new filename. 📷
- In the Edit new file box, type some info about yourself, for example 📷:
Hello! My name is John.
- Scroll down to the Propose new file section and provide a commit message. 📷 Example:
Adding my file
- Click Propose new file. 📷
- The next screen will show the creation of the Pull Request, with some info about the specifics of your proposed change. Click Create pull request. 📷 A Pull Request will be opened for this proposed change.
- You may be presented with a body of text where you can add and remove as you see necessary. This is where you tell the repository owner a bit more about your change. If asked, click Create pull request. 📷
- Demo. The instructor will demonstrate traceability and tracking aspects, including:
- Linking to Issues
- Code Review
- Assignment
- Label(s)
- Milestone
- Project Visualization 📷
GitHub concepts are well documented features, but I believe it is important to understand how developers do their work. Even new users to GitHub can set up a CI/CD development pipeline with little effort, let's give it a try now.
To practice creating a pipeline, let's set up our own personal workspace. To create our workspace we will fork the github-for-managers repository. A fork is effectively a copy of a project you can use to freely experiment without affecting the original project.
- Navigate to the workshop repository at https://github.com/universeworkshops/github-for-managers.
- In the top-right-hand corner, click Fork 📷. If asked, fork to your personal GitHub account.
- You will then be taken to your forked repository where you can experiment. Notice the
forked from...
message in the top-left, and notice you can now see a Settings tab because you are the admin here. 📷 - Let's protect the master branch. Click the repository's Settings tab, then Branches. Under Protected branches click the dropdown and select
master
. 📷 - In the Branch protection for
master
page, check all available settings. 📷
- Definition: Continuous Integration
Let's set up a CI job for your repository. This will give us an automated build and test step when we propose a change.
- Open a new tab, go to https://circleci.com and click Log In. 📷
- Click Sign in with GitHub 📷, and then click Authorize circleci 📷.
- After authorization, you can access the CircleCI app at https://circleci.com/dashboard.
- Note: If you are already a member of multiple GitHub orgs, you need to select your username in the dropdown at the top of the page. 📷
- On the left side, click Projects and then click Add Project. 📷
- Next to github-for-managers, click Setup project 📷, then:
- After up to four minutes, your CircleCI tests should pass 🎉 🎉. 📷
- Check out the new Webhook created in your GitHub repository. Go to the repository's Settings tab, then select Webhooks to see that it was automatically created when you authorized it. 📷
Post-workshop exercise: Try setting up a Travis CI status check on your forked repository at https://travis-ci.org.
- Definition: Continuous Delivery
So our tests are wired in with CircleCI, now how do you deploy before merge? This helps us perform a better code review, we can see our actual application deployment before merging to master
. Let's try it out!
First, let's connect Heroku to GitHub:
- Open a new tab, go to the Heroku dashboard at https://dashboard.heroku.com and Log In. 📷 📷
- If you haven't yet, register for a new Heroku account. You will be sent a confirmation email. 📷
- Click New > Create new app. 📷
- For the App name, enter
my-awesome-book-app-GITHUB_USERNAME
. Heroku app names must be unique so append-GITHUB_USERNAME
to the name. 📷 - Click Add to pipeline, then select Create new pipeline. Leave the defaults and click Create app. 📷
- In the Heroku Deploy tab, for the Deployment method select
GitHub and Connect to GitHub. 📷 Log in if prompted, but it should take your already logged-in session, where you can click Authorize heroku. 📷
- After authenticating Heroku to GitHub, type
github-for-managers
in the text box and click Search. Our repository should be displayed, then click Connect. 📷
Now, let's enable Heroku Review Apps. When a Pull Request is opened, each new commit can trigger automatic test deployments in an isolated environment, called Review Apps in Heroku:
- Go to the Heroku dashboard at https://dashboard.heroku.com. Select my-awesome-book-app-GITHUB_USERNAME. 📷
- Click Enable Review Apps 📷, then select both options:
Now we have CI/CD setup for our app. Let's try it out!
- Navigate back to your GitHub repository fork and select the Code tab. 📷
- Go to the file
app/models/book.rb
and click the ✏️ pencil icon to edit it. 📷 📷 - On Line 3, uncomment the line by deleting the
#
character at the beginning. 📷 📷 - Scroll down to the Commit changes section. Add a commit message, using the following as an example: 📷
Adding new test for the app
- In the Create a new branch... option, enter a new branch name, using the following as an example: 📷
add-test
- Click Commit changes 📷. A Pull Request will automatically be opened for this proposed change.
- Add the
enhancement
label and click Create pull request. 📷 - The Pull Request will now show the creation of a conversation about the change as well as the integrated dev tools you can follow throughout the requested change. 📷
- Code Owner enforcement with automatic Code Review
- Conversation
- Initial and subsequent commits to this branch
- Automatic build/test with link
- Automatic staging deployment with link
- Browse the links in the Pull Request to see additional detail about your change and the checks it triggers.