Bootstrap l’SPA remoto per l’editor SPA

Apri progetto SPA remoto in ~/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: schema e host del servizio AEM a cui 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 (Author vs. Publish)

• REACT_APP_USE_PROXY: questo evita i problemi CORS durante lo sviluppo indicando al server di sviluppo react di proxy le richieste AEM come /content, /graphql, .model.json utilizzando il modulo http-proxy-middleware.

• 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

  • Necessario 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, utilizza token di accesso

• REACT_APP_BASIC_AUTH_USER: AEM username da parte dell'SPA da autenticare durante il recupero del contenuto AEM.

• AEM REACT_APP_BASIC_AUTH_PASS: la password dell'SPA per l'autenticazione durante il recupero del contenuto AEM.

Aprire il progetto SPA remoto nell'IDE

Apri il file src/index.js

Aggiungi l'importazione ModelManager e inizializzala prima della chiamata 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 />);

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 file setupProxy.spa-editor.auth.basic.js deve essere simile al seguente:

Questa configurazione proxy esegue due operazioni principali:

1. Invia richieste specifiche al SPA (http://localhost:3000) all'AEM http://localhost:4502

   • Esegue il proxy solo delle richieste i cui percorsi corrispondono ai pattern che indicano che devono essere servite dall'AEM, come definito in toAEM(path, req).
   • Riscrive i percorsi SPA nelle pagine AEM corrispondenti, come definito in pathRewriteToAEM(path, req)

2. 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

Rivedere la riga che punta al file di configurazione proxy setupProxy.spa-editor.auth.basic:

...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...

Aprire il progetto SPA nell’IDE

Aprire il file delle variabili di ambiente SPA src/.env.development e aggiungere una variabile per l'URI pubblico SPA:

...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000

Durante la distribuzione in AEM as a Cloud Service, è necessario fare lo stesso per i file .env corrispondenti.

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 al logo WKND <img src=.../> il prefisso REACT_APP_PUBLIC_URI per forzare la risoluzione contro l'SPA.

<img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>

Eseguire la stessa operazione per il caricamento dell'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" />
    }
}

Aprire il progetto SPA nell’IDE

Scaricare e copiare 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 i punti di interruzione (desktop e mobile) e le colonne (12) specifici dell'SPA.

Apri src/App.scss e importa ./styles/grid-init.scss

...
@import './styles/grid-init';
...

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 l'SPA su http://localhost:3000. Tutto dovrebbe avere un bell'aspetto!

Accedi a AEM Author

Passa a Sites > App WKND > us > en

Seleziona la home page dell'app WKND e tocca Modifica per visualizzare l'SPA.

Passa a Anteprima utilizzando il commutatore modalità in alto a destra

Fai clic intorno all’SPA