Creating a CI/CD pipeline using Github Actions

Recently, Github announced that Github Actions now has support for CI/CD. What this means is that developers can now start using GitHub Actions to create a CI/CD pipeline. In this tutorial, we are going to build a CI/CD pipeline using Github Actions, the pipeline will deploy a react app to Heroku.

Github Action is still in beta, for you to have access to it you need to signup for the beta program.

If Actions has been activated on your account you will see the actions tab appear on your repo.

A repo with GitHub actions enabled

Let’s get started

The first thing we have to do is to create our react project, we are using create-react-app

• Open your terminal and run

 npx create-react-app github-ci

From the command above github-ci will be the folder name for our react app project.

• Open your project on your code editor
• Create a repository on GitHub
• Add the git remote origin to your project

git remote add origin https://github.com/ekpangmichael/github-ci.git 

The next step is to create our Actions (workflow)

The action must be created inside a .github/workflow/ folder for it to be accessible by Github

• To create the folder structure, run the command below inside the root of your project directory

mkdir .github/
mkdir .github/workflows/

Your folder structure should look like this

Next, let's create our workflow files inside the workflows folder, this file should be a yml file

touch .github/workflows/ci.yml

This will create a file call ci.yml inside your workflows folder, the name of this file is up to you, you can give this file any name but just make sure that it ends with .yml

• Open the ci.yml file and paste the code snippet below

Lets explains what each of the lines does

name: CI

This is just specifying a name for the workflow

on: [push]

The on command is used to specify an event that will trigger the workflow, this event can be push, pull_request, etc. It can also be an array of events like this.

# Use an array when using more than one event
on: [push, pull_request] 

In our case, we are simply saying trigger this workflow on every push

jobs:

Here we are specifying the job we want to run, in this case, we are setting up a build job.

runs-on: ubuntu-latest

The runs-on is specifying the OS you want your workflow to run on and we are using the latest version of ubuntu

Steps:

Steps just indicate the various steps you want to run on that job

uses: actions/checkout@v1

Github has some already define Actions, we are using version 1 of the checkout action this is responsible for cloning the repo and checking into our project directory.

The other steps just show how to run one or more commands in the shell. the default shell is bash.

Let's test our workflow

Run the commands below to push your code to GitHub

git add .
git commit -m "Add workflow file"
git push origin -u master

Click on the Actions tab to view your pipeline

Create an app on Heroku

The next is for us to create a new app on Heroku, this is where our pipeline will deploy our project to.

To do this, we are going to use Heroku CLI, make sure you have created an account with Heroku and have installed Heroku CLI this tutorial does not cover how to do that.

Run the command below in your terminal to create an app on Heroku

heroku create github-ci --buildpack mars/create-react-app

From the above command, will are telling Heroku to create an app with the name github-ci and add the create-react-app buildpack

“ Heroku Buildpacks are sets of open source scripts that are used for compiling apps on Heroku. They form the backbone of Heroku’s polyglot platform.”

let's make our first deployment to Heroku

git push heroku master

Ensure that the deployment was successful.

Let's continue working on our pipeline

Replace the no: [push] section with the snippet below

From the snippet above, we are saying that the workflow (pipeline) should be triggered only when we push to master branch (you can trigger the workflow on any branch).

Replace the job section with the snippet below

We added a new section call strategy and under that, we have matrix accompanied with the node versions. What that section is simply doing is telling our workflow to run our build on two versions of node, v10 and v8.

Next, replace the steps section with the snippet below

Here we added the setup-node@v1 actions, this is responsible for installing the specified version of node in our CI environment since we are using the matrix strategy, this will spin up two environments for node version 10 and 8 respectively.

Now let's add the different steps that will run in our CI

As you can see, this is just running yarn install, yarn test and yarn build.

Since create react app test run in interactive mode, we are setting CI to true to make it run in a non-interactive mode.

By now your pipeline should look like this

Add environment variables

Add Heroku API key and Heroku app name

• Goto your Heroku dashboard and click on account settings locate your API key and copy it.
• Goto settings tab on your GitHub repository and click on secrets and add you Heroku api key, also do the same for your app name (In our case, our app name when we created the app on Herokus is github-ci)

our secrets are HEROK_API_kEY and HEROKU_APP_NAME

to access these variables in our pipeline we have to use the format below

${{ secrets.HEROKU_API_KEY }}
${{ secrets.HEROKU_APP_NAME }}

Deploy to Heroku

Add the snippet below to deploy your code to Heroku

The section is responsible for deploying the code to Heroku.

The complete pipeline should look like this

commit your code and push to master, yes you are the boss, push to master.

Your pipeline should start running your build.

There you have it, a CI/CD pipeline on Github.

Add a badge to your readme (Bonus)

If you want to add a badge to show the status of your build use the format below


![](https://github.com/ekpangmichael/github-ci/workflows/CI/badge.svg)

If you find this article useful please clap and share your comments below. Gracias