Backstage Codescene Plugin

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Installation steps

Install the plugin into Backstage

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

Import it into your Backstage application

// packages/app/src/components/home/Homepage.tsx

import {
  CloudsmithStatsCard,
  CloudsmithQuotaCard,
  CloudsmithRepositoryAuditLogCard,
  CloudsmithRepositorySecurityCard,
  } from '@roadiehq/backstage-plugin-cloudsmith';

Add the proxy to your app-config.

proxy:
  '/codescene-api':
    target: '<INSTANCE_HOSTNAME>/api/v1'
    allowedMethods: ['GET']
    allowedHeaders: ['Authorization']
    headers:
      Authorization: Basic ${CODESCENE_AUTH_CREDENTIALS}
codescene:
  baseUrl: https://codescene.my-company.net # replace with your own URL

Add codescene routes and pages to your App.tsx.

import {
  CodeScenePage,
  CodeSceneProjectDetailsPage,
} from '@backstage-community/plugin-codescene';

...

<Route path="/codescene" element={<CodeScenePage />} />
<Route
    path="/codescene/:projectId"
    element={<CodeSceneProjectDetailsPage />}
/>

Add a codescene sidebar item (optional).

// In packages/app/src/components/Root/Root.tsx
import { CodeSceneIcon } from '@backstage-community/plugin-codescene';

{
  /* other sidebar items... */
}
<SidebarItem icon={CodeSceneIcon} to="codescene" text="CodeScene" />;

Add codescene CodeSceneEntityKPICard and CodeSceneEntityFileSummary to your entity page.

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  CodeSceneEntityPage,
  CodeSceneEntityFileSummary,
  isCodeSceneAvailable,
} from '@backstage-community/plugin-codescene';

/* other EntityLayout.Route items... */

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

Annotate relevant catalog-info.yaml files with codescene annotations.

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  annotations:
    codescene.io/project-id: <codescene-project-id>

Found a mistake? Update these instructions.

Things to know

Useful Links

GitHub

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo