Join us at the first ever Backstage Users Unconference community event on November 4th.

Backstage Circle CI Plugin

See Circle CI Builds in Backstage

Created by Spotify

Getting started is simple

Don't want to spend your time installing and upgrading Backstage plugins? Get managed Backstage from Roadie.

Installation steps

Install the plugin

yarn add @backstage/plugin-circleci

Import it into your Backstage application

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityCircleCIContent,
  isCircleCIAvailable,
} from '@backstage/plugin-circleci';

Add the plugin to the CI/CD section

// packages/app/src/components/catalog/EntityPage.tsx
const cicdContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={isCircleCIAvailable}>
      <EntityCircleCIContent />
    </EntitySwitch.Case>
    ...
  </EntitySwitch>

Add proxy configuration

# app-config.yaml
proxy:
  '/circleci/api':
    target: https://circleci.com/api/v1.1
    headers:
      Circle-Token: ${CIRCLECI_AUTH_TOKEN}

Get and provide a CIRCLECI_AUTH_TOKEN as an environment variable (see the CircleCI docs)

Add a circleci.com/project-slug annotation to your respective catalog-info.yaml files following the Component format

# Example catalog-info.yaml entity definition file
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  # ...
  annotations:
    # This also supports bitbucket/xxx/yyy
    circleci.com/project-slug: github/my-org/my-repo
spec:
  type: service
  # ...

Found a mistake? Update these instructions.

How it looks

A list of builds in a table along with a status and retry button for each build.

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.