Performance monitoring with Lighthouse CI

steps.md

1. Install the Lighthouse CI CLI.

npm install -g @lhci/cli

2.

touch lighthouserc.js

3.

module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

module.exports = {
  ci: {
    collect: {
      staticDistDir: './public',
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

// Static site example
collect: {
  staticDistDir: './public',
}

// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
  url: ['http://localhost:8080']
}

4.

lhci autorun

module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

5.

module.exports = {
  ci: {
    collect: {
      staticDistDir: './public',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

6.

mkdir .github
mkdir .github/workflows
touch lighthouse-ci.yaml

touch .github/workflows/lighthouse-ci.yaml

#7.

name: Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.4.x
          lhci autorun

8. Set up a GitHub status check

(https://web.dev/lighthouse-ci/#github-status-checks)

Nico a suggest that you should modify the sixth step.

Instead of use:
touch lighthouse-ci.yaml

I suggest this:

touch .github/workflows/lighthouse-ci.yaml