Roadie

Backstage SonarQube and SonarCloud Plugin

Components to display code quality metrics from SonarCloud and SonarQube.

Getting started is simple

Install the plugin into Backstage.

yarn add @backstage/plugin-sonarqube

Add plugin to the list of plugins.

// packages/app/src/plugins.ts
export { plugin as SonarQube } from '@backstage/plugin-sonarqube';

Add Widget API to your Backstage instance.

// packages/app/src/components/catalog/EntityPage.tsx
import { SonarQubeCard } from '@backstage/plugin-sonarqube';

  const OverviewContent = ({ entity }: { entity: Entity }) => (
    <Grid container spacing={3} alignItems="stretch">
      ...
      <Grid item md={6}>
        <SonarQubeCard  entity={entity} />
      </Grid>
      ...
    </Grid>
  );

Add the proxy config for SonarCloud

// app-config.yaml
proxy:
  '/sonarqube':
    target: https://sonarcloud.io/api
    allowedMethods: ['GET']
    headers:
      Authorization:
        # Content: 'Basic base64(":")' <-- note the trailing ':'
        # Example: Basic bXktYXBpLWtleTo=
        $env: SONARQUBE_AUTH_HEADER

Add the proxy config for SonarQube

proxy:
  '/sonarqube':
    target: https://your.sonarqube.instance.com/api
    allowedMethods: ['GET']
    headers:
      Authorization:
        # Content: 'Basic base64(":")' <-- note the trailing ':'
        # Example: Basic bXktYXBpLWtleTo=
        $env: SONARQUBE_AUTH_HEADER

sonarQube:
  baseUrl: https://your.sonarqube.instance.com

Add annotation to your component-info.yaml file.

metadata:
  annotations:
    sonarqube.org/project-key: [YOUR_PROJECT_KEY]

How it looks

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.