chore: Make Lighthouse CI run on local build

[slorber]

Motivation

Current setup to run Lighthouse on Netlify deploy previews is fragile and unreliable.

Notably the Wait for the Netlify Preview step which only waits for the first deployment, and then on the next commits will not wait, leading to a stale Lighthouse report.

Running on a local build is also less likely to fail

Test Plan

CI

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	51655ca
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6538d6296e84730008cdd510
😎 Deploy Preview	https://deploy-preview-9447--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	d7ee83f
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6538e01d42368200081acee9
😎 Deploy Preview	https://deploy-preview-9447--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 60	🟢 97	🟢 92	🟢 100	🟠 89	Report
/docs/installation/	🟠 79	🟢 98	🟢 92	🟢 100	🟠 89	Report
/docs/category/getting-started/	🟠 85	🟢 100	🟢 92	🟢 90	🟠 89	Report
/blog/	🟠 84	🟢 100	🟢 92	🟢 90	🟠 89	Report
/blog/preparing-your-site-for-docusaurus-v3/	🟠 75	🟢 97	🟢 92	🟢 100	🟠 89	Report
/blog/tags/release/	🟠 75	🟢 100	🟢 92	🟠 80	🟠 89	Report
/blog/tags/	🟢 92	🟢 100	🟢 92	🟢 90	🟠 89	Report

[slorber]

cc @johnnyreilly I think I read your blog post on that topic and maybe you'd be interested to replicate this new setup?

[johnnyreilly]

cc @johnnyreilly I think I read your blog post on that topic and maybe you'd be interested to replicate this new setup?

Hey @slorber - do you mean this post? https://johnnyreilly.com/azure-static-web-apps-a-netlify-alternative

[slorber]

@johnnyreilly this one: https://johnnyreilly.com/lighthouse-meet-github-actions

You have a similar Static Web App - wait for preview step that imho is not ideal

[johnnyreilly]

I don't know - it's worked pretty well for me. But yeah, I'd be happy to help you with that. Would you like me to?

[johnnyreilly]

If you create a Static Web App for Docusaurus (they're free) then I can start the work of plugging my approach into the pipeline?

[johnnyreilly]

There'd be some CI fun and games but we could turn it out pretty fast I think

[johnnyreilly]

And you can leave the Netlify stuff running in parallel either permanently or until you want to drop it.

[johnnyreilly]

Essentially what you want is this I think: https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/main/.github/workflows/build-and-deploy-static-web-app.yml

And use this to handle auth between Azure and GitHub: https://github.com/jongio/github-azure-oidc - you use this to create secrets to deploy with

This:

https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/5198da99f0a0b8422398ccfbfbc84215782bd5a2/.github/workflows/build-and-deploy-static-web-app.yml#L40C1-L45C64

[slorber]

@johnnyreilly I don't know what you mean here, I have no intention to switch to Azure 😅 and even less can convince Meta in a short time frame to do so.

I want to run lighthouse on a local build, which is what I did in this PR, and recommend you to adopt. If you are satisfied with your Azure setup, fine.

Remote urls are more flaky, depend on CDN availability/network, and the "wait for deployment" function is not super reliable and can easily lead to running lighthouse on a deployment url on subsequent deployments, misleading you. I prefer to use something entirely local.

[johnnyreilly]

oh right - I haven't set up Lighthouse to run on a local build before. You can flip open devtools in Chrome and do that pretty easily though. I guess this risk with running locally though, is that any extensions you have installed may pollute the results?

[johnnyreilly]

Maybe there's a way to do it with a docker container and spinning up Chrome headless inside? Haven't done it myself though.

[johnnyreilly]

Maybe something like this could work? https://github.com/GoogleChrome/lighthouse-ci/tree/main/docs/recipes/docker-client

[johnnyreilly]

If you do yarn build && yarn serve, does this work for you @slorber?

docker container run --cap-add=SYS_ADMIN \
  -v "$(pwd)/lhci-data:/home/lhci/reports/.lighthouseci" \
  patrickhulce/lhci-client \
  lhci collect --url="http://localhost:3000/"

[slorber]

@johnnyreilly I don't understand why you keep suggesting me things I don't look for 🤪 I don't want to run lighthouse locally, I want to run lighthouse on a local build (instead of a remote url), in the CI, in an automated way. It is working fine already 😅 I don't want to use docker inside github actions, there's no browser extension there

[johnnyreilly]

No you misunderstand me!

If I understand you correctly, you want to run lighthouse locally on a local build.

I'm suggesting that you can do that by running locally by spinning up Docusaurus with yarn build && yarn serve and then running the following in a separate process:

docker container run --cap-add=SYS_ADMIN \
  -v "$(pwd)/lhci-data:/home/lhci/reports/.lighthouseci" \
  patrickhulce/lhci-client \
  lhci collect --url="http://localhost:3000/"

This should allow you to run locally and run lighthouse locally without being subject to extensions running on your version of Chrome. Does that make sense?

I'm actually not totally sure what you're trying to do.

[slorber]

I'm actually not totally sure what you're trying to do.

I'm not trying to do anything now, it's done already in this PR and working as I want it to 😅

[johnnyreilly]

Okay cool!

[Josh-Cena]

@johnnyreilly To clarify: the "local" here does not mean on your very own machine. It means building and serving the website within the action runner, where the lighthouse is also run.

[johnnyreilly]

ahhhhhh. I get it. That's totally not what I took from "local" 😆

[slorber]

Yes exactly 😄

Although I'm now using Docker to get a faster feedback, so thanks for the command ;)