Web deploy github action

For most of my web deployments that run on Netlify I like to run 2 kinds of action workflows. The first is for Code Quality metrics and the second is for testing

Code Quality#

name: Code Quality Scan
on:
  workflow_call:
    inputs:
      project-dir:
        description: 'Directory to use for Qodana scans'
        required: false
        type: string
        default: '.'
    secrets:
      QODANA_TOKEN:
        required: true
jobs:
  TruffleHog:
    name: Secrets Scan
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: TruffleHog OSS
        uses: trufflesecurity/trufflehog@main
        with:
          path: ./
          base: ${{ github.event.repository.default_branch }}
          head: HEAD
          extra_args: --debug --only-verified
  QodanaScan:
    name: Qodana
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
          args: --project-dir ${{ inputs.project-dir }}
      - name: 'Qodana Scan'
        uses: JetBrains/qodana-action@v2022.3.4
        env:
          QODANA_TOKEN: ${{ secrets.QODANA_TOKEN }}
  Linting:
    name: Lint Code Base
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Lint Code Base
        uses: github/super-linter@v4
        env:
          VALIDATE_ALL_CODEBASE: false
          DEFAULT_BRANCH: main
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          VALIDATE_MARKDOWN: false
          FILTER_REGEX_EXCLUDE: .*test/.*
          FILTER_REGEX_INCLUDE: .*src/.*,.*lib/.*

Truffle Hog#

This action scans my repo for secrets that might have been accidentally checked in.

Action

Qodana#

I use this for SAST testing. It scans the code and returns a list of potentially error prone code as well as scans packages and shows if there are any known vulnerabilities in the packages being used

qodana

Linting#

Just your typical linter. Nothing fancy here, just using the default eslint astro or react config is most of my sites

Action

Testing#

For testing I use Cypress as well as Lighthouse

name: JS Frontend Tests
on:
  workflow_call:
    inputs:
      site-name:
        required: true
        type: string

jobs:
  CypressTest:
    name: Cypress Tests
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          config-file: cypress.config.js
          start: yarn cypress:start
          wait-on: 'http://localhost:3000'
  Lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Wait for the Netlify Preview
        uses: jakepartusch/wait-for-netlify-action@v1.4
        id: netlify
        with:
          site_name: ${{ inputs.site-name }}
      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v9
        with:
          urls: |
            ${{ steps.netlify.outputs.url }}
          budgetPath: ./budget.json
          uploadArtifacts: true

Cypress#

The cypress command will start up my front end up and then start to run my cypress tests against the build. I usually only do functional tests and test direct interactions that I expect my users to be making

Lighthouse#

This doesn’t have a fail state, I only use lighthouse to generate a score and see what portions of my site that I need to improve to bump up my score. 9 times out of 10 its usually sizes of scripts being loaded at first load and images