建立專案 spa-editor-project
瞭解如何產生Adobe Experience Manager (AEM) Maven專案,並以此為基礎,整合React應用程式與AEM SPA編輯器。
目標
- 使用SPA專案原型產生啟用AEM編輯器的專案。
- 將入門專案部署到AEM的本機執行個體。
您將建置的內容 what-build
本章會根據下列專案產生新的AEM專案 AEM專案原型. AEM專案是以React SPA的一個非常簡單的起點啟動。
什麼是Maven專案? - Apache Maven 是用來建置專案的軟體管理工具。 所有Adobe Experience Manager 實作使用Maven專案在AEM之上建置、管理和部署自訂程式碼。
什麼是Maven原型? - A Maven原型 是用於產生新專案的範本或模式。 AEM專案原型可讓我們使用自訂名稱空間產生新專案,並包含遵循最佳實務的專案結構,大幅加快專案進度。
先決條件
檢閱設定所需的工具和指示 本機開發環境. 確定已在中啟動新的Adobe Experience Manager例項 作者 模式,正在本機執行。
建立專案 create
-
開啟命令列終端機,然後輸入以下Maven命令:
code language-shell mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe.aem \ -D archetypeArtifactId=aem-project-archetype \ -D archetypeVersion=35 \ -D appTitle="WKND SPA React" \ -D appId="wknd-spa-react" \ -D artifactId="aem-guides-wknd-spa.react" \ -D groupId="com.adobe.aem.guides.wkndspa.react" \ -D frontendModule="react" \ -D aemVersion="cloud"
note note NOTE 如果目標為AEM 6.5.5+取代 aemVersion="cloud"
替換為aemVersion="6.5.5"
. 如果鎖定目標6.4.8+,請使用aemVersion="6.4.8"
.請注意
frontendModule=react
屬性。 這會告訴AEM專案原型使用啟動器啟動專案 React程式碼基底 與AEM SPA編輯器搭配使用。 屬性,例如appTitle
,appId
,artifactId
、和groupId
用於識別專案和用途。設定專案的可用屬性完整清單 可在此處找到.
-
下列資料夾和檔案結構是由本機檔案系統上的Maven原型所產生:
code language-plain |--- aem-guides-wknd-spa.react/ |--- LICENSE |--- README.md |--- all/ |--- archetype.properties |--- core/ |--- dispatcher/ |--- it.tests/ |--- pom.xml |--- ui.apps/ |--- ui.apps.structure/ |--- ui.config/ |--- ui.content/ |--- ui.frontend/ |--- ui.tests / |--- .gitignore
每個資料夾代表一個單獨的Maven模組。 在本教學課程中,我們將主要使用
ui.frontend
模組,亦即React應用程式。 如需個別模組的詳細資訊,請參閱 AEM專案原型檔案.
部署和建置專案
接下來,使用Maven編譯、建置專案計畫碼並將其部署到AEM的本機執行個體。
-
確認AEM的執行個體正在連線埠上本機執行 4502.
-
從命令列導覽至
aem-guides-wknd-spa.react
專案目錄。code language-shell $ cd aem-guides-wknd-spa.react
-
執行以下命令,建置整個專案並將其部署到AEM:
code language-shell $ mvn clean install -PautoInstallSinglePackage
建置需要約一分鐘的時間,結尾應會顯示下列訊息:
code language-shell ... [INFO] ------------------------------------------------------------------------ [INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT: [INFO] [INFO] aem-guides-wknd-spa.react .......................... SUCCESS [ 0.257 s] [INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s] [INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min] [INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [ 1.082 s] [INFO] WKND SPA React - UI apps ........................... SUCCESS [ 8.237 s] [INFO] WKND SPA React - UI content ........................ SUCCESS [ 5.633 s] [INFO] WKND SPA React - UI config ......................... SUCCESS [ 0.234 s] [INFO] WKND SPA React - All ............................... SUCCESS [ 0.643 s] [INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s] [INFO] WKND SPA React - Dispatcher ........................ SUCCESS [ 0.066 s] [INFO] WKND SPA React - UI Tests .......................... SUCCESS [ 0.074 s] [INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s] [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------
Maven設定檔
autoInstallSinglePackage
編譯專案的個別模組,並將單一套件部署至AEM執行個體。 依預設,此套件會部署至在本機執行於連線埠的AEM執行個體 4502 且憑證為admin:admin
. -
瀏覽至 封裝管理員 在本機AEM執行個體上: http://localhost:4502/crx/packmgr/index.jsp.
-
您應該會看到多個前置詞為的套件
aem-guides-wknd-spa.react
.AEM封裝管理員
專案所需的所有自訂程式碼都隨附在這些套件中,並安裝在AEM環境中。
作者內容
接下來,開啟原型產生的入門SPA並更新部分內容。
-
導覽至 網站 主控台: http://localhost:4502/sites.html/content.
WKND SPA包含基本網站結構,其中包含國家/地區、語言和首頁。 此階層是以原型的預設值為基礎
language_country
和isSingleCountryWebsite
. 這些值可以透過更新 可用屬性 產生專案時。 -
開啟 us > en > wknd SPA React首頁 選取頁面並按一下 編輯 功能表列中的按鈕:
-
A 文字 元件已新增至頁面。 您可以像在AEM中編輯任何其他元件一樣編輯此元件。
-
新增其他 文字 元件至頁面。
請注意,製作體驗類似於傳統AEM Sites頁面的製作體驗。 目前可用的元件數量有限。 在本教學課程中新增更多內容。
Inspect單頁應用程式
接下來,確認這是使用瀏覽器開發人員工具的單頁應用程式。
-
在 頁面編輯器,按一下 頁面資訊 按鈕> 以發佈的形式檢視:
這將使用查詢引數開啟一個新索引標籤
?wcmmode=disabled
會有效地關閉AEM編輯器: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled -
檢視頁面來源,並注意文字內容 Hello World 或找不到任何其他內容。 您應該會看到類似以下的HTML:
code language-html ... <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="spa-root"></div> <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script> </body> ...
clientlib-react.min.js
是載入到頁面上的React SPA,負責轉譯內容。不過, 內容來自何處?
-
返回標籤: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled
-
開啟瀏覽器的開發人員工具,並在重新整理期間檢查頁面的網路流量。 檢視 XHR 要求:
應該會有一個要求 http://localhost:4502/content/wknd-spa-react/us/en.model.json. 這包含所有將驅動SPA的內容(格式化為JSON)。
-
在新標籤中開啟 http://localhost:4502/content/wknd-spa-react/us/en.model.json
請求
en.model.json
表示將驅動應用程式的內容模型。 Inspect JSON輸出,您應該能夠找到代表 文字 元件。code language-json ... ":items": { "text": { "text": "<p>Hello World! Updated content!</p>\r\n", "richText": true, ":type": "wknd-spa-react/components/text" }, "text_98796435": { "text": "<p>A new text component.</p>\r\n", "richText": true, ":type": "wknd-spa-react/components/text" }, } ...
在下一章中,我們將檢查此JSON內容如何從AEM元件對應至SPA元件,以形成AEM SPA編輯器體驗的基礎。
note note NOTE 安裝瀏覽器擴充功能以自動格式化JSON輸出可能會有幫助。
恭喜! congratulations
恭喜,您剛才已建立您的第一個AEM SPA Editor專案!
SPA相當簡單。 在接下來的幾個章節中,將新增更多功能。
後續步驟 next-steps
整合SPA — 瞭解SPA原始程式碼如何與AEM專案整合,並瞭解可用於快速開發SPA的工具。