Add basic HTML report viewer to LHCI server

[patriciamarchand]

The LHCI Dashboard open the report HTML to an external URL (https://googlechrome.github.io/lighthouse/viewer/). Does it have a configuration parameter to open the report but not on an external URL. I would like to avoid that.

Thanks for this great tool!

[patrickhulce]

Thanks for filing @patriciamarchand! There is no such parameter, but we can let this issue track building one :)

[mfjerome]

Question: Why is the lighthouse report viewer not included in the lighthouse report server? Before spinning it up, I assumed that the goal of having a report server was to host the audit reports so that the developers can view and compare them between commits, without having to rely on the viewer hosted in github. Did I misunderstood something?

Would it be feasible to do so, and what would be the best way to accomplish it? Maybe I can help.

[patrickhulce]

Why is the lighthouse report viewer not included in the lighthouse report server?

The code for the viewer is in the upstream Lighthouse core repo and not easily hosted anywhere else due to the Firebase Auth and GitHub Gist features it offers. It sounds like most people don't care about those features of the viewer and would prefer to keep everything on their server even if its just the static report, so that's what this issue tracks.

I assumed that the goal of having a report server was to host the audit reports so that the developers can view and compare them between commits, without having to rely on the viewer hosted in github

The goal of the server is to store reports long term and compare between commits. Delegating to existing infrastructure that enables viewing individual reports fit well within that goal with eventual support for providing more value on top of the historical reports.

Would it be feasible to do so

Yes, that's what this issue is tracking. We just need to add a route to the server that grabs an LHR from storage and renders it inside the HTML template. Fairly straightforward with our existing utils around this if you'd like to take a crack it :)

[patriciamarchand]

For my understanding, I had a look in the DB. I found a JSON in the table "run" under the column "lhr". Are you using this data to generate the diff report?

For the Lighthouse report viewer whitch data are you using? I did not find the HTML code in the BD. Are you using the data for the table "statistics"? The command lhci autorun generate JSON and HTML file. Are you storing both?

Thanks

[patrickhulce]

Are you using this data to generate the diff report?

Yes

For the Lighthouse report viewer whitch data are you using?

The same JSON data.

I did not find the HTML code in the BD. Are you using the data for the table "statistics"? The command lhci autorun generate JSON and HTML file. Are you storing both?

No, the HTML is not stored or saved anywhere, that's why we have to use the viewer right now.

[shawnbot]

For anyone tracking this issue and who doesn't have the time to figure out a solution, microlink can scrape public sites and generate public reports. You just have to construct the URL cleverly, as in this bookmarklet:

location=`https://lighthouse.microlink.io/?url=${encodeURIComponent(`https://api.microlink.io/?url=${location.href}&insights.technologies=false&insights.lighthouse=true`)}`

For instance, here's github.com/GoogleChrome's report. 🚀