Backstage Lighthouse Plugin

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

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.

Things to know

Backend

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

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo