5.1 Introduction to Plugin usage

Plugins extend Backstage with new functionality, integrations, and visualizations.

In this chapter, you’ll learn how to discover, install, and configure existing plugins to enhance your developer portal.

Understanding the Plugin Ecosystem

Backstage has a rich ecosystem of plugins that fall into several categories:

  • Frontend Plugins: Add new pages and UI components to the Backstage interface
  • Backend Plugins: Provide APIs and backend services
  • Scaffolder Actions: Extend software templates with custom actions
  • Catalog Processors: Add custom logic for processing catalog entities

Task 5.1.1: Explore Available Plugins

Before installing plugins, let’s explore what’s available.

Visit the Backstage Plugin Marketplace:

  • Go to https://backstage.io/plugins
  • Browse categories like CI/CD, Monitoring, Cloud, Security, etc.
  • Note plugins that would be useful for your organization

Popular plugins include:

  • Kubernetes: View and manage Kubernetes resources
  • GitHub Actions: Monitor CI/CD pipelines
  • Gitlab CI/CD: Monitor CI/CD pipelines
  • TechDocs: Documentation platform
  • Grafana: Metrics and dashboards
  • ArgoCD: CD pipeline visualization

Task 5.1.2: Install your first plugin

Learn how to install plugins by using the Tech Radar plugin.

Step 1: Check Tech Radar plugin documentation

Visit the Backstage Plugin Marketplace again:

Some plugins live in the backstage/backstage repository but there are other locations for plugins like backstage/community-plugins or redhat-developer/rhdh-plugins .

Read the Purpose and Getting Started sections.

Step 1: Install the Tech Radar plugin

It is enough to install the NPM dependency.

Run the yarn command from your app root (my-backstage-app):

yarn --cwd packages/app add @backstage-community/plugin-tech-radar

When you start your Backstage application, the Tech Radar is integrated by menu Tech Radar and route: http://localhost:3000/tech-radar .

But it only shows some example data. This is because we only installed a Standalone plugin . They run completely in the browser and display only static data.

Step 2: Add the Tech Radar backend plugin

Data is not loaded inside a frontend plugin. Most frontend plugins have a corresponding backend plugin loading and providing the needed data.

This is also the case for the Tech Radar plugin.

Follow the plugin installation instructions and use the new backend system guidance.

Step 3: Configure the Tech Radar plugin

We prepared a sampleTechRadar.json file with following content:

