Backstage Coder Plugin

yarn --cwd packages/app add @coder/backstage-plugin-coder

proxy:
  endpoints:
    '/coder':
      # Replace with your Coder deployment access URL (add a trailing slash)
      target: 'https://coder.example.com/'

      changeOrigin: true
      allowedMethods: ['GET'] # Additional methods will be supported soon!
      allowedHeaders: ['Authorization', 'Coder-Session-Token']
      headers:
        X-Custom-Source: backstage

// packages/app/src/App.tsx

import {
  type CoderAppConfig,
  CoderProvider,
} from '@coder/backstage-plugin-coder';

const appConfig: CoderAppConfig = {
  deployment: {
    accessUrl: 'https://coder.example.com',
  },

  // Set the default template (and parameters) for
  // catalog items. Individual properties can be overridden
  // by a repo's catalog-info.yaml file
  workspaces: {
    defaultTemplateName: 'devcontainers',
    defaultMode: 'manual',

    // This property defines which parameters in your Coder
    // workspace templates are used to store repository links
    repoUrlParamKeys: ['custom_repo', 'repo_url'],

    params: {
      repo: 'custom',
      region: 'eu-helsinki',
    },
  },
};

// ...

export default app.createRoot(
  <CoderProvider appConfig={appConfig}>
    <AlertDisplay />
    <OAuthRequestDialog />
    <AppRouter>
      <Root>{routes}</Root>
    </AppRouter>
  </CoderProvider>,
);

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

import { CoderWorkspacesCard } from '@coder/backstage-plugin-coder';

// We recommend placing the component inside of overviewContent
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    <Grid item md={6}>
      <EntityAboutCard variant="gridItem" />
    </Grid>

    {/* Coder component should go inside Grid to help it work with MUI layouts */}
    <Grid item md={6} xs={12}>
      <CoderWorkspacesCard readEntityData />
    </Grid>

    {/* Other elements for overviewContent go here */}
  </Grid>
);

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: python-project
spec:
  type: other
  lifecycle: unknown
  owner: pms

  # Properties for the Coder plugin are placed here
  coder:
    templateName: 'devcontainers'
    mode: 'auto'
    params:
      repo: 'custom'
      region: 'us-pittsburgh'