CodeScene logo

Backstage CodeScene Plugin

Created by Codescene

CodeScene helps you understand how your code evolves in real life. It connects code with people and product goals. It spots risk hot spots and patterns in change. It gives you a practical way to focus refactoring work and reduce technical debt.

The CodeScene Backstage plugin brings those insights into your developer portal. It adds a page that lists the projects in your CodeScene instance with their latest analysis. You can open a project to see details. You can surface key metrics on each service page with cards for KPIs and file level summaries. That means engineers can check code health as part of their normal workflow. The plugin was introduced by the Backstage community as a way to view CodeScene data inside Backstage.

Typical use cases fit everyday work. Track hot spots across services during planning. Review risky files before a release. Watch trends in code health over time to guide cleanup. Bring shared visibility to teams and tech leads without leaving Backstage. If your org already runs CodeScene, the plugin lets you use that investment where engineers spend time.

Installation Instructions

These instructions apply to self-hosted Backstage only. To use this plugin on Roadie, visit the docs.

Install the package

Copy
yarn --cwd packages/app add @backstage-community/plugin-codescene

Add top level routes

Edit packages/app/src/App.tsx. Import the pages. Add two routes.

Copy
// packages/app/src/App.tsx
import React from 'react';
import { Route } from 'react-router-dom';
import {
  CodeScenePage,
  CodeSceneProjectDetailsPage,
} from '@backstage-community/plugin-codescene';

// inside your Routes block
<Route path="/codescene" element={<CodeScenePage />} />
<Route path="/codescene/:projectId" element={<CodeSceneProjectDetailsPage />} />

Edit packages/app/src/components/Root/Root.tsx. Import the icon. Add a sidebar item that points to the new page.

Copy
// packages/app/src/components/Root/Root.tsx
import React from 'react';
import { SidebarItem } from '@backstage/core-components';
import { CodeSceneIcon } from '@backstage-community/plugin-codescene';

// inside your Sidebar group
<SidebarItem icon={CodeSceneIcon} to="codescene" text="CodeScene" />

Configure the proxy

Add a proxy route in app-config.yaml. The UI calls this path. The backend proxy forwards it to your CodeScene instance.

Copy
# app-config.yaml
proxy:
  '/codescene-api':
    target: '<INSTANCE_HOSTNAME>/api/v1'
    allowedMethods: ['GET']
    allowedHeaders: ['Authorization']
    headers:
      Authorization: Basic ${CODESCENE_AUTH_CREDENTIALS}

Set CODESCENE_AUTH_CREDENTIALS in your runtime environment. Use a value that matches your CodeScene auth policy.

Configure the CodeScene base URL

Add the base URL so the plugin can link out to CodeScene.

Copy
# app-config.yaml
codescene:
  baseUrl: https://codescene.my-company.net

Annotate catalog entities

Add the project id to each entity that should show CodeScene data.

Copy
# catalog-info.yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  annotations:
    codescene.io/project-id: <codescene-project-id>
spec:
  type: service
  owner: team-a
  lifecycle: production

Add CodeScene cards to the Entity page

Edit packages/app/src/components/catalog/EntityPage.tsx. Import the components. Add a new Entity tab with two cards.

Copy
// packages/app/src/components/catalog/EntityPage.tsx
import React from 'react';
import Grid from '@material-ui/core/Grid';
import { EntityLayout } from '@backstage/plugin-catalog';
import {
  CodeSceneEntityKPICard,
  CodeSceneEntityFileSummary,
  isCodeSceneAvailable,
} from '@backstage-community/plugin-codescene';

// inside your EntityLayout
<EntityLayout.Route path="/codescene" title="CodeScene" if={isCodeSceneAvailable}>
  <Grid container spacing={3} alignItems="stretch">
    <Grid item md={6} xs={12}>
      <CodeSceneEntityKPICard />
    </Grid>
    <Grid item md={6} xs={12}>
      <CodeSceneEntityFileSummary />
    </Grid>
  </Grid>
</EntityLayout.Route>

Changelog

This changelog is produced from commits made to the CodeScene plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Maintenance

  • Remove unused dev dependency canvas PR 3565 merged 5 months ago
  • Clean up knip reports to reduce false positives. Update Backstage repo tools to 0.13.0. Use a single workspace based config PR 3018 merged 6 months ago

Set up Backstage in minutes with Roadie