Port Backstage Plugin

The Port Backstage plugin allows you to use one plugin for all your data sources into your Backstage instance.

No more wrestling with endless plugin setups, constant upgrades, and cluttered dashboards that slow you as a portal builder and your developers down.

Note

This is designed to enhance your Backstage setup, helping you build a better portal more efficiently—not to replace your existing Backstage plugins or Backstage itself.

---

Documentation

Please refer to our docs for installation, usage, customization and tips.

Screenshots

1. Service view - Added scorecards, actions, and information from integrations.

2. Scorecards view

---

With Port's data modeling, you can shape and trim data to focus only on what matters.

Model your data in Port

Integrate your portal with data sources like Jira, PagerDuty, Snyk, AWS, and more in minutes, not months.

Integrate in minutes, not months

Backstage plugin development often lags behind the needs of modern teams, turning what should be a powerful portal into a messy data dump. Port's plugin changes that by letting you manage everything through a single, flexible plugin. Cutting setup and build time from months to days.

For up to 15 users you can use the free open source version of the plugin and create an account in Port.

For more than 15 users you need to get a license from Port.

Getting Started

Warning

The Port Backstage plugins are currently in beta and may not be fully stable. Please report any issues or suggestions through our GitHub repository.

1. Create a Port Account

   • Visit Port's website to create your free account
   • Follow the onboarding process to set up your organization
   • For up to 15 users, you can use the free version.

2. Configure Port Credentials

   • In Port, on the top right, click on the three dots and select Credentials
   • Generate API credentials (Client ID and Client Secret)
   • Add these credentials to your Backstage's app-config.yaml:

     port:
       api:
         baseUrl: https://api.getport.io/
         auth:
           clientId: YOUR_CLIENT_ID
           clientSecret: YOUR_CLIENT_SECRET

   • Find your Port credentials

3. Install the Backend and Frontend Plugins

   Install both plugins using yarn:

   # Install backend plugin
   yarn --cwd packages/backend add @port-labs/backstage-plugin-framework-backend
   
   # Install frontend plugin
   yarn --cwd packages/app add @port-labs/backstage-plugin-framework

   Then register the backend plugin in packages/backend/src/index.ts:

   backend.add(import("@port-labs/backstage-plugin-framework-backend"));

   Finally, add components as you like from the frontend plugin to your Backstage instance.

   For example, let's add the Scorecard component to the NavBar:

   in the file: packages/app/src/App.tsx, add the route:

   <Route path="/scorecards" element={<ScorecardsPage />} />

   and then add the link to the NavBar, in the file: packages/app/src/components/Root/Root.tsx:

   <SidebarItem icon={DoneAllIcon} to="scorecards" text="Scorecards" />

   

4. Explore Port's API Integration

   • Review the frontend plugin documentation for examples
   • Use Port's API to fetch and display data in your Backstage instance
   • Leverage Port's data models to customize your views
   • Check out our API documentation for more details

Repository Structure

The repo is organized into two main packages:

1. backend-plugin: Contains the backend implementation of the Port Backstage plugin.
2. frontend-plugin: Contains the frontend inspiration for what you can build with the Port Backstage plugin, but you can and should build your own components.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository or contact Port Labs support.