DEV Community

Sang Au
Sang Au

Posted on • Updated on

The first Github Actions

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Github Actions build 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)

Collapse
 
shawonashraf profile image
Shawon Ashraf

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.

Collapse
 
auvansangit profile image
Sang Au

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.

Collapse
 
shawonashraf profile image
Shawon Ashraf

Thanks!

Collapse
 
stegriff profile image
Ste Griffiths

Great simple intro, thank you buddy!

Collapse
 
omawhite profile image
Omar White

Nice overview, I just got accepted into the beta and I’m excited to see what this can do in my personal projects.

Collapse
 
nothingnull profile image
NothingNull

A good overview!