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?
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.