Backstage Community Plugins (backstage/community-plugins)

Backstage Community Plugins

https://github.com/backstage/community-plugins
Admin
Backstage Community Plugins is a repository where the community collaborates to develop, maintain,...

Tokens:721,340
Snippets:4,652
Trust Score:8.9
Update:2 months ago
Show doc for...
Context Summary (auto-generated)
Raw
# Backstage Community Plugins

Backstage Community Plugins is a collaborative repository where the Backstage community develops, maintains, and shares plugins for the Backstage developer portal platform. This monorepo contains over 100 workspaces, each hosting one or more plugins that extend Backstage's functionality with integrations for CI/CD tools, cloud services, security scanning, observability platforms, and more. All plugins are published under the `@backstage-community` npm scope and follow standardized release processes using changesets.

The repository is designed to provide plugin maintainers with established workflows, tooling, and community support while keeping plugin development separate from the core Backstage repository. Each workspace operates as an independent yarn workspace with its own changesets, releases, and CODEOWNERS, making plugins portable and easy to manage. Plugins include frontend components that integrate with Backstage's EntityPage, backend services that provide APIs, and catalog modules that import data from external systems.

## Creating a New Workspace

Create a new plugin workspace to host your Backstage plugins using the workspace creation command.

```bash
# Clone the repository and install dependencies
git clone https://github.com/backstage/community-plugins.git
cd community-plugins
yarn install

# Create a new workspace interactively
yarn create-workspace
# Follow the prompts to name your workspace

# Navigate to your new workspace
cd workspaces/your-workspace-name
yarn install

# Create a new plugin within the workspace
yarn new
# Select plugin type: frontend-plugin, backend-plugin, etc.
```

## Creating Changesets for Releases

Create changesets to document changes and trigger automated releases.

```bash
# Navigate to your workspace root
cd workspaces/your-workspace-name

# Create a new changeset
yarn changeset

# Select packages that changed
# ? Which packages would you like to include?
# > @backstage-community/plugin-your-plugin

# Select semver bump type
# ? Which packages should have a major bump?
# ? Which packages should have a minor bump?
# > @backstage-community/plugin-your-plugin

# Enter changeset description
# ? Please enter a summary for this change:
# > Added new feature for displaying deployment status

# Commit the generated changeset file
git add .changeset/*.md
git commit -m "Add changeset for deployment status feature"
```

## GitHub Actions Plugin Installation

Display GitHub Actions workflow runs and build status for entities in the Backstage catalog.

```bash
# Install the plugin
yarn --cwd packages/app add @backstage-community/plugin-github-actions
```

```tsx
// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityGithubActionsContent,
  isGithubActionsAvailable,
} from '@backstage-community/plugin-github-actions';

const serviceEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      {/* Overview content */}
    </EntityLayout.Route>
    <EntityLayout.Route
      path="/github-actions"
      title="GitHub Actions"
      if={isGithubActionsAvailable}
    >
      <EntityGithubActionsContent />
    </EntityLayout.Route>
  </EntityLayout>
);

// Optional: Use card view with branch selection
<EntityGithubActionsContent view="cards" />
```

```yaml
# catalog-info.yaml - Entity annotation
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-service
  annotations:
    github.com/project-slug: 'organization/repository'
spec:
  type: service
  lifecycle: production
  owner: team-a
```

## Jenkins Plugin Integration

Display Jenkins build information, job history, and latest build status for entities.

```bash
# Install frontend and backend plugins
yarn --cwd packages/app add @backstage-community/plugin-jenkins
yarn --cwd packages/backend add @backstage-community/plugin-jenkins-backend
```

```tsx
// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityJenkinsContent,
  EntityLatestJenkinsRunCard,
  isJenkinsAvailable,
} from '@backstage-community/plugin-jenkins';

const serviceEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        <EntitySwitch>
          <EntitySwitch.Case if={isJenkinsAvailable}>
            <Grid item sm={6}>
              <EntityLatestJenkinsRunCard
                branch="main,master"
                variant="gridItem"
                title={(branch: string) => `Latest ${branch} build`}
              />
            </Grid>
          </EntitySwitch.Case>
        </EntitySwitch>
      </Grid>
    </EntityLayout.Route>
    <EntityLayout.Route path="/ci-cd" title="CI/CD">
      <EntitySwitch>
        <EntitySwitch.Case if={isJenkinsAvailable}>
          <EntityJenkinsContent title="Jenkins build history" />
        </EntitySwitch.Case>
      </EntitySwitch>
    </EntityLayout.Route>
  </EntityLayout>
);
```

