Backstage

Our Gitpod plugin adds an ”Open in Gitpod” button to Backstage, using the metadata from your project’s catalog entity to construct a Gitpod URL.

The Gitpod URL directs to a source control management (SCM) repository. In the root directory of this repository, a .gitpod.yml file is configured to guide Gitpod in setting up the development environment.

Gitpod Backstage demo

Installation

Add the plugin to your Backstage app by running:

bash

yarn add --cwd packages/app @gitpod-io/backstage-plugin-gitpod

Import and use the GitpodButton component in your app, typically where you display information about your services or components. For example, in EntityPage.tsx:

tsx

import { GitpodButton } from '@gitpod-io/backstage-plugin-gitpod';
//....
const HomePage = () => (
	// ...
	<Grid item md={3} xs={6}>
		<GitpodButton />
	</Grid> // ...
);

Integrating Gitpod through a metadata link in the catalog file

For a simpler alternative, you can add specific metadata to your Backstage catalog entity file.

This approach uses the Gitpod URL scheme to open repositories in Gitpod seamlessly. It does not require installing any plugins or adding explicit UI components to Backstage.

yml

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: example-website
  annotations:
    gitpod.io/host: gitpod.io
    github.com/project-slug: backstage/backstage
  links:
    - url:[https://gitpod.io/\#<https://](https://gitpod.io/#https://github.com/gitpod-io/website)your-repo-link>
      title: Open In Gitpod
      icon: dashboard
spec:
  type: website
  lifecycle: experimental
  owner: guests
  system: examples
  providesApis: [example-grpc-api]"

Replace <https://your-repo-link> with the actual URL of your GitHub/GitLab/Bitbucket repository.

Backstage

Installation

Integrating Gitpod through a metadata link in the catalog file

Resources

Was this helpful?