Bootstrap l’SPA remoto per l’editor SPA

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.

Installare le dipendenze npm dell’SDK JS per l’editor SPA AEM

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

Rivedere le variabili di ambiente dell’SPA

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.
  - Questo valore cambia in base all’ambiente AEM (locale, di sviluppo, stage o produzione) e al tipo di servizio AEM (authoring vs. pubblicazione)
- 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
  - Richiesto per l’utilizzo con AEM Author
  - Possibile utilizzo con AEM Publish (se il contenuto è protetto)
  - Lo sviluppo rispetto all’SDK dell’AEM supporta gli account locali tramite Autenticazione di base. Questo è il metodo utilizzato in questa esercitazione.
  - Durante l’integrazione con AEM as a Cloud Service, utilizzare token di accesso
- 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.

Integrare l’API ModelManager

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:

src/index.js

Configurare un proxy SPA interno

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:

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

Questa configurazione proxy esegue due operazioni principali:

Invia richieste specifiche per approssimazione all'SPA (http://localhost:3000) all'AEM http://localhost:4502
- Vengono proxy solo le richieste i cui percorsi corrispondono a pattern che indicano che devono essere servite dall’AEM, come definito in toAEM(path, req).
- Riscrive i percorsi dell’SPA sulle relative pagine AEM, come definito in pathRewriteToAEM(path, req)
Aggiunge intestazioni CORS a tutte le richieste per consentire l’accesso al contenuto AEM, come definito da res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
- Se non viene aggiunto, si verificano errori CORS durante il caricamento del contenuto AEM nell’SPA.

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.

Risorsa SPA statica

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.

Risorse statiche interrotte

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:

Risorse statiche

Griglia reattiva AEM

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
  - Il generatore di SCSS della griglia reattiva dell'AEM
- _grid-init.scss
  - Richiama _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:

SCSS della griglia reattiva dell’AEM

Ora l’SPA include il CSS necessario per supportare la modalità di layout AEM per i componenti aggiunti a un contenitore AEM.

Classi di utilità

Copia le seguenti classi di utilità nel progetto dell’app React.

RoutedLink.js a ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
EditorPlaceholder.js a ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
withConditionalPlaceholder.js a ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
withStandardBaseCssClass.js a ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js

Classi di utilità SPA remote

Avviare l’SPA

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!

SPA in esecuzione su http://localhost:3000

Aprire l’SPA nell’Editor SPA dell’AEM

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

Congratulazioni.

Hai avviato l’SPA remoto affinché sia compatibile con l’Editor SPA dell’AEM. Ora sai come:

Aggiungere al progetto SPA le dipendenze npm dell’SDK JS per l’editor SPA dell’AEM
Configurare le variabili di ambiente SPA
Integrare l’API ModelManager con l’SPA
Imposta un proxy interno per l’SPA in modo che instradi le richieste di contenuti appropriate all’AEM
Risolvere i problemi relativi alla risoluzione di risorse SPA statiche nel contesto dell’Editor SPA
Aggiungere CSS griglia reattiva AEM per supportare il layout nei contenitori modificabili AEM

Passaggi successivi

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.

Bootstrap l’SPA remoto per l’editor SPA

Installare le dipendenze npm dell’SDK JS per l’editor SPA AEM

Rivedere le variabili di ambiente dell’SPA

Integrare l’API ModelManager

Configurare un proxy SPA interno

Risorsa SPA statica

Griglia reattiva AEM

Classi di utilità

Avviare l’SPA

Aprire l’SPA nell’Editor SPA dell’AEM

Congratulazioni.

Passaggi successivi

Risorse Business.Adobe.com

In questa pagina

Visualizza successivo:

Scopri

Documentazione

Community

Assistenza

Risorse

Account Adobe

Adobe