```yaml
# catalog-info.yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-service
  annotations:
    jenkins.io/job-full-name: 'folder-name/project-name'
spec:
  type: service
  owner: team-a
```

## Tech Radar Plugin Setup

Create and display a technology radar visualization to communicate technology choices and recommendations across your organization.

```bash
# Install the plugin
yarn --cwd packages/app add @backstage-community/plugin-tech-radar
```

```tsx
// packages/app/src/App.tsx
import { TechRadarPage } from '@backstage-community/plugin-tech-radar';

const routes = (
  <FlatRoutes>
    <Route path="/tech-radar" element={<TechRadarPage />} />
  </FlatRoutes>
);
```

```ts
// Custom API implementation - packages/app/src/lib/TechRadarClient.ts
import { TechRadarApi } from '@backstage-community/plugin-tech-radar';
import { TechRadarLoaderResponse } from '@backstage-community/plugin-tech-radar-common';

export class TechRadarClient implements TechRadarApi {
  async load(id: string | undefined): Promise<TechRadarLoaderResponse> {
    const response = await fetch('/api/tech-radar/data.json');
    const data = await response.json();

    return {
      ...data,
      entries: data.entries.map((entry: any) => ({
        ...entry,
        timeline: entry.timeline.map((t: any) => ({
          ...t,
          date: new Date(t.date),
        })),
      })),
    };
  }
}

// packages/app/src/apis.ts
import { techRadarApiRef } from '@backstage-community/plugin-tech-radar';
import { TechRadarClient } from './lib/TechRadarClient';

export const apis: AnyApiFactory[] = [
  createApiFactory(techRadarApiRef, new TechRadarClient()),
];
```

```json
// Tech Radar data format
{
  "title": "Engineering Tech Radar",
  "quadrants": [
    { "id": "1", "name": "Languages & Frameworks" },
    { "id": "2", "name": "Tools" },
    { "id": "3", "name": "Platforms" },
    { "id": "4", "name": "Techniques" }
  ],
  "rings": [
    { "id": "adopt", "name": "ADOPT", "color": "#93c47d" },
    { "id": "trial", "name": "TRIAL", "color": "#93d2c2" },
    { "id": "assess", "name": "ASSESS", "color": "#fbdb84" },
    { "id": "hold", "name": "HOLD", "color": "#efafa9" }
  ],
  "entries": [
    {
      "id": "typescript",
      "title": "TypeScript",
      "key": "typescript",
      "quadrant": "1",
      "timeline": [
        {
          "moved": 0,
          "ringId": "adopt",
          "date": "2024-01-15",
          "description": "Standard language for all new projects"
        }
      ]
    }
  ]
}
```

## Argo CD Plugin Configuration

Display Argo CD deployment status, application lifecycle, and sync information for Kubernetes applications.

```bash
# Install frontend and backend plugins
yarn workspace app add @backstage-community/plugin-argocd
```

```tsx
// packages/app/src/components/catalog/EntityPage.tsx
import {
  ArgocdDeploymentSummary,
  ArgocdDeploymentLifecycle,
  isArgocdConfigured,
} from '@backstage-community/plugin-argocd';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
        <Grid item sm={12}>
          <ArgocdDeploymentSummary />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

const cicdContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
      <Grid item sm={12}>
        <ArgocdDeploymentLifecycle />
      </Grid>
    </EntitySwitch.Case>
  </EntitySwitch>
);
```

```yaml
# catalog-info.yaml - Using app selector for multiple apps
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-service
  annotations:
    argocd/app-selector: 'app.kubernetes.io/name=my-service'
    argocd/instance-name: 'argoInstance1,argoInstance2'
    backstage.io/kubernetes-id: my-service
    backstage.io/kubernetes-namespace: production
spec:
  type: service
  owner: team-a

---
# Or use single app annotation
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-service
  annotations:
    argocd/app-name: 'my-service-prod'
    argocd/project-name: 'default'
spec:
  type: service
  owner: team-a
```

## SonarQube Plugin Integration

Display code quality metrics, security vulnerabilities, and code coverage from SonarQube or SonarCloud.

```bash
# Install plugins
yarn --cwd packages/app add @backstage-community/plugin-sonarqube @backstage-community/plugin-sonarqube-react
```

