Backstage Flux Plugin

Set up Backstage in minutes with Roadie

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

Installation steps

The base configuration for the Flux plugin is handled by the Kubernetes plugins, namely @backstage/plugin-kubernetes and @backstage/plugin-kubernetes-backend. Both need to be installed and configured by following the installation and configuration guides for those plugins. After installation make sure to import the frontend for the Kubernetes plugin. Further details on configuration options can be found on the Flux plugin github page.

// In packages/app/src/components/catalog/EntityPage.tsx
import { EntityKubernetesContent } from '@backstage/plugin-kubernetes';

// You can add the tab to any number of pages, the service page is shown as an example here
const serviceEntityPage = (
  <EntityLayout>
    {/* other tabs... */}
    <EntityLayout.Route path="/kubernetes" title="Kubernetes">
      <EntityKubernetesContent refreshIntervalMs={30000} />
    </EntityLayout.Route>
  </EntityLayout>
);

Install the Flux plugin into Backstage.

yarn add --cwd packages/app @weaveworksoss/backstage-plugin-flux

Install the Flux plugin into Backstage.

yarn add --cwd packages/app @weaveworksoss/backstage-plugin-flux

In addition, the Flux plugin also needs additional permissions to be able to query the correct resources from within the Kubernetes cluster. A view role

rules:
- apiGroups:
    - notification.toolkit.fluxcd.io
    - source.toolkit.fluxcd.io
    - helm.toolkit.fluxcd.io
    - image.toolkit.fluxcd.io
    - kustomize.toolkit.fluxcd.io
  resources:
    - "*"
  verbs:
    - get
    - list
    - watch

Add the EntityFluxHelmReleasesCard to the EntityPage.

// In packages/app/src/components/catalog/EntityPage.tsx
import { EntityFluxHelmReleasesCard } from '@weaveworksoss/backstage-plugin-flux';

// You can add the tab to any number of pages, the service page is shown as an
// example here
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    // ...
    <Grid item md={4} xs={12}>
      <EntityFluxHelmReleasesCard />
    </Grid>
    // ...
  </Grid>
);

Add props to override default values (optional).

// Additionally, props can be passed into the card to override card defaults.
<Grid item md={4} xs={12}>
  <EntityFluxHelmReleasesCard many={false} />
</Grid>

Add a page to your entity pages.

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityFluxHelmReleasesCard,
  EntityFluxGitRepositoriesCard,
  EntityFluxOCIRepositoriesCard,
  EntityFluxHelmRepositoriesCard,
} from '@weaveworksoss/backstage-plugin-flux';

const serviceEntityPage = (
  <EntityLayout>
    // ...
    <Grid container spacing={3} alignItems="stretch">
      <Grid item md={12}>
        <EntityFluxHelmReleasesCard />
      </Grid>
      <Grid item md={12}>
        <EntityFluxHelmRepositoriesCard />
      </Grid>
      <Grid item md={12}>
        <EntityFluxGitRepositoriesCard />
      </Grid>
      <Grid item md={12}>
        <EntityFluxOCIRepositoriesCard />
      </Grid>
    </Grid>
    // ...
  </EntityLayout>
);

Include kubernetes-id values.

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: carts-service
  description: A microservices-demo service that provides shopping carts for users
  tags:
    - java
  annotations:
    backstage.io/kubernetes-id: carts-service
spec:
  type: service
  lifecycle: production
  owner: sockshop-team
  system: carts

Then label your Flux HelmRelease.

apiVersion: helm.toolkit.fluxcd.io/v2beta1
kind: HelmRelease
metadata:
  name: carts-nginx
  namespace: carts
  labels:
    backstage.io/kubernetes-id: carts-service
spec:
  chart:
    spec:
      chart: nginx
      reconcileStrategy: ChartVersion
      sourceRef:
        kind: HelmRepository
        name: podinfo
  interval: 1m0s

Found a mistake? Update these instructions.

Things to know

Useful links

GitHub repo

Set up Backstage in minutes with Roadie

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

I want to go faster