mcpField
D
datahub-mfe-create-app

datahub-mfe-create-app

github.com/datahub-project開発45157 回インストール4 週間前に更新
リポジトリ

datahub-mfe-create-app について

Webpack Module Federation を使って DataHub のマイクロフロントエンドアプリを作成するスキルです。設定を集めて7つのファイルを生成し、インストール、起動、検証を案内します。

主な機能

  1. 01アプリ名、説明、ポート、API要否の収集
  2. 02アプリと設定ファイル7点の生成
  3. 03任意のGraphQLプロキシ設定
  4. 04インストールと開発サーバー起動の案内
  5. 05リモートエントリーと単独ページの検証

活用シーン

  1. 01新しいDataHub MFEアプリの開始
  2. 02GraphQLプロキシ付きスキャフォールドの作成
  3. 03開発アプリの配信状態の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/datahub-project/datahub-skills --skill datahub-mfe-create-app

インストール後、Claude Code で/datahub-mfe-create-appを入力して読み込まれたか確認します。

同梱ファイルassets/templates.md

詳細

DataHub MFE アプリを作成する

Webpack Module Federation を介して DataHub と統合する、完全に動作するマイクロフロントエンドアプリをスキャフォールドします。必要な 7 つのファイルをすべて生成し、ビルドと検証の手順を案内します。

ステップ 1：情報を収集する

AskQuestion ツールを使って、以下の情報を 1 回の呼び出しで収集します。

質問ID選択肢
アプリ名（ケバブケース、例：team-dashboard）app_nametest-app / N/A - I'll fill it in later
アプリの機能の簡単な説明app_desctest-description / N/A - I'll fill it in later
開発サーバーのポートport3002 / 3003 / 3004 / 3005 / 3006
アプリから DataHub GraphQL API を呼び出す必要がありますか？needs_graphqlYes / No

app_name と app_desc では、N/A - I'll fill it in later の選択肢だけを表示してください。ワークスペースから値を提案してはいけません。ユーザーが自分で入力します。

app_name から名前を導出する

team-dashboard のような app_name の場合：

  • ディレクトリ：team-dashboard-mfe/（末尾に -mfe が付いていない場合は追加）
  • Module Federation 名（MF_NAME）：キャメルケースに変換して MFE を追加 — teamDashboardMFE
  • パッケージ名：ディレクトリ名と同じ。例：team-dashboard-mfe
  • 表示ラベル：各単語の先頭を大文字にする。例：Team Dashboard

ステップ 2：ファイルを生成する

ワークスペースのルート（datahub-web-react/ と同じ階層）にディレクトリを作成します。templates.md のテンプレートを使って、必要な 7 つのファイルをすべて生成します。

すべてのテンプレートに以下の置換を適用します。

プレースホルダー値
__APP_DIR__ディレクトリ名
__PACKAGE_NAME__パッケージ名
__APP_DESCRIPTION__ユーザーの説明
__PORT__開発サーバーのポート
__MF_NAME__Module Federation 名（キャメルケース + MFE）
__DISPLAY_LABEL__各単語の先頭を大文字にしたラベル
__PUBLIC_PATH_DEV__http://localhost:<PORT>/

needs_graphql が Yes の場合は、webpack.config.js に GraphQL プロキシブロックを含めます（テンプレート内の {{GRAPHQL_PROXY}} が目印です）。No の場合は、ブロック全体を省略します。

生成するファイル
  1. package.json
  2. webpack.config.js
  3. src/mount.tsx
  4. src/index.tsx
  5. src/App.tsx
  6. tsconfig.json
  7. public/index.html

ステップ 3：インストールして起動する

まずアプリのディレクトリに cd します。webpack はワークスペースのルートではなく、アプリのディレクトリ内から起動する必要があります。

cd __APP_DIR__
npm install
npm start

webpack のコンパイルが完了するまで待ちます。開発サーバーが設定したポートで起動します。

ステップ 4：検証する

  1. ブラウザーで http://localhost:<PORT>/remoteEntry.js を開くか、curl でアクセスします。JavaScript が返されるはずです（404 や HTML のエラーページではありません）。
  2. http://localhost:<PORT>/ を開きます。単独で動作する開発ページが表示されるはずです。

どちらかの確認に失敗した場合は、webpack の出力を確認してエラーを修正してから先に進みます。

ステップ 5：次のステップ

ユーザーに次のように伝えます。

MFE アプリが起動しました！DataHub と統合するには、 datahub-mfe-configure-app スキルを使用してください。このスキルでは、 DataHub フロントエンド設定にこのアプリを追加し、/mfe/<path> に表示して、必要に応じてナビゲーションサイドバーにも追加する手順を案内します。

作成した内容の概要を示します。

Created __APP_DIR__/ with 7 files:
  package.json          — dependencies and scripts
  webpack.config.js     — Module Federation + dev server
  src/mount.tsx         — mount() contract for DataHub
  src/index.tsx         — standalone dev entry point
  src/App.tsx           — starter React component
  tsconfig.json         — TypeScript config
  public/index.html     — dev HTML shell

Module Federation name: __MF_NAME__   ← use this as "MFE app name" in datahub-mfe-configure-app
Remote entry URL:       http://localhost:__PORT__/remoteEntry.js
Module path:            __MF_NAME__/mount

コメント

Markdown 対応