可編輯區域可新增至遠端SPA之前,必須先以AEM SPA編輯器JavaScript SDK及一些其他設定引導。
首先,檢閱React專案的AEM SPA npm相依性並加以安裝。
@adobe/aem-spa-page-model-manager
:提供從AEM擷取內容的API。@adobe/aem-spa-component-mapping
:提供將AEM內容對應至SPA元件的API。@adobe/aem-react-editable-components
v2 :提供用於建置自訂SPA元件的API,並提供常用實作,例如 AEMPage
反應元件。$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install @adobe/aem-spa-page-model-manager
$ npm install @adobe/aem-spa-component-mapping
$ npm install @adobe/aem-react-editable-components
數個環境變數必須公開給遠端SPA,以便其了解如何與AEM互動。
在開啟遠端SPA專案 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
在IDE中
開啟檔案 .env.development
在檔案中,請特別注意索引鍵,並視需要更新:
REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_USE_PROXY=true
REACT_APP_AUTH_METHOD=basic
REACT_APP_BASIC_AUTH_USER=admin
REACT_APP_BASIC_AUTH_PASS=admin
請記住,React中的自訂環境變數必須加上前置詞 REACT_APP_
.
REACT_APP_HOST_URI
:遠端SPA所連線之AEM服務的配置和主機。
REACT_APP_USE_PROXY
:這可借由向react開發伺服器告知proxy AEM請求(例如 /content, /graphql, .model.json
使用 http-proxy-middleware
模組。REACT_APP_AUTH_METHOD
:AEM已呈現請求的驗證方法、選項為「service-token」、「dev-token」、「basic」,或留空供無驗證使用案例使用
REACT_APP_BASIC_AUTH_USER
:AEM 用戶名 ,以在擷取AEM內容時進行驗證。REACT_APP_BASIC_AUTH_PASS
:AEM 密碼 ,以在擷取AEM內容時進行驗證。使用應用程式可用的AEM SPA npm相依性,初始化AEM ModelManager
在項目的 index.js
befor ReactDOM.render(...)
叫用的是。
此 ModelManager 負責連線至AEM以擷取可編輯的內容。
在IDE中開啟遠程SPA項目
開啟檔案 src/index.js
新增匯入 ModelManager
並在之前初始化 root.render(..)
調用,
...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";
// Initialize the ModelManager before invoking root.render(..).
ModelManager.initializeAsync();
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
此 src/index.js
檔案看起來應該像這樣:
建立可編輯的SPA時,最好設定 SPA中的內部Proxy,此變數會設定為將適當的請求路由至AEM。 這需使用 http-proxy-middleware npm模組,基本WKND GraphQL應用程式已安裝此模組。
在IDE中開啟遠程SPA項目
在開啟檔案 src/proxy/setupProxy.spa-editor.auth.basic.js
使用下列程式碼更新檔案:
const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env;
/*
Set up a proxy with AEM for local development
In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
*/
module.exports = function(app) {
/**
* Filter to check if the request should be re-routed to AEM. The paths to be re-routed at:
* - Starts with /content (AEM content)
* - Starts with /graphql (AEM graphQL endpoint)
* - Ends with .model.json (AEM Content Services)
*
* @param {*} path the path being requested of the SPA
* @param {*} req the request object
* @returns true if the SPA request should be re-routed to AEM
*/
const toAEM = function(path, req) {
return path.startsWith('/content') ||
path.startsWith('/graphql') ||
path.endsWith('.model.json')
}
/**
* Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources
* - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM
* - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/
*
* @param {*} path the path being requested of the SPA
* @param {*} req the request object
* @returns returns a re-written path, or nothing to use the @param path
*/
const pathRewriteToAEM = function (path, req) {
if (path === '/.model.json') {
return '/content/wknd-app/us/en/home.model.json';
} else if (path.startsWith('/adventure/') && path.endsWith('.model.json')) {
return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop();
}
}
/**
* Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter
*/
app.use(
createProxyMiddleware(
toAEM, // Only route the configured requests to AEM
{
target: REACT_APP_HOST_URI,
changeOrigin: true,
// Pass in credentials when developing against an Author environment
auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`,
pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM
}
)
);
/**
* Enable CORS on requests from the SPA to AEM
*
* If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000
*/
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
next();
});
};
此 setupProxy.spa-editor.auth.basic.js
檔案看起來應該像這樣:
此代理設定執行兩項主要動作:
http://localhost:3000
)到AEM http://localhost:4502
toAEM(path, req)
.pathRewriteToAEM(path, req)
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
開啟檔案 src/setupProxy.js
查看指向 setupProxy.spa-editor.auth.basic
代理配置檔案:
...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...
請注意, src/setupProxy.js
或者引用的檔案需要重新啟動SPA。
靜態SPA資源(例如WKND標誌和載入圖形)需要更新其src URL,以強制從遠端SPA主機載入。 若相對左,當SPA在SPA編輯器中載入以進行編寫時,這些URL預設會使用AEM主機,而非SPA,因此會產生404個要求,如下圖所示。
若要解決此問題,請讓遠端SPA托管的靜態資源使用包含遠端SPA來源的絕對路徑。
在IDE中開啟SPA專案
開啟SPA環境變數檔案 src/.env.development
並為SPA公用URI新增變數:
...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000
部署至AEM as a Cloud Service時,您需要對應 .env
檔案。
開啟檔案 src/App.js
從SPA環境變數匯入SPA公用URI
const { REACT_APP_PUBLIC_URI } = process.env;
function App() { ... }
為WKND徽標加上前置詞 <img src=.../>
with REACT_APP_PUBLIC_URI
來強制對SPA。
<img src={REACT_APP_PUBLIC_URI + '/' + logo} className="logo" alt="WKND Logo"/>
在中載入影像時也請執行相同操作 src/components/Loading.js
const { REACT_APP_PUBLIC_URI } = process.env;
class Loading extends Component {
render() {
return (<div className="loading">
<img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." />
</div>);
}
}
對於 兩個例項 中的後按鈕 src/components/AdventureDetails.js
const { REACT_APP_PUBLIC_URI } = process.env;
function AdventureDetail(props) {
...
render() {
<img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
}
}
此 App.js
, Loading.js
,和 AdventureDetails.js
檔案應該如下:
若要支援SPA編輯器的版面模式,以便在SPA中處理可編輯區域,我們必須將AEM Responsive Grid CSS整合至SPA。 別擔心 — 此網格系統僅適用於可編輯的容器,並且您可以使用所選的網格系統來驅動其餘SPA的佈局。
將AEM回應式格線SCSS檔案新增至SPA。
在IDE中開啟SPA專案
下載以下兩個檔案並複製到 src/styles
_grid.scss
使用SPA的特定中斷點(案頭和行動裝置)和欄(12)。開啟 src/App.scss
和匯入 ./styles/grid-init.scss
...
@import './styles/grid-init';
...
此 _grid.scss
和 _grid-init.scss
檔案應該如下:
現在,SPA包含新增至AEM容器之元件支援AEM版面模式所需的CSS。
將下列公用程式類別中的內容複製到您的React應用程式專案。
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js
現在SPA正在啟動以便與AEM整合,讓我們執行SPA並查看看看看起來是什麼樣子!
在命令列中,導覽至SPA專案的根目錄
使用一般命令啟動SPA(如果尚未執行)
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start
在上瀏覽SPA http://localhost:3000. 一切都應該好看!
當SPA執行時 http://localhost:3000,請使用AEM SPA編輯器開啟它。 SPA中尚無可編輯的項目,這只會驗證AEM中的SPA。
登入AEM作者
導覽至 網站> WKND應用程式>我們>結束
選取 WKND應用首頁 點選 編輯,則會顯示SPA。
切換至 預覽 使用右上角的模式切換器
按一下週圍的SPA
您已引導遠端SPA以相容AEM SPA編輯器! 您現在知道如何:
現在,我們已取得與AEM SPA Editor相容性的基準,可以開始介紹可編輯的區域。 我們先看看如何 固定可編輯元件 在SPA中。