Backstage Humanitec Plugin

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Installation steps

This plugin requires @humanitec/backstage-plugin-backend because it connects to the backend to make requests to the Humanitec API. Install that first.

Install the plugin into your Backstage instance.

yarn --cwd packages/app add @humanitec/backstage-plugin

Add Humanitec to your app-config.

// app-config.yaml
humanitec:
  orgId: my-humanitec-organization
  token: ${HUMANITEC_TOKEN} # without Bearer

Add the Humanitec HumanitecCardComponent to your Entity page.

// packages/app/src/components/catalog/EntityPage.tsx
import { HumanitecCardComponent, hasHumanitecAnnotations } from '@humanitec/backstage-plugin';
...
const overviewContent = (
  <Grid container>
    ...
   <EntitySwitch>
     <EntitySwitch.Case if={hasHumanitecAnnotations}>
       <Grid item md={6}>
         <HumanitecCardComponent />
       </Grid>
     </EntitySwitch.Case>
   </EntitySwitch>
  </Grid>
)

Add annotations to relevant catalog-info.yaml files for Entities with associated Humanitec resources.

// some-example-catalog-info.yaml
...
metadata:
  annotations:
    # mandatory annotation
    humanitec.com/orgId: <ord-id>
    humanitec.com/appId: <application-id>
...

Found a mistake? Update these instructions.

Things to know

Useful Links

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo