Exploring GitHub Actions

In a nutshell, GitHub Actions is GitHub’s automated workflow solution. It allows developers to run custom build and deployment actions straight in GitHub. So it makes sense if you already have your code on GitHub. Even free accounts have 500MB storage and 2,000 worker minutes allowance. So all you need is a free account to follow along.

Basics

GitHub Actions is quite a flexible event-driven mechanism. In addition, to be able to run jobs on events, you can run on schedule as well.

The units executed by GitHub Actions are called workflows. To create a workflow, you can create a file under the .github/workflows directory inside your GitHub repository.

You can view the process mainly as an IFTTT (if this, then that) workflow. If some event happens, a list of actions (jobs) runs. For example, let’s take a look at this very basic workflow:

name: Demo

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Run a one-line script
        run: echo Hello, GitHub Actions!

So the process we are defining is

When some code is pushed

To the main branch

Create a new virtual machine based on ubuntu-latest template (Currently it’s Ubuntu 20.04)

Execute the following command: echo Hello, GitHub Actions!

And to test the workflow, you can create and push a new file:

touch demo-trigger
git add demo-trigger
git commit -m "testing demo workflow"
git push

At this point, if you go to your repository’s Actions tab, you should see something like:

And after waiting a few seconds, you should see the job complete. Click on the name and expand the details to see the logs:

It prints the statement we put in the workflow YAML file.

Let’s Do Something Useful With It!

Printing something is helpful, but most of the time, you would run some build process and deploy the artefacts somewhere. So let’s move one step further and try something meaningful.

In this walkthrough, we will create a CI/CD pipeline that builds a React application and deploys it to another branch called _site. Finally, GitHub Pages will serve the output as a static website.

Without further ado, let’s start the walkthrough:

1. Create a new branch called _site:

2. Go to repo Settings -> Pages. Select _site as the Source branch and click Save

3. Confirm that your site is ready to be served on GitHub Pages. You should see a notification that looks like this:

and if you visit the link, it should look like this:

4. Clone the repo and check out the main branch
5. Change to the repo path in the terminal and create a new React app

npx create-react-app .

6. After completing the installation, you can test your application by running it.

npm start

The output should look something like this:

We are going to use the app as-is with one exception. Open package.json and add the following file:

"homepage": "/github-actions-workout/",

so that it looks like this:

Editing the JSON file is necessary for the paths in the built application. Because our application is not in the root level of the subdomain, we have to tell React the relative path to adjust the URLs.

7. Create a new file called publish-site.yml under the ./github/workflows directory.
8. Enter the code below as the contents of the publish-site.yml file:

name: Generate a build and push to another branch

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    name: Build and push to _site
    steps:
      - name: git-checkout
        uses: actions/checkout@v2
      - name: Install all dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Push
        uses: s0/git-publish-subdir-action@develop
        env:
          REPO: self
          BRANCH: _site
          FOLDER: build
          GITHUB_TOKEN: {% raw %} ${{ secrets.GITHUB_TOKEN }} {% endraw %}

9. Commit and push your changes in the main branch

git add .
git add ./.github/workflows/publish-site.yml
git commit -m "testing react CI/CD"
git push

10. Go to the Actions tab, and you should see the workflow we just pushed:

11. And after some brief queuing and waiting, you should get the output:

12. Also, notice that GitHub’s Pages also feature another action. You can see it in action in the same actions list. Just check “pages build and deployment” jobs after you push code

13. After successful GitHub Pages build, if you revisit your page, you should see a new React app running

Conclusion

In this post, we covered the basics of GitHub Actions and created a CI/CD pipeline for a React application only by using GitHub. I hope this post has been helpful to you. If you want to move coverage on GitHub actions, please leave a comment below.

Resources

• GitHub Actions
• GitHub Hosted Runners
• GitHub Action Billing
• Featured image designed by pch.vector / Freepik