Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/codechecks/lighthouse-keeper

Keep an eye on Google Lighthouse score changes directly on GitHub πŸ’‘πŸ‘€
https://github.com/codechecks/lighthouse-keeper

accessibility codechecks google-lighthouse lighthouse performance score

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README

        


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](https://github.com/krzkaczor/lighthouse-keeper-example/pull/2)

![Demo](meta/demo.gif)

## 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](https://github.com/codechecks/docs/blob/master/supported-ci.md)

## Install

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

## Usage

Lighthouse Keeper is built on [Codechecks](https://codechecks.io) β€”Β 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
```

2. Create `codechecks.yml` file in a root of your project. It serves as a central configuration for
all different codechecks plugins.

```yml
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.

3. Visit [app.codechecks.io](https://app.codechecks.io).
4. Login with you github account and install Codechecks Github App on a desired repositories. Note:
We don't have access to your code.
5. Find your project on the list and copy secret.
6. Add new environment variable to your CI configuration `CC_SECRET= `.
7. Run `npx codechecks` as part of your CI pipeline after building the app.
8. 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](https://github.com/codechecks/awesome-codechecks)

## API

### lighthouseKeeper(options: Options): Promise\

#### options

```typescript
interface Options {
url?: string;
buildPath?: string;
minScores?: Dictionary;
}
```

##### 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](./CONTRIBUTING.md)

## Licence

MIT @ [codechecks.io](https://codechecks.io)

## Acknowledges

Thanks go to @andreasonny83 for his support and creating the
[lighthouse-ci](https://github.com/andreasonny83/lighthouse-ci)