WhitepaperSelf-hosting Backstage vs managed Backstage
Roadie
← Backstage Plugins Guides
FOSSA logo

Backstage FOSSA Plugin

View FOSSA license findings inside Backstage.

Created by SDA SE

Set up Backstage in minutes with Roadie

Get a demo
A screenshot of the FOSSA plugin.

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:

FOSSA Card Component

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:

FOSSA Page Component

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:

  1. Open app.fossa.com/account/settings.

  2. Navigate to the API section on the Integrations tab.

  3. Add a new token. Do not select the “Push Only” option.

    Create FOSSA API key

  4. Copy the token and save it to FOSSA_API_TOKEN environment variable.

    View FOSSA API key

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.

Set up Backstage in minutes with Roadie

Get a demo