Continuous Integration (CI) for JS apps - GitHub Actions workflow

My Workflow

I create a basic CI workflow, called CI.yml, for any javascript or JS framework application.

In this post I explain each step and why is important to have at least these ones:

How to add CI to your Frontend with GitHub Actions - NuxtJS case study

Alba Silvente Fuentes ・ Aug 26 '20

#actionshackathon #cicd #testing #nuxt

I'm using it in a SPA created with VueCLI for a TV Shows list. I'm also using it in other projects that are coming soon.

Please feel free to check it, fork it and ask me anything, here is the repo:

Dawntraoz / tv-shows-spa

TV Shows dashboard with listings by genres and ratings. Find the TV Show you want to know more about.

Submission Category:

Maintainer Must-Haves

Yaml File

# Name your workflow
name: CI

# Set on which events you want run the actions.
# In this case the workflow will run on push for master and on pull request for master and develop branches
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master, develop ]

jobs:
  integration:
    strategy:
      matrix:
        os: [ubuntu-latest, macos-latest, windows-latest]
        node: [12]
    runs-on: ${{ matrix.os }}

    steps:
      - name: Setup Node.js environment
        uses: actions/setup-node@v1.4.3
        with:
          node-version: ${{ matrix.node }}

      - name: Checkout master branch
        uses: actions/checkout@v2

      - name: Cache node_modules
        uses: actions/cache@v2.1.0
        with:
          path: node_modules
          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}

      - name: Install dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run unit tests
        run: npm run test:unit

      - name: Code coverage
        uses: codecov/codecov-action@v1.0.12