Prima di poter aggiungere le aree modificabili all’SPA remoto, è necessario avviarle con l’SDK JavaScript dell’editor SPA dell’AEM e con alcune altre configurazioni.
In primo luogo, esaminare AEM SPA dipendenze npm per il progetto React e installarle.
@adobe/aem-spa-page-model-manager
: fornisce l’API per recuperare i contenuti dall’AEM.@adobe/aem-spa-component-mapping
: fornisce l’API che mappa il contenuto dell’AEM ai componenti SPA.@adobe/aem-react-editable-components
v2 : fornisce un’API per la creazione di componenti SPA personalizzati e fornisce implementazioni comuni, 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 all’SPA remoto in modo che sappia come interagire con l’AEM.
Apri progetto SPA remoto all’indirizzo ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
nell’IDE
Apri il file .env.development
Nel file, presta particolare attenzione alle chiavi e, se necessario, aggiorna:
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 al quale l’SPA remoto si connette.
REACT_APP_USE_PROXY
: questo evita i problemi CORS durante lo sviluppo dicendo al server di sviluppo react di proxy delle richieste AEM 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 lascia vuoto per i casi di utilizzo senza autenticazione
REACT_APP_BASIC_AUTH_USER
: AEM nome utente dall’SPA per l’autenticazione durante il recupero del contenuto AEM.REACT_APP_BASIC_AUTH_PASS
: AEM password dall’SPA per l’autenticazione durante il recupero del contenuto AEM.Con le dipendenze npm dell’SPA dell’AEM disponibili per l’app, inizializza AEM ModelManager
nel file del progetto index.js
prima di ReactDOM.render(...)
viene richiamato.
Il ModelManager è responsabile della connessione all’AEM per recuperare contenuti modificabili.
Aprire il progetto SPA remoto nell'IDE
Apri il file src/index.js
Aggiungi importazione ModelManager
e inizializzarlo 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 />);
Il src/index.js
il file dovrebbe avere un aspetto simile a:
Quando si crea un SPA modificabile, è meglio impostare un’ delega interna all'SPA, configurato per instradare le richieste appropriate all’AEM. Questa operazione viene eseguita utilizzando http-proxy-middleware modulo npm, già installato dall’app GraphQL WKND di base.
Aprire il progetto SPA remoto 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();
});
};
Il setupProxy.spa-editor.auth.basic.js
il file dovrebbe avere un aspetto simile a:
Questa configurazione proxy esegue due operazioni principali:
http://localhost:3000
) all'AEM http://localhost:4502
toAEM(path, req)
.pathRewriteToAEM(path, req)
res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
Apri il file src/setupProxy.js
Rivedi la riga 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 dell'SPA.
Le risorse SPA statiche, come il logo WKND e la grafica Loading, devono avere gli URL src aggiornati per forzarne il caricamento dall’host SPA remoto. Se relativo, quando l’SPA viene caricato nell’editor SPA per la creazione di, per impostazione predefinita questi URL utilizzano l’host AEM anziché l’SPA, generando 404 richieste come illustrato nell’immagine seguente.
Per risolvere questo problema, crea una risorsa statica ospitata dall’SPA remoto utilizzando percorsi assoluti che includano l’origine SPA remota.
Aprire il progetto SPA nell’IDE
Aprire il file delle variabili di ambiente SPA src/.env.development
e aggiungi una variabile per l’URI pubblico dell’SPA:
...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000
Quando si distribuisce a AEM as a Cloud Service, è necessario che lo stesso avvenga per il .env
file.
Apri il file src/App.js
Importare l’URI pubblico dell’SPA dalle variabili di ambiente SPA
const { REACT_APP_PUBLIC_URI } = process.env;
function App() { ... }
Aggiungi il prefisso al logo WKND <img src=.../>
con REACT_APP_PUBLIC_URI
imporre la risoluzione delle crisi contro l'SPA.
<img src={REACT_APP_PUBLIC_URI + '/' + logo} className="logo" alt="WKND Logo"/>
Effettua 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 indietro 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" />
}
}
Il App.js
, Loading.js
, e AdventureDetails.js
i file dovrebbero avere un aspetto simile a:
Per supportare la modalità di layout dell’Editor SPA per le aree modificabili nell’SPA, è necessario integrare i CSS della griglia reattiva dell’AEM nell’SPA. Non preoccuparti: questo sistema di griglia è applicabile solo ai contenitori modificabili e puoi utilizzare il sistema di griglia desiderato per gestire il layout del resto dell’SPA.
Aggiungere all’SPA i file SCSS della griglia reattiva dell’AEM.
Aprire il progetto SPA nell’IDE
Scarica e copia i due file seguenti in src/styles
_grid.scss
utilizzando le colonne (12) e i punti di interruzione specifici dell’SPA (desktop e mobile).Apri src/App.scss
e importa ./styles/grid-init.scss
...
@import './styles/grid-init';
...
Il _grid.scss
e _grid-init.scss
i file dovrebbero avere un aspetto simile a:
Ora l’SPA include il CSS necessario per supportare la modalità di layout AEM 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 l'SPA è stato avviato per l'integrazione con l'AEM, facciamo partire l'SPA e vediamo come si presenta!
Dalla riga di comando, passa alla directory principale del progetto SPA
Avviare l’SPA con i comandi normali (se non lo si è già fatto)
$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start
Sfoglia SPA su http://localhost:3000. Tutto dovrebbe avere un bell'aspetto!
Con l'SPA in funzione http://localhost:3000, apriamolo utilizzando l’Editor SPA dell’AEM. Non è ancora possibile modificare nulla nell’SPA, il che convalida solo l’SPA nell’AEM.
Accedi ad AEM Author
Accedi a Sites > App WKND > us > it
Seleziona la Home page dell’app WKND e tocca Modifica e viene visualizzato l'SPA.
Passa a Anteprima utilizzo del commutatore modalità in alto a destra
Fai clic intorno all’SPA
Hai avviato l’SPA remoto affinché sia compatibile con l’Editor SPA dell’AEM. Ora sai come:
Ora che abbiamo raggiunto una linea di base di compatibilità con l'AEM SPA Editor, possiamo iniziare a introdurre aree modificabili. Dapprima esaminiamo come posizionare un componente modificabile fisso dell'SPA.