Show full Lighthouse report from my website

[zouheirjamal]

I am trying to integrate Google's Lighthouse API onto my Inbound Marketing website. My website's true purpose is testing/auditing websites (and display their performance metrics) just like web.dev (where the potential user inputs their website of choice, to test it out, and they get rendered back that website's metrics/scores).

The current functionality of the API allows for some performance fields to render (shown below in the screenshot attached), but I would like to have the "complete look" of Lighthouse--having the colorful Lighthouse scoring (green, yellow, red) along with the icons.

current Lighthouse API screenshot: https://res.cloudinary.com/practicaldev/image/fetch/s--TMFiOhJe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nlizibqpkipterbkf8gx.png

What I would like to have is more like is this: https://developers.google.com/web/tools/lighthouse/images/report.png

Any help?

[patrickhulce]

You'll want to take a look at using the report renderer code and other open source projects that do this. While replicating existing Lighthouse services is a useful learning exercise, you won't find a lot of handholding here on exactly how to build a duplicate ;)