Components to display code quality metrics from SonarCloud and SonarQube.
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]
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.