```tsx
// packages/app/src/components/catalog/EntityPage.tsx
import { EntitySonarQubeCard, SonarQubeRelatedEntitiesOverview } from '@backstage-community/plugin-sonarqube';
import { isSonarQubeAvailable } from '@backstage-community/plugin-sonarqube-react';
import { RELATION_HAS_PART } from '@backstage/catalog-model';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    <Grid item md={6}>
      <EntityAboutCard variant="gridItem" />
    </Grid>
    <EntitySwitch>
      <EntitySwitch.Case if={isSonarQubeAvailable}>
        <Grid item md={6}>
          <EntitySonarQubeCard
            variant="gridItem"
            missingAnnotationReadMoreUrl="https://docs.example.com/sonarqube"
          />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

const systemPage = (
  <EntityLayout>
    <EntityLayout.Route path="/sonarqube" title="Code Quality">
      <SonarQubeRelatedEntitiesOverview
        relationType={RELATION_HAS_PART}
        entityKind="component"
      />
    </EntityLayout.Route>
  </EntityLayout>
);
```

```yaml
# catalog-info.yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-service
  annotations:
    sonarqube.org/project-key: my-instance/my-project-key
spec:
  type: library
  owner: team-a
```

## Keycloak Catalog Backend Module

Synchronize users and groups from Keycloak realms into the Backstage catalog automatically.

```bash
# Install the backend module
yarn workspace backend add @backstage-community/plugin-catalog-backend-module-keycloak
```

```ts
// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

backend.add(import('@backstage/plugin-catalog-backend'));
backend.add(import('@backstage-community/plugin-catalog-backend-module-keycloak'));

backend.start();
```

```yaml
# app-config.yaml
catalog:
  providers:
    keycloakOrg:
      default:
        baseUrl: https://keycloak.example.com
        loginRealm: ${KEYCLOAK_REALM}
        realm: ${KEYCLOAK_REALM}
        clientId: ${KEYCLOAK_CLIENTID}
        clientSecret: ${KEYCLOAK_CLIENTSECRET}
        schedule:
          frequency: { minutes: 30 }
          timeout: { minutes: 3 }
        userQuerySize: 100
        groupQuerySize: 100
```

```ts
// Custom transformer module - plugins/keycloak-transformer/src/module.ts
import {
  GroupTransformer,
  keycloakTransformerExtensionPoint,
  UserTransformer,
} from '@backstage-community/plugin-catalog-backend-module-keycloak';
import { createBackendModule } from '@backstage/backend-plugin-api';

const customUserTransformer: UserTransformer = async (entity, user, realm, groups) => {
  // Add custom metadata or transform user entity
  entity.metadata.annotations = {
    ...entity.metadata.annotations,
    'example.com/keycloak-id': user.id,
  };
  return entity;
};

const customGroupTransformer: GroupTransformer = async (entity, realm, groups) => {
  // Transform group entity
  return entity;
};

export const keycloakTransformerModule = createBackendModule({
  pluginId: 'catalog',
  moduleId: 'keycloak-transformer',
  register(reg) {
    reg.registerInit({
      deps: { keycloak: keycloakTransformerExtensionPoint },
      async init({ keycloak }) {
        keycloak.setUserTransformer(customUserTransformer);
        keycloak.setGroupTransformer(customGroupTransformer);
      },
    });
  },
});
```

## Announcements Plugin Setup

Create, manage, and display announcements to users across your Backstage instance with support for categories, banners, and timeline views.

```bash
# Install frontend and backend
yarn --cwd packages/app add @backstage-community/plugin-announcements
yarn --cwd packages/backend add @backstage-community/plugin-announcements-backend
```

```tsx
// packages/app/src/App.tsx
import { AnnouncementsPage } from '@backstage-community/plugin-announcements';

const AppRoutes = () => (
  <FlatRoutes>
    <Route
      path="/announcements"
      element={
        <AnnouncementsPage
          cardOptions={{ titleLength: 50 }}
          markdownRenderer="backstage"
        />
      }
    />
  </FlatRoutes>
);
```

```yaml
# app-config.yaml - New Frontend System configuration
app:
  extensions:
    - entity-card:announcements/announcements:
        config:
          filter: kind:component,system,group,api
    - nav-item:announcements
    - page:announcements:
        config:
          title: Company Announcements
          hideStartAt: true
          markdownRenderer: md-editor
    - announcements/banner:
        config:
          variant: floating
          max: 2
          category: updates
          active: true
          tags: ['security', 'platform']
```

