Backstage Argo CD Plugin

See Argo CD status in Backstage

Created by Roadie

Getting started is simple

Don't want to spend your time installing and upgrading Backstage plugins? Get managed Backstage from Roadie.

Installation steps

Install the plugin into Backstage.

yarn add @roadiehq/backstage-plugin-argo-cd

Add proxy config to the app-config.yaml file

    target: https://<your-argocd-instance>/api/v1/
    changeOrigin: true
    # only if your argocd api has self-signed cert
    secure: false
        $env: ARGOCD_AUTH_TOKEN

Add plugin to the list of plugins

// packages/app/src/plugins.ts
export { argocdPlugin } from '@roadiehq/backstage-plugin-argo-cd';

Add argoCD widget to your overview page

// packages/app/src/components/catalog/EntityPage.tsx
import {
} from '@roadiehq/backstage-plugin-argo-cd';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
      <EntitySwitch.Case if={e => Boolean(isArgocdAvailable(e))}>
        <Grid item sm={4}>
          <EntityArgoCDOverviewCard />

Add annotation to the yaml config file of a component

    argocd/app-name: <your-app-name>

Get and provide ARGOCD_AUTH_TOKEN as env variable in following format


Found a mistake? Update these instructions.

How it looks

A preview of Argo CD overview widget including kubernetes pod status.

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.

We will never sell or share your email address.