Procedure

1. Create a directory for your workspace:

   $ mkdir rhdh-plugin-dev
   $ cd rhdh-plugin-dev

2. Initialize the Backstage application:

   $ npx @backstage/create-app@0.7.6 --path .

Procedure

1. In your Backstage application root folder, create a new plugin by using the yarn new command, for example:

   $ cd rhdh-plugin-dev
   $ yarn new

   Output from the yarn new command

   ? What do you want to create? (Use arrow keys)
   ❯ frontend-plugin - A new frontend plugin
     backend-plugin - A new backend plugin
     backend-plugin-module - A new backend module that extends an existing backend plugin
     plugin-web-library - A new web library plugin package
     plugin-node-library - A new Node.js library plugin package
     plugin-common-library - A new isomorphic common plugin package
     web-library - A library package, exporting shared functionality for web environments

2. Select the type of plugin to create, for example, frontend-plugin.

3. Enter the ID of the plugin, for example:

   ? What do you want to create? frontend-plugin - A new frontend plugin
   ? Enter the ID of the plugin [required] simple-example

4. (Optional) To preview your plugin with RHDH styling, configure the RHDH theme package in the plugin:

   $ cd plugins/simple-example
   $ yarn add --dev @red-hat-developer-hub/backstage-plugin-theme

   Update dev/index.tsx file, as follows, to use RHDH themes:

   // Import the RHDH themes from the plugin
   import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
   // ...
   // ...
   createDevApp()
     // ...
     // ...
     // Add RHDH themes to the development harness
     .addThemes(getAllThemes())
     .render();

   Note

   This configuration is only for the local development harness (dev/index.tsx). When deployed to RHDH, the application provides theming automatically.

Procedure

1. In the src/components/ directory create an ExampleCard sub-directory.

2. Create an ExampleCard.tsx file, as follows:

   import React from 'react';
   import { InfoCard } from '@backstage/core-components';
   import { useEntity } from '@backstage/plugin-catalog-react';
   
   export const ExampleCard = () => {
     const { entity } = useEntity();
     return (
       <InfoCard title="Simple Example Info">
         <p>Entity: {entity.metadata.name}</p>
       </InfoCard>
     );
   };

3. In the src/components/ExampleCard directory, create and edit the index.ts file, as follows:

   export { ExampleCard } from './ExampleCard';

4. To register the new entity card component, edit the src/plugin.ts file to add the new component to the plugin, as follows:

   import { createComponentExtension } from '@backstage/core-plugin-api';
   
   // ...
   // ...
   export const ExampleCard = simpleExamplePlugin.provide(
     createComponentExtension({
       name: 'ExampleCard',
       component: {
         lazy: () =>
           import('./components/ExampleCard').then(m => m.ExampleCard),
       },
     }),
   );

5. Export all components in src/index.ts so they can be loaded dynamically:

   export { simpleExamplePlugin, SimpleExamplePage, ExampleCard } from './plugin';

Procedure

1. Add Backstage dependencies:

   $ yarn add @backstage/catalog-model @backstage/plugin-catalog-react

2. Edit your dev/index.tsx file, as follows:

   // ...
   // ...
   import { Entity } from '@backstage/catalog-model';
   import { EntityProvider } from '@backstage/plugin-catalog-react';
   import { Page, Header, Content } from '@backstage/core-components';
   import { Grid } from '@material-ui/core';
   import { ExampleCard } from '../src/plugin';
   
   
   // Mock entity for the component card
   const mockEntity: Entity = {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'Component',
     metadata: {
       name: 'example-service',
       description: 'An example service component for plugin development.',
       annotations: {
         'backstage.io/techdocs-ref': 'dir:.',
       },
     },
     spec: {
       type: 'service',
       lifecycle: 'production',
       owner: 'team-platform',
     },
   };
   
   // Create a page with the mock entity and the component card
   const entityPage = (
     <EntityProvider entity={mockEntity}>
       <Page themeId="service">
         <Header
           title={mockEntity.metadata.name}
           subtitle={`${mockEntity.kind} · ${mockEntity.spec?.type}`}
         />
         <Content>
           <Grid container spacing={3} alignItems="stretch">
             <Grid item md={6} xs={12}>
               <ExampleCard />
             </Grid>
           </Grid>
         </Content>
       </Page>
     </EntityProvider>
   );
   
   createDevApp()
     // ...
     // ...
     .addPage({
       element: entityPage,
       title: 'Entity Page',
       path: '/simple-example/entity',
     })
     // ...
     // ...
     .render();

3. Run the development server:

   $ yarn start