// Net planet-es V2

Sitecore Content Hub 4.2 以降では、UIのテクノロジーがReactに変更されたのに伴い、External Page コンポーネントの仕様が変更されています。4.1以前の場合は JavaScriptとHTMLのテンプレートを使用してExternal Pageコンポーネントを実装していましたが、 4.2以降では、Reactコンポーネントとして、External Pageコンポーネントを実装する必要があります。

今回は、ViteのLibrary Modeを利用して、External PageコンポーネントをReactとTypeScriptを使用して実装する簡単なサンプルを紹介します。

1. プロジェクトのセットアップ

node.jsがインストールされている環境で次のコマンドを実行してプロジェクトのひな型を準備します。Frameworkの選択画面では React, Variantの選択画面では、 TypeScript を選択します。

npm create vite myproject

インストール方法のオプションについては、このページも参照ください。

プロジェクト用のフォルダーが作成されたら、次のコマンドを実行して動作を確認します。

cd myproject
npm install
npm run dev

ブラウザーを起動して、http://localhost:5173/ にアクセスして、次のようなページが表示されたら成功です。

npm run devコマンドを実行したコンソール上で、q キーをタイプするか Ctrl + c で実行を停止します。

以降、VS codeでプロジェクトフォルダーを開いて作業を進めます。

npm i @vitejs/plugin-basic-ssl
npm i --save-dev @types/node

次に、プロジェクトのルートにある、vite.config.ts を開き、インストールしたplugin-basic-sslパッケージのモジュールを使用して、SSLを使用してページを表示できるようにします。ファイルを開き、plugin-basic-sslモジュールをインポートし、pluginに追加します。変更後のファイル例は次の通りです。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), basicSsl()],
})

次に、package.json を開き、scripts > dev セクションの内容を vite から、 vite --https に変更します。変更例は次の通りです。指定できるオプション(--cors, --debugなど)は .\node_modules\.bin\vite.ps1 --help などで確認できます。

"dev": "vite --https",

これで Content Hub 上で動作確認をする際に、httpsとhttpが混在しないようにできました。npm run dev コマンドを実行して、https://localhost:5173/ でページを表示できることを確認します。この際、Your connection is not private のような警告画面が表示された場合、 Advanced ボタンをクリックして、 Proceed to localhost(unsafe) リンクをクリックしてください。日本語UIやChrome以外のブラウザーだと異なる内容が表示されると思います。

Ctrl+cを入力してアプリケーションの実行を停止します。

この記事の最後に不要なファイルを削除します。VS Codeでプロジェクトフォルダーを開いている状態で、直下のindex.html と srcフォルダー配下の vite-env.d.ts 以外のすべてのファイルとフォルダーを削除します。プロジェクト直下のpublicフォルダーも削除します。

削除後のsrcフォルダーは次のようになります。

これで準備が整いました。

パート２で簡単なコンポーネントを作成します。