Files
backstage/plugins/lighthouse
blam f326c2ee1e Merge branch 'master' of github.com:spotify/backstage into feat/backend-plugin
* 'master' of github.com:spotify/backstage: (30 commits)
  fix(techdocs-core): use the content of the readme as long description for the pypi package (#2578)
  chore: add contrib to CONTRIBUTING.md (#2585)
  Fix typo (#2584)
  backend-common: default config env to development
  v0.1.1-alpha.23
  TechDocs: Inject CSS transformer and initial backstage style integration for reader (#2560)
  bug(gql): use import to import the graphql module
  Rename file
  [blog] Announce CNCF Sandbox (#2568)
  document cleaning - tutorial quickstarts (#2520)
  Simplify codecov flag names
  chore(scaffolder-backend): typo in visibility
  Kubernetes plugins boilerplate (#2559)
  CHANGELOG: add entry for SessionApi refactor
  Upload package specific code coverage to codecov
  Add codecov flags for core and core-api packages
  TechDocs: Enable allowVulnerableTags in sanitize-html (#2554)
  chore: trust the Boolean :)
  docs: regenerate api reference docs
  core: refactor SessionStateApi to SessionApi with sign-in/out
  ...
2020-09-24 10:54:04 +02:00
..
2020-09-09 15:57:24 +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 { Config } from '@backstage/config';
import {
  lighthouseApiRef,
  LighthouseRestApi,
} from '@backstage/plugin-lighthouse';

export const apis = (config: ConfigApi) => {
  const builder = ApiRegistry.builder();

  builder.add(lighthouseApiRef, LighthouseRestApi.fromConfig(config));

  return builder.build() as ApiHolder;
}

Then configure the lighthouse service url in your app-config.yaml.

lighthouse:
  baseUrl: http://your-service-url