RemotePage元件

決定外部SPA和AEM之間要進行的整合等級時，您通常清楚需要在AEM中檢視和編輯SPA。 RemotePage元件是專門用於此目的的自定義頁面元件。

概覽

RemotePage元件從應用程式產生的asset-manifest.json中擷取所有必要資產，並使用它在AEM中轉譯SPA。

  • RemotePage允許您在AEM Page元件的主體中插入SPA的指令碼和樣式表。
  • 虛擬前端元件可讓您在AEM SPA編輯器中將區段標示為可編輯。
  • 托管於不同網域的SPA可在AEM中設為可編輯。

如需AEM中可編輯外部SPA的詳細資訊，請參閱在AEM中編輯外部SPA一文。

需求

  • 啟用開發中的CORS

  • 在頁面屬性中設定遠端URL

  • 在AEM中呈現SPA

  • Web應用程式必須使用類似下列其中一項的捆綁式資產資訊清單，並在網域根目錄中公開asset-manifest.json檔案，該根目錄會列出要載入的所有CSS和JS檔案：

    • https://github.com/shellscape/webpack-manifest-plugin
    • https://github.com/webdeveric/webpack-assets-manifest
    • https://github.com/mugi-uno/parcel-plugin-bundle-manifest

    入口點

  • 應用程式必須能夠在主體元素下的<div id="root"></div>中初始化。 如果應用程式需要不同的標籤才能實例化，則必須在具有sling:resourceSuperType="spa-project-core/components/remotepage之Proxy元件的HTL指令碼中相應調整。

限制

  • RemotePage元件的當前實施僅支援遠程React應用程式。
  • 在AEM中執行遠端轉譯時，應用程式根HTML檔案中定義的內部CSS以及根DOM節點上的內嵌CSS將無法使用。

技術詳細資訊

與AEM SPA專案的其餘部分一樣， RemotePage元件是開放原始碼。 有關RemotePage元件的完整技術詳細資訊，請參閱GitHub儲存庫。🔗

本頁內容