Bitrise logo

Backstage Bitrise Plugin

Created by SDA SE

Bitrise is a continuous integration and delivery service built for mobile teams. It runs iOS and Android builds, automates tests, produces artifacts, and links the results back to your code. If your engineers push often and need fast feedback, Bitrise covers that shared workflow across apps and platforms.

The Bitrise plugin brings that context into Backstage. It adds a Bitrise view to each catalog entity that links to a Bitrise app. You can see recent builds, check status, filter history, jump to the run in Bitrise, and download build artifacts from one place. This helps mobile and platform teams debug failed builds faster, hand off artifacts to QA, and keep release work visible inside the portal. It fits well when you want a single pane for service ownership, docs, and mobile pipelines.

SDA SE created the plugin and uses it in production. You can read more about their journey and why they built it. They write that they first proved the value internally with a simple release of the feature set. In their words, we deployed it in our internal instance first.

Bitrise in Backstage

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

Copy
yarn --cwd packages/app add @backstage-community/plugin-bitrise

Add the Bitrise tab to the entity page

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

Import the component at the top

Copy
import { EntityBitriseContent, isBitriseAvailable } from '@backstage-community/plugin-bitrise';

Add the tab inside your entity layout so users can see it

Copy
// inside your EntityPage layout
<EntityLayout.Route path="/bitrise" title="Bitrise" if={isBitriseAvailable}>
  <EntityBitriseContent />
</EntityLayout.Route>

Place this Route near your other entity tabs such as Overview or CI

Add the catalog annotation

Add the Bitrise app annotation to each catalog entity that should show Bitrise builds

Copy
metadata:
  annotations:
    bitrise.io/app: 'THE NAME OF THE BITRISE APP'

Configure the Bitrise API proxy

Add this to app-config.yaml

Copy
proxy:
  '/bitrise':
    target: 'https://api.bitrise.io/v0.1'
    allowedMethods: ['GET']
    headers:
      Authorization: ${BITRISE_AUTH_TOKEN}

Set the token in your environment

Copy
export BITRISE_AUTH_TOKEN='your_bitrise_personal_access_token'

You can create a Bitrise token from the Bitrise docs for API authentication

Wire up the backend proxy

The plugin calls the Backstage proxy. Make sure the proxy backend plugin is installed and registered

New backend system

Add the dependency to the backend package

Copy
yarn --cwd packages/backend add @backstage/plugin-proxy-backend

Register the proxy plugin in packages/backend/src/index.ts

Copy
import { createBackend } from '@backstage/backend-defaults';
import { proxyPlugin } from '@backstage/plugin-proxy-backend';

const backend = createBackend();
backend.add(proxyPlugin());
backend.start();

Legacy backend system

Add the dependency to the backend package

Copy
yarn --cwd packages/backend add @backstage/plugin-proxy-backend

Create packages/backend/src/plugins/proxy.ts

Copy
import { createRouter } from '@backstage/plugin-proxy-backend';
import { PluginEnvironment } from '../types';

export default async function createPlugin(env: PluginEnvironment) {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    tokenManager: env.tokenManager,
  });
}

Mount it in packages/backend/src/index.ts at the same place where you mount other routers

Copy
import proxy from './plugins/proxy';

// create envs as in your app
const proxyEnv = useHotMemoize(module, () => createEnv('proxy'));

apiRouter.use('/proxy', await proxy(proxyEnv));

Things to Know

Once a Backstage component is linked to a Bitrise app via the component’s catalog-info.yaml, a summary of Bitrise builds are visible on the component’s page in Backstage.

Bitrise tab in Backstage

Not only can you see a summary of your builds, but you can also:

  • view builds for each of your Bitrise workflows if you have multiple workflows defined for your app
  • link to the build in Bitrise
  • link to the commit in the underlying source control system (ex. GitHub) that triggered the build
  • download artifacts produced by the build right from Backstage

Similar to other Backstage plugins, the Bitrise tab can be added to multiple entity types on the entity page.

Connecting to the Bitrise API

The plugin connects to the Bitrise API using a personal token. The token can be generated from your Bitrise profile:

Create Bitrise personal token

See Authenticating with the Bitrise API for more information.

Once you have generated a personal access token, the token can be defined in an environment variable and referenced from app-config.yaml.

Changelog

This changelog is produced from commits made to the Bitrise plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Breaking changes

None

Maintenance

  • Remove unused dev dependency canvas. PR #3565 merged 5 months ago
  • Update repo tools to reduce false positives in knip reports. No user facing change. PR #3018 merged 6 months ago

Set up Backstage in minutes with Roadie