Backstage Lighthouse Plugin

Integrates Lighthouse inside Backstage.

Getting started is simple

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

Install the plugin into Backstage.

yarn add @backstage/plugin-lighthouse

Add plugin to the list of plugins.

// packages/app/src/plugins.ts
export { plugin as LighthousePlugin } from '@backstage/plugin-lighthouse';

Add the plugin API to your API builder

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

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

Configure lighthouse service url

  baseUrl: [your-website-url]

Add annotation to your component-info.yaml file.

  annotations: [your-website-url]

Add plugin API to your Backstage instance.

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

const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
      element={<LighthouseRouter entity={entity} />}

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

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

const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3} alignItems="stretch">
    {isLighthouseAvailable(entity) && (
      <Grid item sm={4}>
        <LastLighthouseAuditCard />

How it looks

Things to know


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.