> ## Documentation Index
> Fetch the complete documentation index at: https://ona.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/classic/user/references/gitpod-yml) to guide Gitpod in setting up the development environment.

## Installation

Add the plugin to your Backstage app by running:

```shell theme={null}
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`:

```tsx theme={null}
import { GitpodButton } from '@gitpod/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](https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/components/artist-lookup-component.yaml) to your Backstage catalog entity file.

This approach uses the [Gitpod URL](/classic/user/references/gitpod-url) scheme to open repositories in Gitpod seamlessly. It does not require installing any plugins or adding explicit UI components to Backstage.

```yaml theme={null}
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

* [Building a developer-first platform with an IDP and CDE](https://www.gitpod.io/webinars/gitpod-kubernetes-reference-architecture)
* [Internal Developer Portals](/classic/user/integrations/internal-developer-portals)
* [Introducing Gitpod's Backstage Plugin](https://www.gitpod.io/blog/introducing-gitpods-backstage-plugin)
* [Gitpod Backstage Demo](https://github.com/gitpod-samples/gitpod-backstage-demo)