Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
Travis CI logo

Backstage Travis CI Plugin

Created by Roadie

Travis CI is a hosted continuous integration service. It builds your code on every change, runs tests, reports status, and can trigger deploy steps. Many teams use it to keep pull requests honest and keep main branches green.

This plugin brings your Travis CI activity into Backstage. It shows recent builds for the service you are viewing. You can see status at a glance and retrigger a build when you need a fresh run. It works inside the Backstage service catalog so engineers do not have to jump between tools to understand what is going on with a service.

Common use cases include checking if a release branch is healthy before a cut, confirming that flaky tests have settled after a fix, or unblocking a pull request by rerunning a failed job. It helps on call engineers see whether a failing build is related to an incident. It helps platform teams give consistent CI visibility across many services without teaching every team a new workflow.

If you already rely on Travis CI and you run a self hosted Backstage, this plugin gives you a simple way to connect the two. You get build history and quick actions in the same place where you keep ownership, docs, and runtime links. The result is less context switching and faster feedback.

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

Installation Instructions

These instructions apply to self-hosted Backstage only. To use this plugin on Roadie, visit the docs.

Install the frontend package

  1. Move into your app package
Copy 
cd packages/app
  1. Add the plugin
Copy 
yarn add @roadiehq/backstage-plugin-travis-ci

Configure app config

  1. Open app-config.yaml in the repo root
  2. Add a proxy entry
Copy 
proxy:
  '/travisci/api':
    target: https://api.travis-ci.com
    changeOrigin: true
    headers:
      Authorization: ${TRAVISCI_AUTH_TOKEN}
      travis-api-version: 3
  1. Add the Travis CI base URL
Copy 
travisci:
  baseUrl: 'https://travis-ci.com/'
  1. Set the auth token in the backend process environment
Copy 
# value must start with the word token
export TRAVISCI_AUTH_TOKEN="token <your-api-key>"

Wire the UI into EntityPage

  1. Open packages/app/src/components/catalog/EntityPage.tsx
  2. Import the components
Copy 
import {
  EntityTravisCIContent,
  EntityTravisCIOverviewCard,
  isTravisciAvailable,
} from '@roadiehq/backstage-plugin-travis-ci';
import { EntitySwitch } from '@backstage/plugin-catalog-react';
import Grid from '@material-ui/core/Grid';
  1. Add a CI CD tab section
Copy 
// inside your EntityLayout for the service or component page
// example when using a CI CD route
<EntityLayout.Route path="/ci-cd" title="CI CD">
  <EntitySwitch>
    <EntitySwitch.Case if={isTravisciAvailable}>
      <EntityTravisCIContent />
    </EntitySwitch.Case>
  </EntitySwitch>
</EntityLayout.Route>
  1. Add the overview card on the overview tab
Copy 
// inside the Overview route content grid
<EntitySwitch>
  <EntitySwitch.Case if={isTravisciAvailable}>
    <Grid item sm={6}>
      <EntityTravisCIOverviewCard />
    </Grid>
  </EntitySwitch.Case>
</EntitySwitch>

Add the entity annotation

  1. In your catalog entity yaml add the repo slug annotation
Copy 
metadata:
  annotations:
    travis-ci.com/repo-slug: <owner-name>/<project-name>

Backend setup for the new backend system

If your backend uses the new backend system with createBackend

  1. Move into the backend package
Copy 
cd packages/backend
  1. Add the proxy backend plugin
Copy 
yarn add @backstage/plugin-proxy-backend
  1. Register the proxy plugin
Copy 
// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';
import { plugin as proxy } from '@backstage/plugin-proxy-backend';

const backend = createBackend();

backend.add(proxy());

backend.start();

The proxy config in app-config.yaml that you added earlier will drive the routing
No extra code is needed for Travis CI beyond the proxy plugin and the environment variable

Backend setup for the old backend system

If your backend uses the older express based setup with createServiceBuilder

  1. Move into the backend package
Copy 
cd packages/backend
  1. Add the proxy backend plugin
Copy 
yarn add @backstage/plugin-proxy-backend
  1. Create the proxy plugin router
Copy 
// packages/backend/src/plugins/proxy.ts
import { createRouter } from '@backstage/plugin-proxy-backend';
import { LoggerService } from '@backstage/backend-plugin-api';
import { Config } from '@backstage/config';
import { Router } from 'express';

export interface PluginEnvironment {
  logger: LoggerService;
  config: Config;
}

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
  });
}
  1. Mount the router in the backend
Copy 
// packages/backend/src/index.ts
import proxy from './plugins/proxy';

// inside the main bootstrap where apiRouter is created
const proxyEnv = useHotMemoize(module, () => createEnv('proxy'));
apiRouter.use('/proxy', await proxy(proxyEnv));

The proxy config in app-config.yaml that you added earlier will drive the routing

Run the app

  1. Start the backend with the TRAVISCI_AUTH_TOKEN set in the environment
  2. Start the frontend as usual

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.

travis-ci-copy-auth-token-1036x603

Copy the token to your clipboard.

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

Changelog

This changelog is produced from commits made to the Travis CI plugin since a year ago. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Breaking changes

  • The plugin may require Backstage 1.40 or later after PR #1952 merged 2 months ago. If your app is older you need to upgrade

Performance

  • Switch date handling to luxon where used. This can reduce bundle size for consumers PR #1759 merged 9 months ago

Maintenance

  • Upgrade to Backstage 1.40 across the repo including this plugin PR #1952 merged 2 months ago
  • Update Backstage dependencies across plugins PR #1821 merged 7 months ago then revert in PR #1825 merged 7 months ago
  • Remove unused plugin dependencies PR #1847 merged 7 months ago
  • Update Backstage package versions to match newer scaffolder versions PR #1728 merged 10 months ago
  • Routine dependency update across plugins PR #1684 merged 11 months ago

Notes

  • No new features or UI changes specific to the Travis CI plugin in this range

Set up Backstage in minutes with Roadie

Get a demo