We're hiring! Become a Backstage contributor

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

A screenshot of the SonarQube and SonarCloud plugin.

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.