將可編輯區域新增到遠端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
React元件。$ 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開發伺服器代理AEM請求(例如 /content, /graphql, .model.json
使用 http-proxy-middleware
模組。REACT_APP_AUTH_METHOD
:適用於AEM服務請求的驗證方法,選項為「service-token」、「dev-token」、「basic」或對「無驗證」使用案例保留空白
REACT_APP_BASIC_AUTH_USER
:AEM 使用者名稱 SPA在擷取AEM內容時進行身分驗證。REACT_APP_BASIC_AUTH_PASS
:AEM 密碼 SPA在擷取AEM內容時進行身分驗證。使用應用程式可用的AEM SPA npm相依性,初始化AEM ModelManager
在專案的 index.js
早於 ReactDOM.render(...)
叫用的是。
此 模型管理員 負責連線至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
檔案應如下所示:
此Proxy設定主要執行兩項作業:
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
proxy設定檔:
...
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
部署至AEMas a Cloud Service時,您需要 .env
檔案。
開啟檔案 src/App.js
從SPA環境變數匯入SPA公用URI
const { REACT_APP_PUBLIC_URI } = process.env;
function App() { ... }
為WKND標誌加上前置詞 <img src=.../>
替換為 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回應式格線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 Editor將其開啟。 在SPA中尚無法編輯任何專案,這只會驗證AEM中的SPA。
登入AEM Author
瀏覽至 網站> WKND應用程式>我們>英文
選取 WKND應用程式首頁 然後點選 編輯,則會出現SPA。
切換至 預覽 使用右上方的模式切換器
在SPA周圍按一下
您已啟動遠端SPA,使其與AEM SPA Editor相容! 您現在知道如何:
我們與AEM SPA Editor的相容性已達底線,現在可以開始匯入可編輯區域了。 我們先來看一下如何放置 固定可編輯元件 在SPA中。