Skip to content

Keep an eye on Google Lighthouse score changes directly on GitHub πŸ’‘πŸ‘€

License

Notifications You must be signed in to change notification settings

codechecks/lighthouse-keeper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

34 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

lighthouse-keeper

Lighthouse keeper

Keep an eye on Google Lighthouse score changes directly on GitHub πŸ’‘πŸ‘€

Discover performance, accessability, SEO problems before they reach production

Build Status Software License codechecks.io

Demo

Example Pull Request

Demo

Features

πŸ‘‰ track changes in performance, accessibility etc. directly in GitHub PR interface
πŸ‘‰ get detailed list of new failed audits
πŸ‘‰ automatically fail PRs if score is too low
πŸ‘‰ works with many different CI providers

Install

npm install --save-dev @codechecks/lighthouse-keeper

Usage

Lighthouse Keeper is built on Codechecks β€”Β new open source code review automation platform.

To use it, you need to install Codechecks GitHub App on a given repository and copy project secret to your CI environment.

Step by step guide

  1. Install codechecks client and lighthouse-keeper:
npm install --save-dev @codechecks/client @codechecks/lighthouse-keeper
  1. Create codechecks.yml file in a root of your project. It serves as a central configuration for all different codechecks plugins.
checks:
  - name: lighthouse-keeper
    options:
      buildPath: ./build

You might want to adjust the build path. To learn about all configuration options check out API section of this document. We can dry run lighthouse-keeper locally. Just make sure that your build exists and run npx codechecks.

Now we need to make sure that it runs on CI.

  1. Visit app.codechecks.io.
  2. Login with you github account and install Codechecks Github App on a desired repositories. Note: We don't have access to your code.
  3. Find your project on the list and copy secret.
  4. Add new environment variable to your CI configuration CC_SECRET= <COPIED_SECRET>.
  5. Run npx codechecks as part of your CI pipeline after building the app.
  6. That's it! πŸ”₯Create your first PR and let codechecks record initial baseline. With Codechecks you can track build size, visual regressions and much more! Check out other plugins at Awesome Codechecks

API

lighthouseKeeper(options: Options): Promise<void>

options

interface Options {
  url?: string;
  buildPath?: string;
  minScores?: Dictionary<number>;
}
url

optional string
Provide URL that lighthouse will be ran against. url OR buildPath MUST be provided.

buildPath

optional string
Provide relative path to directory with build. It will be served using http-server package and lighthouse will be ran against it. url OR buildPath MUST be provided.

minScore

optional Dictionary of numbers
Provide minimal scores for each metric. Possible keys are:

  • performance
  • accessibility
  • best-practices
  • seo
  • pwa

Contributing

All contributions are welcomed. Read more in CONTRIBUTING.md

Licence

MIT @ codechecks.io

Acknowledges

Thanks go to @andreasonny83 for his support and creating the lighthouse-ci

Packages

No packages published

Languages