Demo Community Plugins

In this guide, you’ll learn how to discover and add Community Plugins—like GitHub Actions, Dynatrace, and Copilot—to your Backstage instance. We’ll cover browsing the plugin catalog, configuring a proxy for secure tokens, and setting up GitHub Actions in Backstage.

1. Discovering Community Plugins

1. Open your Backstage website and navigate to Plugins.
2. Browse or search for “GitHub Actions” and click Explore. You’ll land on the Backstage community-plugins GitHub repository:

This repo hosts all vetted Community Plugins: GitHub Actions, FireHydrant, Dynatrace, Copilot, and more.

2. Understanding Plugin Structure

Plugins may include only a frontend, only a backend, or both. Check the plugins/ folder:

3. Example: Securing Dynatrace with a Backend Proxy

The Dynatrace plugin provides a UI only. To avoid exposing your API token in the browser, configure a proxy in app-config.yaml:

# app-config.yaml
proxy:
  endpoints:
    '/dynatrace/':
      target: 'https://example.dynatrace.com/api/v2'
      headers:
        Authorization: 'Api-Token ${DYNATRACE_ACCESS_TOKEN}'

dynatrace:
  baseUrl: 'https://example.dynatrace.com'

4. Integrating the GitHub Actions Plugin

Follow these steps to add GitHub Actions support:

1. Install the frontend plugin:

   # From your Backstage root directory
   yarn --cwd packages/app add @backstage-community/plugin-github-actions
   

2. Install the GitHub auth provider on the backend:

   yarn --cwd packages/backend add @backstage/plugin-auth-backend-module-github-provider
   

3. Register the auth module in packages/backend/src/index.ts:

   // packages/backend/src/index.ts
   backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));
   

4. Restart your services:

   yarn --cwd packages/backend start
   yarn --cwd packages/app start
   

5. Browsing the Software Catalog

1. Open Software Catalog in your Backstage UI:

   

2. Select a component, for example my-demo-app, to view its overview:

   

6. Verifying Your GitHub Setup

1. Confirm your repo has GitHub Actions workflows under .github/workflows:

   

2. View your workflow runs for confirmation:

   

7. Configuring GitHub OAuth in Backstage

1. Register a new OAuth App in GitHub:

   • Settings → Developer settings → OAuth Apps → New OAuth App
   • Homepage URL: Your Backstage URL
   • Authorization callback URL: http://<HOST>:7007/api/auth/github/handler/frame

   

2. Copy the Client ID and Client Secret:

   

3. Add them to app-config.yaml:

   # app-config.yaml
   auth:
     providers:
       github:
         development:
           clientId: ${AUTH_GITHUB_CLIENT_ID}
           clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}
   

8. Annotating Your Component for CI/CD

In your catalog-info.yaml for my-demo-app, annotate with the GitHub project slug:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-demo-app
  annotations:
    github.com/project-slug: 'your-org-or-user/my-demo-app'
spec:
  type: service
  owner: user:default/guest
  lifecycle: experimental

Commit and refresh the component in Backstage:

9. Viewing CI/CD in Backstage

1. Click the CI/CD tab and sign in via GitHub.

2. You’ll see your workflow runs:

   

3. Select any run for detailed logs:

   

   

Key Takeaways

• Community Plugins come in three flavors:
  • Frontend only
  • Backend only
  • Both frontend and backend
• To add a frontend plugin:

  yarn --cwd packages/app add <plugin-package-name>
  

• To add a backend plugin:

  yarn --cwd packages/backend add <plugin-package-name>
  backend.add(import('<plugin-package-name>'));
  

• Plugin UI components can render as:
  • Entire pages
    
  • Tabs
  • Cards
    
  • Dedicated sections
    

With this setup, developers gain a unified CI/CD and DevOps dashboard—no more context switching!

Links and References

• Backstage Documentation
• GitHub Actions Docs
• Backstage Community Plugins