Sitecore Content Hub 4.2以降でExternal Page コンポーネントを使用するその2

samatsu 4/4/2023 367 N/A Sitecore Content Hub

前回、External Pageコンポーネント開発用のプロジェクトのセットアップが完了したので、実際に簡単なコンポーネントを作成していきます。コード例は、公式ドキュメントも参考になります。

1. 簡単なコンポーネントを作成

もし準備したプロジェクトフォルダーをVS Codeで開いていない場合は開きます。srcフォルダーに、componentsという名前でフォルダーを作成し、さらにその下にHelloWorldという名前でフォルダーを作成します。HelloWorldフォルダー配下に、index.tsx を作成して次のように変更します。

const HelloWorld = (props: any) => {
    return <div>Hello World!</div>
}

export default HelloWorld;

srcフォルダーにMySampleAppフォルダーを作成します。そのフォルダー配下に、index.tsx を作成して次のように変更します。

import { createRoot} from "react-dom/client";
import HelloWorld from "../components/HelloWorld";

export default function CreateExternalRoot(container:HTMLElement){
    const root = createRoot(container);
    return {      
        render(props: any) {
            root.render(<HelloWorld />);
        },
        unmount(){
            root.unmount();
        }
    }
}

作成したファイルとフォルダーは次のようになります。CreateExternalRoot関数で実装している render 関数に渡されるデータの内容については、ドキュメントを参照してください。

Content HubのExternal ComponentでReactコンポーネントを動かすために1つのファイルにプログラムをバンドルする必要があります。Viteではこれを行う便利なライブラリモードがあるのでその機能を使用します。

作成したプログラムが1つのファイルにバンドルされるように vite.config.ts を開きます。Library mode を使用してJSファイルを作成するように以下の例を参考に build プロパティを設定に追加します。

  build: {
    lib: {
      formats:['es'],
      fileName: process.env.npm_config_appname,
      entry: `./src/${process.env.npm_config_appname}/index.tsx`
    }
  },

ビルドオプションについては、このページもご参照ください。また、最終的に作成したJSバンドルをContent Hubにアップロードして利用しようとすると、process is not defined エラーが発生したので次の設定も追加しています。

  define: {
    'process.env': {}
  }

追加後のファイル例は次の図のようになります。

npm_config_appname は、External Componentを複数作成する際に、1つのプロジェクトでプログラムを管理して、jsファイルビルド時にパラメーターで作成するJSバンドルを変更できるようにするためのものです。

変更を保存したら、次のコマンドを実行して、JavaScriptのバンドルファイルを作成します。

npm run build --appname=MySampleApp

ビルドに成功すると、distフォルダーにMySampleApp.js ファイルが作成されます。

npm run dev を実行して、https://localhost:5173/dist/MySampleApp.js にアクセスして、JSファイルを取得できる状態になっていることを確認します。

npm run dev は実行したままにしておいてください。

2. Content Hubで動作を確認

JSの準備ができたので、最終的にはJSをポータルアセットにアップロードしてExternalコンポーネントで利用します。ただし、それでは試行錯誤の段階で手順が煩雑になってしまいます。このため、まずはローーカルの環境で管理されているJSファイルを使用して動作を確認します。

Content Hub上の操作は理解しているものとしてここでは詳細な手順は記載しません。

npm run dev コマンドが引き続き実行中であることを確認し、Content Hubのインスタンスにアクセスして、External Componentを Asset details ポータルページに追加します。 External Componentの編集画面にアクセスして、JS bundle フィールドに From path オプションを選択し、 Path to JS bundle フィールドに、今回の場合は https://localhost:5173/dist/MySampleApp.js を指定します。

設定後次のようになります。

変更を保存し、任意のアセット詳細ページに移動し、External Componentい HelloWorldコンポーネントの内容が出力されることを確認します。

動作検証が完了したら、Manag > Poral assets にアクセスして、ポータル用のアセットとして JS ファイルをアップロードし、External コンポーネントを編集してJS bundleのオプションを From asset に変更し、アップロードしたアセットを利用するようにします。

以上ですが、エクスターナルコンポーネントを作成する手順の簡単な説明になります。

// Net planet-es V2