Prima di poter aggiungere le aree modificabili al SPA remoto, è necessario avviarle con l'SDK JavaScript per l'editor di SPA AEM e con alcune altre configurazioni.
Innanzitutto, rivedi AEM dipendenze npm SPA per il progetto React e le installa.
@adobe/aem-spa-page-model-manager
: fornisce l’API per il recupero del contenuto da AEM.@adobe/aem-spa-component-mapping
: fornisce l’API che mappa AEM contenuto ai componenti SPA.@adobe/aem-react-editable-components
v2 : fornisce un’API per la creazione di componenti SPA personalizzati e implementazioni di uso comune come AEMPage
Componente 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
Diverse variabili di ambiente devono essere esposte al SPA remoto in modo che sappia interagire con AEM.
Apri progetto di SPA remoto in ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
nell’IDE
Aprire il file .env.development
Nel file , fai particolare attenzione alle chiavi e aggiorna in base alle esigenze:
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
Ricorda che le variabili di ambiente personalizzate in React devono avere il prefisso REACT_APP_
.
REACT_APP_HOST_URI
: lo schema e l'host del servizio AEM a cui il SPA remoto si connette.
REACT_APP_USE_PROXY
: in questo modo si evitano i problemi CORS durante lo sviluppo, indicando al server di sviluppo react le richieste di AEM proxy come /content, /graphql, .model.json
utilizzo http-proxy-middleware
modulo .REACT_APP_AUTH_METHOD
: metodo di autenticazione per le richieste AEM servite, le opzioni sono "service-token", "dev-token", "basic" o lasciate vuote per i casi d'uso senza autenticazione
REACT_APP_BASIC_AUTH_USER
: AEM username dal SPA per l’autenticazione durante il recupero del contenuto AEM.REACT_APP_BASIC_AUTH_PASS
: AEM password dal SPA per l’autenticazione durante il recupero del contenuto AEM.Con le dipendenze npm AEM SPA disponibili per l’app, inizializza AEM ModelManager
nel progetto index.js
prima ReactDOM.render(...)
viene richiamato.
La ModelManager è responsabile della connessione a AEM per il recupero del contenuto modificabile.
Apri il progetto Remote SPA nell’IDE
Aprire il file src/index.js
Aggiungi importazione ModelManager
e inizializzalo prima del root.render(..)
invocazione,
...
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 />);
La src/index.js
dovrebbe essere simile a:
Quando crei un SPA modificabile, è consigliabile impostare un proxy interno nel SPA, configurato per indirizzare le richieste appropriate a AEM. A tale scopo, utilizza http: proxy-middleware modulo npm, che è già installato dall’app GraphQL WKND di base.
Apri il progetto Remote SPA nell’IDE
Apri il file in src/proxy/setupProxy.spa-editor.auth.basic.js
Aggiorna il file con il seguente codice:
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();
});
};
La setupProxy.spa-editor.auth.basic.js
dovrebbe essere simile a:
Questa configurazione proxy esegue due operazioni principali:
http://localhost:3000
) a AEM http://localhost:4502
toAEM(path, req)
.pathRewriteToAEM(path, req)
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
Aprire il file src/setupProxy.js
Rivedi la linea che punta al setupProxy.spa-editor.auth.basic
file di configurazione proxy:
...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...
Eventuali modifiche apportate al src/setupProxy.js
oppure i file a cui si fa riferimento richiedono il riavvio del SPA.
Per le risorse statiche SPA come il logo WKND e la grafica Loading, è necessario aggiornare i propri URL src per forzarne il caricamento dall'host SPA remoto. Se lasciato relativo, quando il SPA viene caricato in SPA Editor per l’authoring, questi URL vengono utilizzati per impostazione predefinita AEM host anziché il SPA, con conseguente richiesta di 404 come illustrato nell’immagine seguente.
Per risolvere questo problema, fare in modo che una risorsa statica ospitata da SPA remoto utilizzi percorsi assoluti che includono l'origine SPA remota.
Apri il progetto SPA nell’IDE
Apri il file delle variabili di ambiente SPA src/.env.development
e aggiungi una variabile per l’URI pubblico SPA:
...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000
Quando distribuisci AEM as a Cloud Service, devi eseguire le stesse operazioni per il .env
file.
Aprire il file src/App.js
Importa l’URI pubblico SPA dalle variabili di ambiente SPA
const { REACT_APP_PUBLIC_URI } = process.env;
function App() { ... }
Prefisso il logo WKND <img src=.../>
con REACT_APP_PUBLIC_URI
per forzare la risoluzione contro il SPA.
<img src={REACT_APP_PUBLIC_URI + '/' + logo} className="logo" alt="WKND Logo"/>
Esegui la stessa operazione per caricare l’immagine in 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>);
}
}
E per due istanze del pulsante posteriore in 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" />
}
}
La App.js
, Loading.js
e AdventureDetails.js
i file devono avere un aspetto simile a:
Per supportare la modalità di layout di SPA Editor per le aree modificabili nell’SPA, è necessario integrare CSS AEM griglia reattiva nell’SPA. Non preoccuparti - questo sistema a griglia è applicabile solo ai contenitori modificabili e puoi utilizzare il tuo sistema a griglia di scelta per guidare il layout del resto del tuo SPA.
Aggiungi i file SCSS AEM a griglia reattiva al SPA.
Apri il progetto SPA nell’IDE
Scarica e copia i seguenti due file in src/styles
_grid.scss
utilizzo di punti di interruzione specifici SPA (desktop e dispositivi mobili) e colonne (12).Apri src/App.scss
e le importazioni ./styles/grid-init.scss
...
@import './styles/grid-init';
...
La _grid.scss
e _grid-init.scss
i file devono avere un aspetto simile a:
Ora il SPA include il CSS necessario per supportare AEM Modalità di layout per i componenti aggiunti a un contenitore AEM.
Copia le seguenti classi di utilità nel progetto dell'app 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
Ora che il SPA è stato avviato per l'integrazione con AEM, eseguiamo il SPA e vediamo che aspetto ha!
Nella riga di comando, individua la directory principale del progetto SPA
Avvia il SPA utilizzando i comandi normali (se non lo hai già fatto)
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start
Sfoglia il SPA su http://localhost:3000. Dovrebbe andare tutto bene!
Con il SPA in esecuzione http://localhost:3000, apriamolo con AEM editor SPA. Non è ancora possibile modificare nulla nel SPA, questo convalida solo il SPA in AEM.
Accedi ad AEM Author
Passa a Sites > WKND App > noi > it
Seleziona la Home page app WKND e toccare Modifica e viene visualizzata la SPA.
Passa a Anteprima utilizzo dello switcher di modalità in alto a destra
Fai clic sul SPA
Hai avviato il SPA remoto per essere AEM compatibile con SPA Editor! Ora sai come:
Ora che abbiamo raggiunto una linea di base di compatibilità con AEM editor di SPA, possiamo iniziare a introdurre aree modificabili. In primo luogo, analizziamo come inserire un componente fisso modificabile nel SPA.