Backstage Google Cloud Build Plugin

Google Cloud Build is a managed CI CD service on Google Cloud. It runs builds in clean containers. It connects to your source control. It can build, test, and deploy without you running any servers.The Google Cloud Build plugin brings that build history into your Backstage CI CD page. For each catalog entity you can see recent runs from your project. Status, timing, source info, and links to Cloud Build logs are all in one place. You stay in Backstage while you check on pipelines and follow up on failures.

The plugin can filter results so the page stays focused on the service you are viewing. It can match on repository name by default. You can switch to filtering by trigger name when that is a better fit. You can also point the plugin at a specific Cloud Build location to view regional builds, not only the global scope. These options help reduce noise in busy projects.The project sits in the Backstage community and has seen steady updates.

Install the frontend package

Copy

cd packages/app
yarn add @backstage-community/plugin-cloudbuild

Register the Cloud Build API client

Edit packages/app/src/apis.ts

Add the imports

Copy

// packages/app/src/apis.ts
import { createApiFactory, googleAuthApiRef } from '@backstage/core-plugin-api';
import { cloudbuildApiRef, CloudbuildClient } from '@backstage-community/plugin-cloudbuild';

Add the factory to the exported apis array

Copy

// packages/app/src/apis.ts
export const apis = [
  // existing factories

  createApiFactory({
    api: cloudbuildApiRef,
    deps: { googleAuthApi: googleAuthApiRef },
    factory: ({ googleAuthApi }) => new CloudbuildClient(googleAuthApi),
  }),
];

Add Cloud Build to the entity CI CD page

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

Add the imports

Copy

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityCloudbuildContent, isCloudbuildAvailable } from '@backstage-community/plugin-cloudbuild';

Add the switch case inside your CI CD content

Copy

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

    {/* keep or remove other CI providers as you need */}
    <EntitySwitch.Case if={isGithubActionsAvailable}>
      <EntityGithubActionsContent />
    </EntitySwitch.Case>
  </EntitySwitch>
);

If you do not use GitHub Actions you can remove that case

Copy

// packages/app/src/components/catalog/EntityPage.tsx
const cicdContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={isCloudbuildAvailable}>
      <EntityCloudbuildContent />
    </EntitySwitch.Case>
  </EntitySwitch>
);

Optional cards on the overview page

You can show the latest run or the latest runs for a branch as cards

Add the imports

Copy

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityLatestCloudbuildRunCard,
  EntityLatestCloudbuildsForBranchCard,
} from '@backstage-community/plugin-cloudbuild';

Add the cards inside an EntityLayout section or inside your overview Grid

Copy

// example usage inside an overview grid
<Grid container spacing={3}>
  <Grid item xs={12} md={6}>
    <EntityLatestCloudbuildRunCard branch="main" />
  </Grid>
  <Grid item xs={12} md={6}>
    <EntityLatestCloudbuildsForBranchCard branch="main" />
  </Grid>
</Grid>

Annotate your catalog entities

Add the required project annotation to each entity that should show Cloud Build data

Copy

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  description: Backstage application.
  annotations:
    google.com/cloudbuild-project-slug: your-project-name
spec:
  type: website
  lifecycle: development

Default filtering uses the repository name that matches metadata.name

You can set a different repository filter

Copy

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  description: Backstage application.
  annotations:
    google.com/cloudbuild-project-slug: your-project-name
    google.com/cloudbuild-repo-name: my-backstage
spec:
  type: website
  lifecycle: development

You can filter by trigger name instead of repository name

Copy

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  description: Backstage application.
  annotations:
    google.com/cloudbuild-project-slug: your-project-name
    google.com/cloudbuild-trigger-name: my-trigger-name
spec:
  type: website
  lifecycle: development

The repo name annotation wins over the trigger name annotation

Cloud Build location defaults to global

You can set a region or location

Copy

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  description: Backstage application.
  annotations:
    google.com/cloudbuild-project-slug: your-project-name
    google.com/cloudbuild-location: us-central1
spec:
  type: website
  lifecycle: development

Backstage Google Cloud Build Plugin

Installation Instructions

Install the frontend package

Register the Cloud Build API client

Add Cloud Build to the entity CI CD page

Optional cards on the overview page

Annotate your catalog entities

Changelog

Maintenance

Set up Backstage in minutes with Roadie