A Backstage plugin that integrates with Hetzner Cloud to provide insight into your cloud infrastructure. It offers an intuitive interface for visualizing Hetzner Cloud resources such as virtual machines, volumes, and primary IPs, all accessible directly within your Backstage environment.

• Backstage Hetzner Plugin
  • Table of Contents
  • Features
  • Installation
    • 1. Frontend Plugin
    • 2. Backend Plugin
    • 3. Catalog Backend Module Plugin
  • Configuration
    • Frontend Configuration
    • Backend Configuration
    • Catalog Backend Module Configuration
  • Usage
  • Development
    • Getting Started
    • Backend Development
    • Frontend Development
    • Running Tests
  • Contributing
  • License
    • Attribution

The Hetzner Cloud to Backstage plugin needs to give a comprehensive insight into the Hetzner cloud platform. There are two views that provide information:

• Index Page: Gives an overview of the Hetzner Cloud Platform in general.

  

• Resource Card: Gives details about which resources are used and what runs where. This view is available in a tab in each component that uses Hetzner's resources.

  

To get started, install all required plugins for a complete Hetzner Cloud integration in Backstage:

Install the Hetzner Cloud frontend plugin in your Backstage app:

# From the Backstage root directory
yarn --cwd packages/app add @gluo-nv/backstage-plugin-hetzner

For more details, see the frontend plugin documentation.

Install the Hetzner Cloud backend plugin to enable API integration:

# From the Backstage root directory
yarn --cwd packages/backend add @gluo-nv/backstage-plugin-hetzner-backend

For more details, see the backend plugin documentation.

Install the Hetzner Cloud catalog backend module to sync Hetzner resources into the Backstage catalog:

# From the Backstage root directory
yarn --cwd packages/backend add @gluo-nv/backstage-plugin-catalog-backend-module-hetzner

For more details, see the catalog backend module documentation.

Add the following to the app-config.yaml to configure the frontend plugin:

app:
  hetzner:
    project:
      title: <Hetzner project title>
      owner: <Hetzner project owner>
      lifecycle: <Hetzner project lifecycle>

1. Add the plugin to the Backstage application by modifying the packages/app/src/App.tsx:

import { HetznerPage } from '@gluo-nv/backstage-plugin-hetzner';

Add the Hetzner Cloud page to the sidebar

const routes = (
  <FlatRoutes>
    {/* ...other routes*/}
    <Route path="/hetzner" element={<HetznerPage />} />
  </FlatRoutes>
);

2. ``packages/app/src/components/Root/Root.tsx`

Add the icon import:

import Cloud from '@material-ui/icons/Cloud';

3. Then add this line just before the </SidebarGroup> line:

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      {/*...*/}
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        {/*...other sidebar items*/}
        <SidebarItem icon={Cloud} to="hetzner" text="Hetzner Cloud" />
        {/* End global nav */}
        <SidebarDivider />
        {/*...*/}
      </SidebarGroup>
      {/*...*/}
    </Sidebar>
    {children}
  </SidebarPage>
);

4. Add the Hetzner Resources Card to the entity overview page

Add a new file utils.tsx in packages/app/src/components/catalog:

import { Entity } from '@backstage/catalog-model';

export const isHetznerResource = (entity: Entity): boolean => {
  const hetznerData = entity.metadata.annotations?.['hetzner.com/data'];
  try {
    return hetznerData !== undefined && JSON.parse(hetznerData) !== null;
  } catch (e) {
    return false;
  }
};

Add the Resources Card in packages/app/src/components/catalog/EntityPage.tsx

import { EntityHetznerContent } from '@gluo-nv/backstage-plugin-hetzner';
import { isHetznerResource } from './utils';

// Add to the overview content:
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    <Grid item md={6}>
      <EntityAboutCard variant="gridItem" />
    </Grid>
    <Grid item md={6} xs={12}>
      <EntityCatalogGraphCard variant="gridItem" height={400} />
    </Grid>

    {/* Hetzner Cloud Plugin */}
    <EntitySwitch>
      <EntitySwitch.Case
        if={entity => isKind('resource')(entity) && isHetznerResource(entity)}
      >
        <Grid item md={6}>
          <EntityHetznerContent />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    {/* Hetzner Cloud Plugin */}

    {/*...*/}
  </Grid>
);

Add the following to the app-config.yaml to configure the backend plugin:

backend:
  hetzner:
    token: ${HCLOUD_TOKEN}

Add the plugin to the backend in packages/backend/src/index.ts:

backend.add(import('@gluo-nv/backstage-plugin-hetzner-backend'));

Add the plugin to the backend in packages/backend/src/index.ts:

backend.add(import('@gluo-nv/backstage-plugin-catalog-backend-module-hetzner'));

Once installed and configured, you can:

1. View an overview of the Hetzner Cloud infrastructure directly in Backstage
2. Inspect details of Hetzner resources (servers, volumes, primary IPs)
3. Navigate and filter Hetzner resources as part of the Backstage catalog experience

1. Clone the repository
2. Install dependencies:

yarn install

To start the backend plugin in development mode:

# From the backend plugin directory
yarn start

This starts the backend in standalone mode on http://localhost:7007.

To run the frontend plugin in isolation:

# From the frontend plugin directory
yarn start

yarn test

We welcome contributions to improve this plugin! If you’d like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for the feature or bug fix.
3. Submit a pull request with a clear description of the changes.

For major changes, please open an issue first to discuss the ideas.

This plugin is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).

This plugin was created by Gluo NV.
Any use or distribution must include proper attribution to the original author.