Files
backstage/plugins/lighthouse
blam 48aacfbe17 Merge branch 'master' of github.com:spotify/backstage into blam/react-router
* 'master' of github.com:spotify/backstage: (89 commits)
  Use URLSearchParams
  Use location?.type once more
  chore(catalog): clean up CatalogTable, use only Entity
  chore(catalog): clean up ComponentPage, use only Entity
  chore(catalog): tweak getEntityByName a bit, handle 404s properly
  chore(catalog/star): only set the cache if there are entries from the response
  chore(catalog/star): added a comment about why we are using a simple cache here
  chore(catalog/star): removing msw dependency, wrong branch
  chore(catalog): consistent use of named exports
  chore(msw): Added msw dependency
  chore(catalog/star): fixing issues with unmocked deps
  chore(catalog/star): adding a simple cache to stop flicker as a stopgap
  chore(catalog/star): reworking how the starring works, it now stores uri sort of references for entities
  fix(core): Tabs useEffect dependency list
  docs: format with prettier (#1218)
  Optional namespace and name as one part of URL
  docs/auth: added overview, oauth description and glossary
  docs: added plantuml generation script
  docs: added prettier config
  Remove deleted UserBadge component from Sidebar story
  ...
2020-06-11 17:36:19 +02:00
..

@backstage/plugin-lighthouse

A frontend for lighthouse-audit-service, this plugin allows you to trigger Lighthouse audits on websites and track them over time.

Getting Started

Use cases

Google's Lighthouse auditing tool for websites is a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site. At Spotify, we keep track of Lighthouse audit scores over time to look at trends and overall areas for investment.

This plugin allows you to generate on-demand Lighthouse audits for websites, and to track the trends for the top-level categories of Lighthouse at a glance.

In the future, we hope to add support for scheduling audits (which we do internally), as well as allowing custom runs of Lighthouse to be ingested (for auditing sites that require authentication or some session state).

Installation

To get started, you will need a running instance of lighthouse-audit-service. It's likely you will need to enable CORS when running lighthouse-audit-service. Initialize the app with the environment variable LAS_CORS set to true.

When you have an instance running that Backstage can hook into, make sure to export the plugin in your app's plugins.ts to enable the plugin:

import { default as LighthousePlugin } from '@backstage/plugin-lighthouse';
export LighthousePlugin;

Then, you need to use the lighthouseApiRef exported from the plugin to initialize the Rest API in your apis.ts.

import { ApiHolder, ApiRegistry } from '@backstage/core';
import {
  lighthouseApiRef,
  LighthouseRestApi,
} from '@backstage/plugin-lighthouse';

const builder = ApiRegistry.builder();

export const lighthouseApi =
  new LighthouseRestApi(/* your service url here! */);
builder.add(lighthouseApiRef, lighthouseApi);

export default builder.build() as ApiHolder;