Skip to content
Learn Angular
Blog

GitHub CI-CD javascript workflow

Features

This workflow includes common continuous integration/deployment tasks you can easily reuse for any web javascript project.

It includes:

  • collaboration comments
  • quality tests
  • deployment on Netlify
  • audit with Lighthouse

It works on push and pull request situations.

To showcase this workflow, i chose the Dojo RealWorld implementation.

RealWorld Dojo banner

My Workflow

Repository workflows

Workflow

Collaboration first!

Alone we can do so little; together we can do so much. Helen Keller

Communication workflow

Open source contributions are not just about code. That’s all about people collaborating to move a project forward.

If the contributor is making their first pull request to the project, welcome them accordingly. First open source contributions can be overwhelming as there so many considerations: code of conduct, license, guidelines…

Even if GitHub makes it easy by onboarding new contributors when they land on a project, don’t hesitate to provide additional context:

first_interaction:
  if: github.event_name == 'pull_request'
  name: 'first interaction'
  runs-on: ubuntu-latest
  steps:
    - uses: actions/first-interaction@v1
      with:
        repo-token: ${{ secrets.GITHUB_TOKEN }}
        pr-message: |
          Thanks for your first pull request on this project!
          This is a kindly reminder to read the following resources:
          - [code of conduct]()
          - [contribution guidelines]()
          It'll help us to review your contribution and to ensure it's aligned with our standards.

I’m not a new contributor! Who cares?

Not being a new contributor doesn’t mean you should be ignored. As a review can be delayed, provide an instant comment to welcome new contributions. Even an automated one shows how much you care:

greetings:
  if: github.event_name == 'pull_request'
  runs-on: ubuntu-latest
  steps:
    - uses: kerhub/saved-replies@v1.0.0
      with:
        token: '${{ secrets.GITHUB_TOKEN }}'
        reply: |
          Hi @${{ github.event.pull_request.user.login }}, thanks for being part of the community :heart:
          We'll review your contribution as soon as possible!

Reusable workflows

When i started this workflow, i used actions/cache to cache dependencies and speed up the workflows.

- name: Cache node modules
  uses: actions/cache@v2
  env:
    cache-name: cache-node-modules
    with:
      path: ~/.npm
      key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
      restore-keys: |
        ${{ runner.os }}-build-${{ env.cache-name }}-
        ${{ runner.os }}-build-
        ${{ runner.os }}-

Meanwhile i discovered some changes happened to actions/setup-node in July, removing the need of the previous boilerplate

GitHub Actions: Setup-node now supports dependency caching

Time to refactor? Not so much!

Such change didn’t affect my workflow as such implementation detail was already hidden in a dedicated and reusable job by using the GitHub new feature: Reusable Workflows

This reusable workflow is isolated in a dedicated repository.

on:
  workflow_call:
    inputs:
      command:
        required: true
        type: string


jobs:
  node_job:
    name: 'node job'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.4.1
        with:
          node-version: '14'
          cache: 'npm'
      - run: npm ci
      - run: ${{inputs.command}}

Automate quality checks

Quality checks

Note: The quality checks use the previous reusable workflow

Make your code Prettier

Prettier is a famous code formatter. It removes all original styling* and ensures that all outputted code conforms to a consistent style.

prettier:
  uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
  with:
    command: npm run prettier --check \"**\"

Ensure maintainability with a linter

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

linter:
  uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
  with:
    command: npx eslint --fix src/**/*.ts

Quality means doing it right even when no one is looking. Henry Ford

The future yourself will thank you for being able to push code with confidence thanks to tests.

unit_tests:
  name: 'unit tests'
  uses: kerhub/reusable-workflows/.github/workflows/node-job.yml@main
  with:
    command: npm run test

Deployment

Deployment workflow

You don’t want to manually deploy anymore.

Review changes before they go live!

You want to preview changes due to a pull request. Netlify provides a preview feature for such a need! By running this job on a pull request, a preview url will be created.

