scaffolder-frontend-module-deploy-app-field

Welcome to the scaffolder-frontend-module-deploy-app-field plugin!

This plugin is a Custom Field Extension for Backstage. It allows you to add a set of drop-down lists to pick a Application already available in deploy. It interacts with the configured Deploy Host to load the list of available Application from Deploy.

Preview

Installation

From your Backstage instance root folder:

yarn add --cwd packages/app @digital-ai/plugin-scaffolder-frontend-module-deploy-app-field

Configuration

1. Add the import to your packages/app/src/App.tsx on the frontend package of your Backstage instance:

// packages/app/src/App.tsx

import { DeployApplicationSelectorFieldExtension } from '@digital-ai/plugin-scaffolder-frontend-module-deploy-app-field';
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';

2. Then add the imported field extension as a child of ScaffolderFieldExtensions inside Route, like so:

// packages/app/src/App.tsx

<Route path="/create" element={<ScaffolderPage />}>
  <ScaffolderFieldExtensions>
    <DeployApplicationSelectorFieldExtension />
  </ScaffolderFieldExtensions>
</Route>

3. This custom field extension populates the dropdown list with applications from XL-Deploy, which is expected to be proxied by Backstage at the following path: /deploy-app. As such, you need to add the appropriate configuration to your app-config.yaml file under the proxy.endpoints field, like so:

# app-config.yaml

proxy:
  /deploy-app:
    target: http://localhost:4516/
    changeOrigin: true
    headers:
      Authorization: Basic YWRtaW46YWRtaW4=

You should now see the custom field DeployApplicationSelectorFieldExtension and its dropdown lists populated if you navigate to the Template Editor page at http://localhost:3000/create/edit.

Usage

To use the extension in a Backstage Software Template, you can add the ui:field field to the parameter. The output of the extension is an object made up of the following fields:

• deployApplication: the Application name selected by the user.

  parameters:
    - title:  Select Deploy Application
      required:
        - deploy
      properties:
        deploy:
          type: object
          properties:
            deployApplication:
              type: string
          ui:field: DeployApplicationeSelectorExtension
          ui:autofocus: true