ローカルのユニバーサルエディター拡張機能のプレビュー

開発中にユニバーサルエディター拡張機能をプレビューするには、次の操作が必要です。

拡張機能をローカルで実行

これは、既に​ ユニバーサルエディター拡張機能を作成しており、ローカルでのテストおよび開発中にプレビューする必要があることを前提としています。

ユニバーサルエディター拡張機能を次の方法で開始します。

$ aio app run

以下のような出力が表示されます。

To view your local application:
  -> https://localhost:9080
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

これにより、拡張機能がデフォルトでhttps://localhost:9080に実行されます。

自己署名証明書を承認

ユニバーサルエディターで拡張機能を読み込むにはHTTPSが必要です。 ローカル開発は自己署名証明書を使用するため、ブラウザーはそれを明示的に信頼する必要があります。

新しいブラウザータブを開き、aio app run コマンドで出力されたローカル拡張機能URLに移動します。

https://localhost:9080

ブラウザーに証明書の警告が表示されます。 続行するには、証明書を承認してください。

承認すると、ローカル拡張機能のプレースホルダーページが表示されます。

ユニバーサルエディターでページを開く

​ ユニバーサルエディターコンソール ​を使用するか、ユニバーサルエディターを使用するAEM Sitesでページを編集して、ユニバーサルエディターを開きます。

拡張機能を読み込む

ユニバーサルエディターで、インターフェイスの上部中央にある「場所」フィールドを見つけます。 展開して、ブラウザーのアドレスバーではなく、場所フィールド​の​URLを更新します。

次のクエリパラメーターを追加します。

例：

https://author-pXXX-eXXX.adobeaemcloud.com/content/aem-ue-wknd/index.html?devMode=true&ext=https://localhost:9080

拡張機能をプレビュー

ブラウザーの​ ハードリロード ​を実行して、更新されたURLが使用されるようにします。

ユニバーサルエディターは、ブラウザーセッションでのみローカル拡張機能を読み込みます。

ローカルで行ったコードの変更は、すぐに反映されます。