deploy_preview:
  name: 'deploy preview'
  if: github.event_name == 'pull_request'
  needs: [prettier, linter, unit_tests]
  uses: kerhub/workflows/.github/workflows/netlify-preview-deploy.yml@main
  with:
    build_directory: './output/dist'
  secrets:
    netlifyAuthToken: '${{ secrets.NETLIFY_AUTH_TOKEN }}'
    netlifySiteId: '${{ secrets.NETLIFY_SITE_ID }}'
    repoToken: '${{ secrets.GITHUB_TOKEN }}'

It uses a reusable workflow once again:

on:
  workflow_call:
    inputs:
      build_directory:
        required: true
        type: string
      build_command:
        required: false
        type: string
        default: 'npm run build'
    secrets:
      repoToken:
        required: true
      netlifyAuthToken:
        required: true
      netlifySiteId:
        required: true


jobs:
  netlify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.4.1
        with:
          node-version: '14'
          cache: 'npm'
      - run: npm ci
      - run: ${{inputs.build_command}}
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        with:
          publish-dir: './output/dist'
          github-token: ${{ secrets.repoToken }}
          deploy-message: 'Deploy from GitHub Actions'
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.netlifyAuthToken }}
          NETLIFY_SITE_ID: ${{ secrets.netlifySiteId }}

Push to production!

By pushing code directly or by merging a pull request, this job will deploy a new version of your web app.

deploy_live:
  name: 'deploy live'
  if: github.event_name == 'push'
  needs: [prettier, linter, unit_tests]
  uses: kerhub/workflows/.github/workflows/netlify-live-deploy.yml@main
  with:
    build_directory: './output/dist'
  secrets:
    netlifyAuthToken: '${{ secrets.NETLIFY_AUTH_TOKEN }}'
    netlifySiteId: '${{ secrets.NETLIFY_SITE_ID }}'

It uses a reusable workflow once again:

on:
  workflow_call:
    inputs:
      build_directory:
        required: true
        type: string
      build_command:
        required: false
        type: string
        default: 'npm run build'
    secrets:
      netlifyAuthToken:
        required: true
      netlifySiteId:
        required: true


jobs:
  netlify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2.4.1
        with:
          node-version: '14'
          cache: 'npm'
      - run: npm ci
      - run: ${{inputs.build_command}}
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        with:
          publish-dir: './output/dist'
          production-deploy: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.netlifyAuthToken }}
          NETLIFY_SITE_ID: ${{ secrets.netlifySiteId }}

Audit

Audit workflow

Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

By pushing changes to your repository, it shouldn’t affect performance and common best practices.

The workflow includes 2 jobs for such a need:

lighthouse_preview:
    name: 'lighthouse preview'
    needs: deploy_preview
    uses: kerhub/reusable-workflows/.github/workflows/lighthouse-preview.yml@main
    with:
      siteName: 'dojo-realworld'
    secrets:
      netlifyAuthToken: "${{ secrets.NETLIFY_AUTH_TOKEN }}"
  lighthouse_live:
    name: 'lighthouse live'
    needs: deploy_live
    uses: kerhub/reusable-workflows/.github/workflows/lighthouse-live.yml@main
    with:
      siteUrl: 'https://dojo-realworld.netlify.app/'

Are we really done yet?

Open source contribution requires to spend significant time on it as you need to:

  • understand its goal to ensure your contribution will match
  • to read all guidelines
  • to wait for a review before your contribution

Such dedication on a project worths to greet the contributor, not to just merge their work.

But…there is no pull_request merged event. To identify a merged content, you need 2 informations:

  • the event (push)
  • the merged status of the pull request

Here is the solution i used in a dedicated workflow:

on:
  pull_request:
    types: closed


jobs:
  contribution-greetings:
    if: github.event.pull_request.merged
    runs-on: ubuntu-latest
    steps:
      - name: greet the contributor
        uses: kerhub/saved-replies@v1.0.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          reply: |
            Thanks @${{ github.event.pull_request.user.login }}!
            Your contribution is now fully part of this project :rocket:

Submission Category:

Maintainer Must-Haves

Workflow YAML Files:

Additional Resources / Info

GitHub Actions used:

GitHub Reusable Workflows created: