Setting up auto builds with Github Actions

Github Actions is pretty awesome for setting up some automated workflows. While you can use husky and github hooks in your development machine to setup some automation in your local machine, it's doesn't exactly replicate the environment in which your users view the app. Which leads to the most common complaint from devs in case of build errors or production errors: It works on my machine ¯_(ツ)_/¯ !

We will primarily explore Github Actions to run test cases and do a build to see if there are any issues with our code. We'll setup the deploy later.

The easiest way to setup a basic Github actions workflow for a React app is to actions tab of your repo and select "Node.js" actions already available in github actions.

Click on configure and we should have a basic workflow config file ready. Which would look like this.

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ "develop" ]
  pull_request:
    branches: [ "develop" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

The comment on the config explains what is being done with this config file.

The "on" section is to specify when this particular Github Action must be run. In our case we run it only when a push ia being done on the develop branch or when we open a PR against the develop branch.

The jobs section allows you to split you workflow into multiple steps, like build and deploy.

By default we have this workflow being run on the latest ubuntu version and with the specified node version. There is no reason to change it for now as this is simlar to the environment is which our app is runnning in production.

That's it! Push your changes to the repo on the 'develop' branch and you can see github action triggering actions specified in the yml file.