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


Add the plugin to your Backstage app by running:

language icon 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:

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

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.

language icon yml
kind: Component
  name: example-website
  annotations: backstage/backstage
    - url:[\#<https://](>
      title: Open In Gitpod
      icon: dashboard
  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.


Was this helpful?