```ts
// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();
backend.add(import('@backstage-community/plugin-announcements-backend'));
backend.start();
```

## New Frontend System Plugin Registration

Register community plugins using Backstage's new frontend system with automatic feature discovery.

```tsx
// packages/app/src/App.tsx
import { createApp } from '@backstage/frontend-defaults';
import githubActionsPlugin from '@backstage-community/plugin-github-actions/alpha';
import jenkinsPlugin from '@backstage-community/plugin-jenkins/alpha';
import sonarqubePlugin from '@backstage-community/plugin-sonarqube/alpha';
import announcementsPlugin from '@backstage-community/plugin-announcements/alpha';

export const app = createApp({
  features: [
    // Core features
    catalogPlugin,
    searchPlugin,

    // Community plugins
    githubActionsPlugin,
    jenkinsPlugin,
    sonarqubePlugin,
    announcementsPlugin,
  ],
});

export default app.createRoot();
```

```tsx
// Custom API registration with new frontend system
import { ApiBlueprint, createApiFactory } from '@backstage/frontend-plugin-api';
import { techRadarApiRef } from '@backstage-community/plugin-tech-radar';
import { TechRadarClient } from './lib/TechRadarClient';

const techRadarApi = ApiBlueprint.make({
  name: 'techRadarApi',
  params: {
    factory: createApiFactory(techRadarApiRef, new TechRadarClient()),
  },
});

export const app = createApp({
  features: [
    createFrontendModule({
      pluginId: 'app',
      extensions: [techRadarApi],
    }),
  ],
});
```

## Building API Reports

Generate API documentation reports for plugins to ensure API compatibility and documentation.

```bash
# Navigate to workspace
cd workspaces/your-workspace

# Install dependencies
yarn install

# Build API reports for all plugins in workspace
yarn build:api-reports

# Build API report for specific plugin
yarn build:api-reports plugins/your-plugin

# Fix common package.json issues
yarn backstage-cli repo fix --publish

# Run type checking
yarn tsc

# Run tests
yarn test

# Start development server
yarn start
```

## Local Development Setup

Set up a complete local development environment with hot reloading for plugin development.

```bash
# Clone and setup
git clone https://github.com/backstage/community-plugins.git
cd community-plugins
yarn install

# Navigate to a workspace
cd workspaces/github
yarn install

# Start individual plugin in isolation (faster development)
cd plugins/github-actions
yarn start

# Or start full Backstage environment (if configured)
cd ../..
yarn dev

# Run workspace tests
yarn test

# Lint code
yarn lint

# Format code
yarn prettier:fix
```

```ts
// plugins/your-plugin/dev/index.tsx - Frontend plugin dev setup
import { createDevApp } from '@backstage/dev-utils';
import { yourPlugin, YourPluginPage } from '../src';

createDevApp()
  .registerPlugin(yourPlugin)
  .addPage({
    element: <YourPluginPage />,
    title: 'Your Plugin',
    path: '/your-plugin',
  })
  .render();
```

```ts
// plugins/your-plugin-backend/dev/index.ts - Backend plugin dev setup
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();
backend.add(import('../src'));
backend.start();
```

## Summary

Backstage Community Plugins provides a comprehensive ecosystem of over 200 plugins covering CI/CD integrations (GitHub Actions, Jenkins, Argo CD, Tekton), code quality tools (SonarQube, Code Coverage), cloud services (Azure, GCP, AWS), observability platforms (Grafana, Splunk, New Relic), identity providers (Keycloak, PingIdentity), and many specialized tools. Each plugin follows consistent patterns: frontend plugins export React components and availability checks, backend plugins provide API endpoints and catalog providers, and common packages share types and utilities between frontend and backend.

The repository supports both legacy and new Backstage frontend systems, with plugins progressively adding `/alpha` exports for the new system. Plugin development follows established workflows with changesets for versioning, API reports for documentation, and CODEOWNERS for governance. Integration typically involves installing npm packages, adding components to EntityPage layouts, configuring app-config.yaml for backend settings, and annotating catalog entities with plugin-specific annotations to enable features. The modular architecture allows organizations to adopt only the plugins they need while benefiting from community maintenance and standardized release processes.