Backstage Container Image Registry for Quay Plugin

Install the frontend plugin

1. Add the Quay plugin to the app workspace

   Copy

   yarn workspace app add @backstage-community/plugin-quay

2. Add the Quay tab to the service entity page

   Edit packages/app/src/components/catalog/EntityPage.tsx

   Copy

   import { isQuayAvailable, QuayPage } from '@backstage-community/plugin-quay';
   import { EntityLayout } from '@backstage/plugin-catalog';
   // other imports
   
   const serviceEntityPage = (
     <EntityLayout>
       {/* other routes */}
       <EntityLayout.Route if={isQuayAvailable} path="/quay" title="Quay">
         <QuayPage />
       </EntityLayout.Route>
     </EntityLayout>
   );

Configure the proxy

1. Point the Backstage proxy to your Quay instance

   Edit app-config.yaml

   Copy

   proxy:
     endpoints:
       '/quay/api':
         target: 'https://quay.io'
         credentials: require
         headers:
           X-Requested-With: 'XMLHttpRequest'
           # Authorization: 'Bearer <YOUR TOKEN>'
         changeOrigin: true
         secure: true
   
   quay:
     uiUrl: 'https://quay.io'

   The Authorization header is optional. Use it if you need to access a private Quay repository with a token.

Annotate your entities

1. Add the Quay repository slug to each entity that should show the Quay tab

   Example catalog-info.yaml

   Copy

   apiVersion: backstage.io/v1alpha1
   kind: Component
   metadata:
     name: my-service
     annotations:
       quay.io/repository-slug: my-org-or-user/my-repository
   spec:
     type: service
     owner: my-team
     lifecycle: production

Where the UI shows up

1. Open any service entity page that has the annotation
2. Use the Quay tab to view image tags and security scan details

Backend plugin option

If you need permissions or extra server features, use the Quay backend plugin instead of the proxy. The frontend steps above stay the same. Replace the proxy setup with the backend plugin. Follow the backend plugin documentation for its package name, install command, config, and router wiring.

New backend system or old backend system

You can use the proxy setup with either backend system. No backend code changes are needed when you use the proxy. If you switch to the backend plugin later, follow its documentation for both the new backend system and the old backend system wiring.