Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hchiam/learning-lighthouse-ci
Learning Google's Lighthouse CI from scratch with a minimal template web app (quickstart)
https://github.com/hchiam/learning-lighthouse-ci
ci lighthouse travis
Last synced: 21 days ago
JSON representation
Learning Google's Lighthouse CI from scratch with a minimal template web app (quickstart)
- Host: GitHub
- URL: https://github.com/hchiam/learning-lighthouse-ci
- Owner: hchiam
- License: mit
- Created: 2019-11-19T16:13:38.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-15T02:38:15.000Z (about 2 years ago)
- Last Synced: 2023-02-28T18:19:30.397Z (almost 2 years ago)
- Topics: ci, lighthouse, travis
- Language: JavaScript
- Homepage:
- Size: 226 KB
- Stars: 50
- Watchers: 5
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Learning Lighthouse CI from scratch (quickstart)
[](https://github.com/hchiam/learning-lighthouse-ci/releases)
Just one of the things I'm learning.
Have [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) tool run with Travis for every commit or PR to a web app project hosted on GitHub.
## Results upon commit
[](https://travis-ci.org/hchiam/learning-lighthouse-ci/builds)
**Automated test run info here:** (or click on the badge above). **Update:** Since June 15th, 2021, building on travis-ci.org "ceased", so you should use travis-ci.com from now on. Some of the old .org links have stopped working, so here's the .com builds page: Also, you may want to use free GitHub Actions instead.
**Example PR here (click "View details"):**
## Setup steps (if you `git clone` this repo)
1. To test the web app locally:
```bash
npm install
npm start
```
and in a separate CLI tab:
```bash
npm run build
npm install -g @lhci/[email protected]
lhci autorun
```
1. To test the web app upon commit/PR:
* You might want to edit [.travis.yml](https://github.com/hchiam/learning-lighthouse-ci/blob/master/.travis.yml)
* You might want to edit [lighthouserc.json](https://github.com/hchiam/learning-lighthouse-ci/blob/master/lighthouserc.json)
* ***Then*** make your commit.
## Setup steps (if you're starting from an empty folder)
1. For `lhci autorun` to work, you need a web app set up that has things like a dist or public folder, etc. To do that, you can run a one-liner command to set up a React app:
```bash
# cd to desktop or containing folder
create-react-app my-app
```
1. To make sure it's working locally:
```bash
cd my-app
npm start
```
and in another CLI tab:
```bash
cd my-app
npm install -g @lhci/[email protected]
lhci autorun
```
1. The key is [setting up](https://github.com/GoogleChrome/lighthouse-ci#quick-start) the Travis file `.travis.yml`:
```yml
language: node_js
node_js:
- 10
before_install:
- npm install -g @lhci/[email protected]
script:
- npm run build
- lhci autorun
addons:
chrome: stable
```
## Aside
If you want to see a report with more details (e.g. vulnerable libraries -> which *specific* ones), use a different CLI tool: run [`lighthouse`](https://github.com/GoogleChrome/lighthouse) locally:
```bash
npm install -g lighthouse
lighthouse https://airhorner.com/
# lighthouse
```
Then open the generated html file.