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: 
yarn add --cwd packages/app @gitpod/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: 
import { GitpodButton } from '@gitpod/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. 
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.

​
Resources