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 {
  lighthouseApiRef,
  LighthouseRestApi,
} from '@backstage/plugin-lighthouse';

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

Configure lighthouse service url

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 { EmbeddedRouter as LighthouseRouter } from '@backstage/plugin-lighthouse';

const WebsiteEntityPage = ({ entity }: { entity: Entity }) => (
  ...
  <EntityPageLayout>
    <EntityPageLayout.Content
      path="/lighthouse"
      title="Lighthouse"
      element={<LighthouseRouter  entity={entity} />}
    />
    </EntityPageLayout>
  </EntityPageLayout>
)

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

// packages/app/src/components/catalog/EntityPage.tsx
import {
  LastLighthouseAuditCard,
  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 />
      </Grid>
    )}
  </Grid>
);

How it looks

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.