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

Backstage Travis CI Plugin

See builds in Backstage

Created by Roadie

Getting started is simple

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

Installation steps

In the backstage/packages/app project add the plugin as a package.json dependency:

yarn add @roadiehq/backstage-plugin-travis-ci

Add proxy configurations

// app-config.yaml
proxy:
  # ...

  '/travisci/api':
    target: https://api.travis-ci.com
    changeOrigin: true
    headers:
      Authorization: ${TRAVISCI_AUTH_TOKEN}
      travis-api-version: 3

Add a separate configuration object.

// app-config.yaml
travisci:
  baseUrl: 'https://travis-ci.com/'

Import it into your Backstage application

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityTravisCIContent,
  EntityTravisCIOverviewCard,
  isTravisciAvailable,
} from '@roadiehq/backstage-plugin-travis-ci';

Add plugin API to your Backstage instance

// packages/app/src/components/catalog/EntityPage.tsx

export const cicdContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={isTravisciAvailable}>
      <EntityTravisCIContent />
    </EntitySwitch.Case>
    ...
  </EntitySwitch>
);

Add recent Travis-CI builds widget/card to your Overview card.

// packages/app/src/components/catalog/EntityPage.tsx

export const cicdCard = (
  <EntitySwitch>
    <EntitySwitch.Case if={isTravisciAvailable}>
      <EntityTravisCIOverviewCard />
    </EntitySwitch.Case>
    ...
  </EntitySwitch>
);

Add annotation to the yaml config file of a component

travis-ci.com/repo-slug: owner-name/project-name

Add your developer api key to the environment variables of your backstage backend server (you can find it in https://travis-ci.com/account/preferences), in the form of the word 'token' followed by your api key. So it should look like this

TRAVISCI_AUTH_TOKEN="token your-api-key"

Found a mistake? Update these instructions.

How it looks

A screenshot of the Travis CI plugin. It is showing a list of builds for a sample service.

Things to know

Features

List Travis CI Builds
Retrigger builds

To use the Travis CI Backstage plugin, first visit Travis CI to get an API token: Travis Preferences

There are two versions of Travis CI: https://travis-ci.com and https://travis-ci.org. travis-ci.org is deprecated and not supported in this plugin.

Copy the token to your clipboard.

Each build can be retried via the column on the right hand side.

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.