DEV Community

Cover image for [GitHub Actions] Complete CI-CD Javascript Workflow
Gérôme Grignon
Gérôme Grignon

Posted on

[GitHub Actions] Complete CI-CD Javascript Workflow

#actionshackathon21 #netlify #github #javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

Submission Category:

Maintainer Must-Haves

Yaml File or Link to Code

Workflow YAML Files:

Additional Resources / Info

GitHub Actions used:

GitHub Reusable Workflows created:

Top comments (0)

Read next

nikhil6076 profile image

Angular at Scale: Introduction to Micro Frontend Architecture

Nikhil Sai -

phuocng profile image

Lazy load a Google Map

Phuoc Nguyen -

_ndeyefatoudiop profile image

React: 5 Small (Yet Easily Fixable) Mistakes Junior Frontend Developers Make With React State

Ndeye Fatou Diop -

abhilaksharora profile image

A Powerful Password Generator NPM Package

abhilaksh-arora -