Backstage FOSSA Plugin

Skip the manual plugin installation with no-code Backstage

Installation steps

Install the plugin.

cd packages/app
yarn add @backstage/plugin-fossa

Add a proxy API endpoint to app-config.yaml. See Creating a FOSSA API key for help creating a FOSSA API token.

# app-config.yaml
proxy:
'/fossa':
    target: https://app.fossa.io/api
    allowedMethods: ['GET']
    headers:
      Authorization: token ${FOSSA_API_TOKEN}

Add the FOSSA card to the Overview tab on the entity page.

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityFossaCard } from '@backstage/plugin-fossa';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    
    {/* other grid items */}

    <Grid item md={4} xs={12}>
      <EntityFossaCard />
    </Grid>

  </Grid>
);

Add a new route for the FOSSA Component Overview page.

// packages/app/src/App.tsx
import { FossaPage } from '@backstage/plugin-fossa';

const routes = (
  <FlatRoutes>
    {/* existing routes */}
    <Route path="/fossa" element={<FossaPage />} />
  </FlatRoutes>
);

Add a link to the FOSSA Component Overview route to the sidebar.

// packages/app/src/components/Root/Root.tsx
<SidebarItem icon={ExtensionIcon} to="fossa" text="FOSSA" />

Add an annotation to a component's catalog configuration file to link the component to a FOSSA project.

# catalog-info.yml
metadata:
  annotations:
    fossa.io/project-name: my-fossa-project-name
```

Found a mistake? Update these instructions.

Things to know

The FOSSA plugin is a frontend plugin that summarizes license findings for components in Backstage. The plugin includes a card component that displays a summary of findings for individual components:

It also includes a page component that displays a summary of findings for all components in Backstage that are annotated with the FOSSA plugin annotation:

Both components allow users to link directly to findings on the FOSSA website.

Creating a FOSSA API key

A FOSSA API key is required for Backstage to connect to the FOSSA API to retrieve license findings. FOSSA API keys are associated with to FOSSA user accounts.

To create a FOSSA API key:

Open app.fossa.com/account/settings.
Navigate to the API section on the Integrations tab.
Add a new token. Do not select the “Push Only” option.
Copy the token and save it to FOSSA_API_TOKEN environment variable.

Specifying a FOSSA organization ID

You can optionally provide a FOSSA organization ID in app-config.yaml:

fossa:
  organizationId: <your-fossa-organization-id>

Organization ID is not currently required by the functionality included with this plugin. FOSSA findings are retrieved using the fossa.io/project-name (FOSSA project title) in the component’s catalog-info.yml. If an organization ID is provided, it is added as an additional filter parameter on the FOSSA API request to retrieve project details but it ultimately will not affect the data that is returned.

Prefer a no-code Backstage setup?

Request a Roadie demo

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.