GitHub Actions: Frontend Code Quality Checks

Octocat-goodies

All developers LOVE GitHub, and the introduction of GitHub Actions was just what the community was begging for.

I’ve already written about code quality in: Frontend Development Code Quality - What’s good enough? In this blog post I’ll be showing how to “Automate the boring stuff” and cover those checks.

TL;DR

Check out the example repo to see the GitHub Actions file, and all the associated NPM scripts.

Background

To get up and running follow the GitHub Actions Quick start guide. If you’ve used other CI/CD tools, and defined your build pipelines using YAML, there’s nothing scary here.

The example repo contains the following code quality checks (as mentioned in this blog post):

1. ESLint: For linting
2. Jest: For unit testing
3. NPM Audit: To check for vulnerabilities within the packages

Essentially, all the GitHub Action workflow file does is execute the NPM scripts. Here’s what the whole file looks like:

name: Hello World

on:
  push:
    branches:
      - main
      - feature/*
      - bugfix/*
      - hotfix/*
  pull_request:
    branches:
      - main

jobs:
  test-build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [ 14.x ]

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

Check out these DevOps posts if you’re interested in automating these checks with CI/CD:

• Azure DevOps Pipelines: Frontend Code Quality Checks
• GitLab CI/CD: Frontend Code Quality Checks
• 5 steps to reduce your React app CI/CD build minutes