Backstage Lighthouse Plugin

Integrates Lighthouse inside Backstage.

Created by Spotify

Getting started is simple

Don't want to spend your time installing and upgrading Backstage plugins? Get managed Backstage from Roadie.

Installation steps

Before you start please make sure that you setup lighthouse-audit-service first.

Install the plugin into Backstage.

yarn add @backstage/plugin-lighthouse

Add the plugin API to your API builder

// packages/app/src/apis.ts
import {
  lighthouseApiRef,
  LighthouseRestApi,
} from '@backstage/plugin-lighthouse';

export const apis = (config: ConfigApi) => {
  builder.add(lighthouseApiRef, LighthouseRestApi.fromConfig(config));
};

Modify your app routes to include the LighthousePage component exported from the plugin.

// packages/app/src/App.tsx
import { LighthousePage } from '@backstage/plugin-lighthouse'; from '@backstage/plugin-lighthouse';

const routes = (
<FlatRoutes>
{/* ...other routes */}
<Route path="/lighthouse" element={<LighthousePage />} />

Configure lighthouse service url

// app-config.yaml
lighthouse:
  baseUrl: [your-website-url]

Add annotation to your component-info.yaml file.

metadata:
  annotations:
    lighthouse.com/website-url: [your-website-url]

Add plugin API to your Backstage instance.

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityLighthouseContent} from '@backstage/plugin-lighthouse';

const websiteEntityPage = (
  ...
  <EntityLayout>>
    <EntityLayout.Route path="/lighthouse" title="Lighthouse">
      <EntityLighthouseContent />
    </EntityLayout.Route>
  </EntityPageLayout>
)

Optionally you might add Lighthouse widget to the overview tab on the EntityPage

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityLastLighthouseAuditCard,
  isLighthouseAvailable,
} from '@backstage/plugin-lighthouse';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    ...
    <EntitySwitch>
      <EntitySwitch.Case if={isLighthouseAvailable}>
     </EntitySwitch.Case>
    </EntitySwitch>
    ... 
  </Grid>
);

Found a mistake? Update these instructions.

How it looks

A screenshot of the Lighthouse plugin.

Things to know

Backend

This plugin is only a frontend layer for lighthouse-audit-service and won’t work without it.

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.

We will never sell or share your email address.