npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@redhat-developer/plugin-scaffolder-frontend-module-devfile-field

v0.20.0

Published

Devfile Custom Field Extensions (Frontend Plugin)

Downloads

94

Readme

devfile-field-extension

This plugin is a Custom Field Extension for Backstage. It allows you to add a set of drop-down lists to pick a Devfile Stack version, a version, and a starter project. It interacts with the configured Devfile registry to load the list of available Devfile Stacks.

Preview

Devfile Custom Field Extension Preview

Installation

From your Backstage instance root folder:

yarn add --cwd packages/app @redhat-developer/plugin-scaffolder-frontend-module-devfile-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 { DevfileSelectorFieldExtension } from '@redhat-developer/plugin-scaffolder-frontend-module-devfile-field';
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
  1. 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>
    <DevfileSelectorFieldExtension />
  </ScaffolderFieldExtensions>
</Route>
  1. This custom field extension populates the dropdown lists from a Devfile Registry, which is expected to be proxied by Backstage at the following path: /devfile-registry. 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:
  endpoints:
    '/devfile-registry':
      target: 'https://registry.devfile.io'

You should now see the custom field DevfileSelectorExtension 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:

  • devfile: the Devfile Stack selected by the user.
  • version: the Devfile Stack version selected by the user
  • starter_project: the Devfile Starter Project selected by the user. Optional.
parameters:
    - title: Provide details about the Devfile
      required:
        - devfile_data
      properties:
        devfile_data:
          type: object
          required:
            - devfile
            - version
          properties:
            devfile:
              type: string
            version:
              type: string
            starter_project:
              type: string
          ui:field: DevfileSelectorExtension
          ui:autofocus: true
          ui:options:
            rows: 5

See https://github.com/ododev/odo-backstage-software-template for an example of a Software Template making use of the Devfile Selector Field Extension.