Explore the Tech Radar definition
{
  "entries": [
    {
      "timeline": [
        {
          "moved": 0,
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
        }
      ],
      "key": "javascript",
      "id": "javascript",
      "title": "JavaScript",
      "quadrant": "languages",
      "links": [
        {
          "url": "https://www.javascript.com/",
          "title": "Learn more"
        },
        {
          "url": "https://www.typescriptlang.org/",
          "title": "TypeScript"
        }
      ],
      "description": "Excepteur **sint** occaecat *cupidatat* non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n```ts\nconst x = \"3\";\n```\n"
    },
    {
      "timeline": [
        {
          "moved": -1,
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z",
          "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
        }
      ],
      "key": "typescript",
      "id": "typescript",
      "title": "TypeScript",
      "quadrant": "languages",
      "description": "Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
    },
    {
      "timeline": [
        {
          "moved": 1,
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z",
          "description": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
        }
      ],
      "links": [
        {
          "url": "https://webpack.js.org/",
          "title": "Learn more"
        }
      ],
      "key": "webpack",
      "id": "webpack",
      "title": "Webpack",
      "quadrant": "frameworks"
    },
    {
      "timeline": [
        {
          "moved": 0,
          "ringId": "adopt",
          "date": "2025-06-06T00:00:00.000Z"
        }
      ],
      "links": [
        {
          "url": "https://backstage.io/",
          "title": "Backstage"
        }
      ],
      "key": "backstage",
      "id": "backstage",
      "title": "Backstage",
      "quadrant": "frameworks"
    },
    {
      "timeline": [
        {
          "moved": 0,
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z"
        }
      ],
      "links": [
        {
          "url": "https://reactjs.org/",
          "title": "Learn more"
        }
      ],
      "key": "react",
      "id": "react",
      "title": "React",
      "quadrant": "frameworks"
    },
    {
      "timeline": [
        {
          "moved": 0,
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z"
        }
      ],
      "key": "code-reviews",
      "id": "code-reviews",
      "title": "Code Reviews",
      "quadrant": "process"
    },
    {
      "timeline": [
        {
          "moved": 0,
          "ringId": "assess",
          "date": "2020-08-06T00:00:00.000Z"
        }
      ],
      "key": "mob-programming",
      "id": "mob-programming",
      "title": "Mob Programming",
      "quadrant": "process"
    },
    {
      "timeline": [
        {
          "moved": 0,
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z"
        }
      ],
      "key": "docs-like-code",
      "id": "docs-like-code",
      "title": "Docs-like-code",
      "quadrant": "process"
    },
    {
      "timeline": [
        {
          "ringId": "adopt",
          "date": "2020-08-06T00:00:00.000Z",
          "description": "long description"
        },
        {
          "ringId": "trial",
          "date": "2020-07-05T00:00:00.000Z",
          "description": "long description"
        }
      ],
      "links": [
        {
          "url": "https://github.com",
          "title": "Learn more"
        }
      ],
      "key": "github-actions",
      "id": "github-actions",
      "title": "GitHub Actions",
      "quadrant": "infrastructure"
    }
  ],
  "quadrants": [
    {
      "id": "infrastructure",
      "name": "Infrastructure"
    },
    {
      "id": "frameworks",
      "name": "Frameworks"
    },
    {
      "id": "languages",
      "name": "Languages"
    },
    {
      "id": "process",
      "name": "Process"
    }
  ],
  "rings": [
    {
      "id": "adopt",
      "name": "ADOPT",
      "color": "#5BA300",
      "description": "Adopt it."
    },
    {
      "id": "trial",
      "name": "TRIAL",
      "color": "#009EB0",
      "description": "Only for trial."
    },
    {
      "id": "assess",
      "name": "ASSESS",
      "color": "#C7BA00",
      "description": "Asses it."
    },
    {
      "id": "hold",
      "name": "HOLD",
      "color": "#E09B96",
      "description": "Not for new projects."
    }
  ]
}

Configure your Backstage app to use our Tech Radar configuration file. Extend your app-config.yaml file with the configuration for your new plugin:

techRadar:
  url: https://backstage-techlab.puzzle.ch/static/sampleTechRadar.json

Restart your Backstage app to see the changed content on your Tech Radar.

To enable reading from a host, it has to be allowed. Add the following configuration to the backend: section of your app-config.yaml:

backend:
  reading:
    allow:
      - host: backstage-techlab.puzzle.ch

After restarting Backstage, you should not get the error any more and see a Backstage entry in the Tech Radar.

Best Practices for Plugin Management

  1. Start with essential plugins: Don’t install everything at once
  2. Read documentation: Each plugin has specific configuration requirements
  3. Test in development: Always test plugins locally before production
  4. Monitor performance: Some plugins can impact load times
  5. Keep plugins updated: Regularly update to get bug fixes and features
  6. Use semantic versioning: Pin major versions to avoid breaking changes
  7. Configure authentication: Ensure plugins respect your auth setup
  8. Document customizations: Keep notes on configuration changes

Troubleshooting Common Plugin Issues

Plugin not appearing:

  • Check that you’ve added it to the correct Entity Page
  • Verify the component has required annotations
  • Check browser console for errors

Backend plugin errors:

  • Ensure backend plugin is registered in index.ts
  • Verify configuration in app-config.yaml
  • Check backend logs for detailed errors

Authentication issues:

  • Verify integration tokens are set correctly
  • Check token permissions/scopes
  • Ensure environment variables are loaded

Summary

In this chapter, you:

  • ✅ Explored the Backstage plugin ecosystem
  • ✅ Installed and configured the Tech Radar plugin
  • ✅ Got some Best Practice ant Troubleshooting hints

Plugins are what make Backstage adaptable to your organization’s needs. By carefully selecting and configuring plugins, you create a developer portal that truly reduces cognitive load and improves the developer experience.

Next Steps

Now that you’ve completed this lab, you could:

  1. Install more plugins: Do the Additional Labs where you need the GitHub Integration for interesting plugins.
  2. Customize the Look and Feel: Do the next lab and change the appearance of your Backstage App.
Last modified April 22, 2026: updated lab 5 (4dcc1a9)