The SonarQube Plugin displays code statistics from SonarCloud or SonarQube.
- Install the SonarQube Plugin:
# From your Backstage root directory
yarn --cwd packages/app add @backstage-community/plugin-sonarqube
- Add the
EntitySonarQubeCard
to the EntityPage:
// packages/app/src/components/catalog/EntityPage.tsx
+ import { EntitySonarQubeCard } from '@backstage-community/plugin-sonarqube';
...
const overviewContent = (
<Grid container spacing={3} alignItems="stretch">
<Grid item md={6}>
<EntityAboutCard variant="gridItem" />
</Grid>
+ <Grid item md={6}>
+ <EntitySonarQubeCard variant="gridItem" />
+ </Grid>
</Grid>
);
- Run the following commands in the root folder of the project to install and compile the changes.
yarn install
yarn tsc
- Add the
sonarqube.org/project-key
annotation to thecatalog-info.yaml
file of the target repo for which code quality analysis is needed.
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: backstage
description: |
Backstage is an open-source developer portal that puts the developer experience first.
annotations:
sonarqube.org/project-key: YOUR_INSTANCE_NAME/YOUR_PROJECT_KEY
spec:
type: library
owner: CNCF
lifecycle: experimental
YOUR_INSTANCE_NAME/
is optional and will query the default instance if not provided.