Learning Lighthouse CI from scratch (quickstart)
Just one of the things I'm learning. https://github.com/hchiam/learning
Have Lighthouse CI tool run with Travis for every commit or PR to a web app project hosted on GitHub.
Results upon commit
Automated test run info here: https://travis-ci.org/hchiam/learning-lighthouse-ci/builds (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: https://app.travis-ci.com/github/hchiam/learning-lighthouse-ci/builds Also, you may want to use free GitHub Actions instead.
Example PR here (click "View details"): #1 (comment)
Setup steps (if you git clone this repo)
-
To test the web app locally:
npm install npm start
and in a separate CLI tab:
npm run build npm install -g @lhci/[email protected] lhci autorun
-
To test the web app upon commit/PR:
- You might want to edit .travis.yml
- You might want to edit lighthouserc.json
- Then make your commit.
Setup steps (if you're starting from an empty folder)
-
For
lhci autorunto 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:# cd to desktop or containing folder create-react-app my-app -
To make sure it's working locally:
cd my-app npm startand in another CLI tab:
cd my-app npm install -g @lhci/[email protected] lhci autorun
-
The key is setting up the Travis file
.travis.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 locally:
npm install -g lighthouse
lighthouse https://airhorner.com/
# lighthouse <url>Then open the generated html file.