The first Github Actions

#git #react #devops #webdev

1. Introduction

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

To get more details about Github Actions you can see About GitHub Actions

2. Let's start

Make sure that you had to register Github Actions beta program and also receive the approval email from Github like "You’re in! Get started with GitHub Actions beta"...

In this tutorial, I use my repository called React Starter Kit.

Don't talk any more, go go go...

Step 1: Go to your repository and click on the "Actions" tab

Step 2: Click the button "Set up a workflow yourself"

You will see the template like bellow:

name: CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Run a one-line script
      run: echo Hello, world!
    - name: Run a multi-line script
      run: |
        echo Add other actions to build,
        echo test, and deploy your project.

Step 3: Edit the template

Following the Workflow syntax for GitHub Actions
and Set up your GitHub Actions workflow with a specific version of node.js

I edit my first actions like bellow:

name: CI

on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-18.04
    strategy:
      matrix:
        node_version: [10, 12]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node_version }}
      uses: actions/setup-node@v1
      with:
        version: ${{ matrix.node_version }}

    - name: yarn install, yarn lint, yarn test, yarn build
      run: |
        yarn install
        yarn lint
        yarn test
        yarn build

Explanation:
In the configuration above

Github Actions will trigger on push event on any branch
It will use Ubuntu 18.04 runs-on: ubuntu-18.04
It will run 2 times on 2 node versions: node_version: [10, 12]
It will use yarn to run instead of npm
It will run yarn install, yarn lint, yarn test, yarn build

For further command please refer to the Workflow syntax for GitHub Actions

Step 4: Waiting and getting the result!

It works fine!!!

3. In conclusion

So easy to create the simple pipeline with Github Actions. It will help you build your project without using any external CI/CD like Circle CI or something like that.

Top comments (6)

Shawon Ashraf • Sep 6 '19

Thanks for the templates. Can you add a bit on how to include API keys in actions? In Travis or Circle CI, API keys can be safely hidden as secret variables. So far haven't seen anything like that with GitHub actions.

Sang Au • Sep 6 '19

For this case, you can go to Virtual environments for GitHub Actions to get more details. I will update the action to use the API key to deploy to Github page, and will let you know.