Bootstrap del SPA remoto per l'editor SPA

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.

Scarica la sorgente dell’app WKND

Se non lo hai già fatto, scarica il codice sorgente dell’app WKND da Github.com e cambia il ramo contenente le modifiche alle SPA eseguite in questa esercitazione.

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

Aggiungi dipendenze npm AEM Editor JS SDK

Innanzitutto, aggiungi AEM dipendenze npm SPA al progetto React.

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install --save \
    @adobe/aem-spa-page-model-manager \
    @adobe/aem-spa-component-mapping \
    @adobe/aem-react-editable-components \
    @adobe/aem-core-components-react-base \
    @adobe/aem-core-components-react-spa

@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 su componenti SPA.
@adobe/aem-react-editable-components fornisce un’API per la creazione di componenti SPA personalizzati e implementazioni di uso comune, come il componente AEMPage React.
@adobe/aem-core-components-react-base fornisce una suite di componenti React pronti per l’uso che si integrano perfettamente con i componenti core AEM WCM e che sono agnostici dell’editor di SPA. Questi includono principalmente componenti di contenuto quali:
- Titolo
- Testo
- Breadcrumb
- E così via.
@adobe/aem-core-components-react-spa fornisce una suite di componenti React pronti all’uso che si integrano perfettamente con i componenti core di AEM WCM e richiedono però l’editor SPA. Questi contengono principalmente componenti che contengono componenti di contenuto di @adobe/aem-core-components-react-base, ad esempio:
- Contenitore
- Carosello
- e così via.

Esamina le variabili di ambiente SPA

Diverse variabili di ambiente devono essere esposte al SPA remoto in modo che sappia interagire con AEM.

Apri il progetto di SPA remota all'indirizzo ~/Code/wknd-app/aem-guides-wknd-graphql/react-app nell'IDE
Aprire il file .env.development
Aggiungi il file , prestando particolare attenzione alle chiavi:
```
REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_AUTHORIZATION=admin:admin
```
Le variabili di ambiente personalizzate in React devono avere il prefisso REACT_APP_.
- REACT_APP_AEM_URI: lo schema e l'host del servizio AEM a cui il SPA remoto si connette.
  - Questo valore cambia in base all’ambiente AEM (locale, sviluppatore, stage o produzione) e al tipo di servizio AEM (autore e pubblicazione)
- REACT_APP_AEM_AUTH: le credenziali utilizzate dal SPA si autenticano per AEM e recuperare il contenuto.
  - Richiesto per l'utilizzo con AEM Author
  - Possibile utilizzo con AEM Publish (se il contenuto è protetto)
  - Lo sviluppo rispetto all’SDK AEM supporta gli account locali tramite l’autenticazione di base. Questo è il metodo utilizzato in questa esercitazione.
  - Durante l'integrazione con AEM come Cloud Service, utilizza token di accesso

Integrare l’API ModelManager

Con le dipendenze npm SPA AEM disponibili per l’app, inizializza AEM ModelManager nel index.js del progetto prima che venga richiamato ReactDOM.render(...).

La ModelManager è responsabile della connessione a AEM per il recupero di contenuto modificabile.

Apri il progetto Remote SPA nell’IDE
Aprire il file src/index.js

Aggiungi l’importazione ModelManager e inizializzala prima della chiamata ReactDOM.render(..) ,

...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";

// Initialize the ModelManager before invoking ReactDOM.render(...).
ModelManager.initializeAsync();

ReactDOM.render(...);

Il file src/index.js deve essere simile al seguente:

src/index.js

Configurare un proxy SPA interno

Quando si acquistano contenuti modificabili da AEM nel SPA, è consigliabile impostare un proxy interno nella SPA, configurato per indirizzare le richieste appropriate a AEM. Questo viene fatto utilizzando il modulo npm http-proxy-middleware, che è già installato dall'app GraphQL WKND di base.

Apri il progetto Remote SPA nell’IDE
Crea un file in src/proxy/setupProxy.spa-editor.auth.basic.js

Aggiungi al file il codice seguente:

const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_AUTHORIZATION } = 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('/graphq') ||
            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_AUTHORIZATION,
                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 file setupProxy.spa-editor.auth.basic.js deve essere simile al seguente:

src/proxy/setupProxy.spa-editor.auth.basic.js

Questa configurazione proxy esegue due operazioni principali:

