Backstage GitHub Insights Plugin

See GitHub Insights for your components in Backstage

Getting started is simple

Install the plugin into Backstage.

yarn add @roadiehq/backstage-plugin-github-insights

Import it into your Backstage application.

// packages/app/src/plugins.ts
export { plugin as GitHubInsights } from '@roadiehq/backstage-plugin-github-insights';

Add plugin API to your Backstage instance.

// packages/app/src/components/catalog/EntityPage.tsx
import { Router as GitHubInsightsRouter } from '@roadiehq/backstage-plugin-github-insights';

const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
  ...
  <EntityPageLayout>
    <EntityPageLayout.Content
      path="/code-insights"
      title="Code Insights"
      element={<GitHubInsightsRouter entity={entity} />}
    />
    </EntityPageLayout>
  </EntityPageLayout>
)

Run the backstage app with the following command and navigate to the services tab.

yarn start

Widgets setup.

You must install this plugin by following the steps above to add the widgets to your Overview. You might add only selected widgets or all of them.

Add widgets to your Overview tab.

// packages/app/src/components/catalog/EntityPage.tsx
import {
  ContributorsCard,
  LanguagesCard,
  ReadMeCard,
  ReleasesCard,
  isPluginApplicableToEntity as isGitHubAvailable,
} from '@roadiehq/backstage-plugin-github-insights';

...

const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3}>
    ...
    {isGitHubAvailable(entity) && (
      <>
        <Grid item md={6}>
          <ContributorsCard entity={entity} />
          <LanguagesCard entity={entity} />
          <ReleasesCard entity={entity} />
        </Grid>
        <Grid item md={6}>
          <ReadMeCard entity={entity} />
        </Grid>
      </>
    )}
  </Grid>
);

How it looks

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.