Backstage Lighthouse Plugin

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.

Don't want to spend your time installing and manually upgrading each Backstage plugin?

Get managed Backstage

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.