Richieste specifiche per proxy effettuate al SPA, da http://localhost:3000 a AEM http://localhost:4502
- Proxies richiede solo i cui percorsi corrispondono a pattern che indicano che devono essere serviti da AEM, come definito in toAEM(path, req).
- Riscrive SPA percorsi alle AEM delle relative controparti, come definito in pathRewriteToAEM(path, req)
Aggiunge intestazioni CORS a tutte le richieste per consentire l’accesso AEM contenuto, come definito da res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
- Se non viene aggiunto, si verificano errori CORS durante il caricamento AEM contenuto nella SPA.

Aprire il file src/setupProxy.js
Aggiungi un commento alla riga const proxy = require('./proxy/setupProxy.auth.basic')

Aggiungi una riga, indicando il nuovo file di configurazione proxy:

// Proxy configuration for SPA Editor (and GraphQL) using Basic Auth
const proxy = require('./proxy/setupProxy.spa-editor.auth.basic')

Il file setupProxy.js deve essere simile al seguente:

src/setupProxy.js

Eventuali modifiche apportate ai file src/setupProxy.js o ai file a cui si fa riferimento richiedono un riavvio del SPA.

Risorsa SPA statica

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.

Risorse statiche interrotte

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 a AEM come Cloud Service, devi ottenere lo stesso per i .env file corrispondenti.
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() { ... }

Aggiungi 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"/>
```

Fai lo stesso 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 le 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" />
    }
}

I file App.js, Loading.js e AdventureDetails.js devono avere un aspetto simile al seguente:

Risorse statiche

AEM griglia reattiva

Per supportare la modalità di layout di SPA Editor per le aree modificabili nell’SPA, è necessario integrare CSS AEM griglia reattiva nell’SPA. Non preoccupatevi - questo sistema a griglia sarà solo per i contenitori modificabili e potete utilizzare il vostro sistema a griglia di scelta per guidare il layout del resto del vostro 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
  - Generatore SCSS AEM a griglia reattiva
- _grid-init.scss
  - Richiama _grid.scss utilizzando i punti di interruzione SPA specifici (desktop e mobile) e le colonne (12).
Apri src/App.scss e importa ./styles/grid-init.scss
```
...
@import './styles/grid-init';
...
```

I file _grid.scss e _grid-init.scss devono avere l'aspetto seguente:

SCSS a griglia reattiva AEM

Ora il SPA include il CSS necessario per supportare AEM Modalità di layout per i componenti aggiunti a un contenitore AEM.

Avvia il SPA

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 (esegui npm install se non lo hai già fatto)

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install 
$ npm run start

Sfoglia il SPA su http://localhost:3000. Dovrebbe andare tutto bene!

SPA in esecuzione su http://localhost:3000

Apri il SPA in AEM Editor SPA

Con l'SPA in esecuzione su http://localhost:3000, aprila utilizzando AEM Editor SPA. Non è ancora possibile modificare nulla nel SPA, questo convalida solo il SPA in AEM.

Accedi ad AEM Author
Passa a Sites > App WKND > us > en
Seleziona la Home page dell'app WKND e tocca Modifica per visualizzare il SPA.
Passa a Anteprima utilizzando il commutatore di modalità in alto a destra
Fai clic sul SPA

Congratulazioni!

Hai avviato il SPA remoto per essere AEM compatibile con SPA Editor! Ora sai come:

Aggiungi al progetto SPA le dipendenze npm dell’SDK JS dell’editor di SPA AEM
Configurare le variabili di ambiente SPA
Integra l’API ModelManager con il SPA
Imposta un proxy interno per l’SPA in modo da indirizzare le richieste di contenuto appropriate a AEM
Risolvere i problemi relativi alla risoluzione delle risorse SPA statiche nel contesto dell'editor SPA
Aggiungi CSS AEM griglia reattiva per supportare il layout in AEM contenitori modificabili

Passaggi successivi

Ora che abbiamo raggiunto una linea di base di compatibilità con AEM editor di SPA, possiamo iniziare a introdurre aree modificabili. In primo luogo, vedremo come inserire un componente modificabile fisso nel SPA.

Bootstrap del SPA remoto per l'editor SPA

Scarica la sorgente dell’app WKND

Aggiungi dipendenze npm AEM Editor JS SDK

Esamina le variabili di ambiente SPA

Integrare l’API ModelManager

Configurare un proxy SPA interno

Risorsa SPA statica

AEM griglia reattiva

Avvia il SPA

Apri il SPA in AEM Editor SPA

Congratulazioni!

Passaggi successivi

Risorse su adobe.com

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe