4.4. TechDocs アドオンの作成

手順

1. ターミナルで、新しいプラグインを作成するリポジトリーのルートフォルダーに移動します。

2. 新しいフロントエンドプラグインを作成するために、次のコマンドを実行します。

   yarn new

   出力例

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

3. ターミナルプロンプトで、新しいプラグインの名前を入力します。以下に例を示します。

   ? Enter the ID of the plugin [required] <new_plugin_for_techdocs_add-on>

   出力例

   Successfully created plugin

   結果

   plugins ディレクトリーに、プラグインに付けた名前と同じ名前のサブディレクトリーが自動的に生成されます。このディレクトリーには、新しいプラグインを作成するために設定する必要があるすべてのファイルが含まれています。

4. ターミナルで、新しいプラグインのディレクトリーに移動します。以下に例を示します。

   cd plugins/<new_techdocs_add-on_directory>

5. `@backstage/plugin-techdocs-react` パッケージを追加して、TechDocs アドオンのフロントエンドユーティリティーを取得します。以下に例を示します。

   yarn add @backstage/plugin-techdocs-react

6. カスタム TechDocs アドオンのコンポーネントが含まれるディレクトリーで、アドオンに必要のないデフォルトのファイルまたはファイルコンポーネント (routes.ts ファイルや index.tsx ファイルおよび plugins.ts ファイルのコンポーネントなど) を削除します。

7. plugins.ts ファイルに次のコードを追加します。

   import { createPlugin } from '@backstage/core-plugin-api';
   import { createTechDocsAddonExtension } from '@backstage/plugin-techdocs-react';
   
   export const <new_plugin_for_techdocs_add-on> = createPlugin({
     id: '<new_techdocs_add-on>',
    });
   
    /*
    *
    * @public
    */
   export const <new_techdocs_add-on> = <new_plugin_for_techdocs_add-on>.provide(
    createTechDocsAddonExtension<_<new_techdocs_addon_props>_>({
       name: '<new_techdocs_add-on>',
       location: TechDocsAddonLocations.Content,
       component: <new_techdocs_add-on_component>,
     }),
   );

   以下は、

   <new_plugin_for_techdocs_add-on>

   Red Hat Developer Hub インスタンスに TechDocs アドオンをインポートするために使用する新しいプラグインを指定します。

   <new_techdocs_add-on>

   作成するカスタム TechDocs アドオンを指定します。

   <new_techdocs_addon_props> (任意)

   該当する場合は、<new_techdocs_add-on>.tsx ファイルで指定されているように、新しい TechDocs アドオンの props を指定します。

   <new_techdocs_add-on_component>

   作成するカスタム TechDocs アドオンの React コンポーネントを指定します。このコンポーネントは、後のステップで .tsx ファイルに作成します。

8. index.ts ファイルで、次のコードを追加して、作成するカスタム TechDocs アドオンをエクスポートします。

   export { <new_plugin_for_techdocs_add-on>, <new_techdocs_add-on> } from './plugin';

9. 新しい <new_techdocs_add-on>.tsx ファイルを作成し、新しい TechDocs アドオンコンポーネントのコードを追加します。

10. 新しい index.tsx ファイルを作成し、次のコードを追加して新しい TechDocs アドオンコンポーネントをエクスポートします。

    export { <new_techdocs_add-on>, type <new_techdocs_addon_props>} from './<new_techdocs_add-on_directory>'

    以下は、

    <new_techdocs_addon_props> (任意)

    該当する場合は、<new_techdocs_add-on>.tsx ファイルで指定されているように、新しい TechDocs アドオンの props を指定します。

11. plugins.ts ファイルに、新しい TechDocs アドオンコンポーネントをインポートします。
12. TechDocs アドオンのインストールと設定 の手順に従って、新しい TechDocs アドオンをインストールし、設定します。

検証

1. RHDH アプリケーションを再起動し、プラグインが正常にアクティブ化され、設定されていることを確認します。
2. アプリケーションログを確認のため検証して、プラグインが期待どおりに機能していることを確認します。