Backstage Plugin

Getting Started

Before setting up your Backstage Plugin, you'll need to first install our Github App. By default, we'll generate CODEOWNERS files for you - at your request we can disable this functionality, please reach out to support.

Backstage Configuration

You'll need to configure a proxy to and place the cards in your catalog entity pages.

Create a Personal Access Token

See documentation for creating your personal access token.

Configure API Proxy

Configure Backstage so that the Codeowners plugin can communicate to the API:

# in app-config.yaml
      Authorization: Bearer ${CODEOWNERS_API_KEY}

Reminder: Be sure to create CODEOWNERS_API_KEY environment variable where you run your Backstage server.

Add the Settings Page

  1. Add a route to the Codeowners settings page:
// packages/app/src/App.tsx
import { CodeownersSettingsPage } from "@codeowners/backstage-plugin";

const routes = (
    {/* snip... */}
    <Route path="/codeowners" element={<CodeownersSettingsPage />} />
  1. Create a link in the Backstage sidebar to the Codeowners settings page
// packages/app/src/components/Root/Root.tsx
import { CodeownersIcon } from "@codeowners/backstage-plugin";

export const Root = ({ children }: PropsWithChildren<{}>) => (
      {/* snip...  */}
      <SidebarItem icon={CodeownersIcon} to="codeowners" text="" />

Add the Backstage plugin cards

  1. Add the module to your Backstage instance:
yarn add --cwd packages/app @codeowners/backstage-plugin
  1. Import the cards you want to use in the Backstage entity overview page:
 // In packages/app/src/components/catalog/EntityPage.tsx

 // Add the following in the imports
 import { ServiceCodeownersCard, RecentChangesCard } from "@codeowners/backstage-plugin";
  1. In the same file, look for the overviewContent object and add the cards you want to use in its Grid:
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    { /*  snip other cards... */ }
    <Grid item xs={4}>
      <ServiceCodeownersCard />
    <Grid item xs={8}>
      <RecentChangesCard />