Amorcer la SPA distante pour l’éditeur de SPA

Ouvrez le projet SPA distante sous ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app dans votre IDE

Ouvrez le fichier .env.development.

Dans le fichier, prêtez une attention particulière aux clés, puis effectuez les mises à jour suivant les besoins :

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

N’oubliez pas que les variables d’environnement personnalisées dans React doivent comporter le préfixe REACT_APP_.

• REACT_APP_HOST_URI : le schéma et l’hôte du service AEM auquel la SPA distante se connecte.

  • Cette valeur change selon l’environnement AEM (local, de développement, d’évaluation ou de production) et le type de service AEM (création ou publication).

• REACT_APP_USE_PROXY : en indiquant au serveur de développement React de traiter les requêtes AEM en tant que proxy, telles que /content, /graphql, .model.json, en utilisant le module http-proxy-middleware, cela permet d’éviter les problèmes CORS pendant le développement.

• REACT_APP_AUTH_METHOD : méthode d’authentification pour les requêtes diffusées par AEM. Les options sont 'service-token', 'dev-token', 'basic' ou vide pour un cas d’utilisation sans authentification.

  • Requis pour une utilisation avec l’instance de création AEM
  • Peut être requis pour une utilisation avec l’instance de publication AEM (si le contenu est protégé)
  • Le développement par rapport au SDK AEM prend en charge les comptes locaux via l’authentification de base. Il s’agit de la méthode utilisée dans ce tutoriel.
  • Lors de l’intégration à AEM as a Cloud Service, utilisez les jetons d’accès.

• REACT_APP_BASIC_AUTH_USER : Nom d’utilisateur AEM utilisé par la SPA pour l’authentification lors de la récupération du contenu AEM.

• REACT_APP_BASIC_AUTH_PASS : Mot de passe AEM utilisé par la SPA pour l’authentification lors de la récupération du contenu AEM.

Ouvrez le projet SPA distante dans votre IDE

Ouvrez le fichier src/index.js.

Ajoutez l’importation ModelManager et initialisez-la avant l’appel de 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 />);

Ouvrez le projet SPA distante dans votre IDE

Ouvrez le fichier dans src/proxy/setupProxy.spa-editor.auth.basic.js.

Mettez à jour le fichier avec le code suivant :

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();
    });
};

Le fichier setupProxy.spa-editor.auth.basic.js doit se présenter comme suit :

Cette configuration de proxy effectue deux opérations principales :

1. Les requêtes spécifiques effectuées sur la SPA (http://localhost:3000) sont mises en proxy vers AEM (http://localhost:4502)

   • Seules les requêtes dont les chemins correspondent à des modèles indiquant qu’elles doivent être diffusés par AEM sont mises en proxy, comme défini dans toAEM(path, req).
   • Les chemins d’accès à la SPA sont réécrits vers leurs pages AEM correspondantes, comme défini dans pathRewriteToAEM(path, req).

2. Des en-têtes CORS sont ajoutés à toutes les requêtes pour permettre l’accès au contenu AEM, tel que défini par res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);.

   • Si les en-têtes ne sont pas ajoutés, des erreurs CORS se produisent lors du chargement du contenu AEM dans la SPA.

Ouvrez le fichier src/setupProxy.js.

Examinez la ligne pointant vers le fichier de configuration du 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');
...

Ouvrez le projet SPA dans votre IDE.

Ouvrez votre fichier de variables d’environnement SPA src/.env.development et ajoutez une variable pour l’URI public de l’application SPA :

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

Lors d’un déploiement sur AEM as a Cloud Service, vous devez procéder de la même manière pour les fichiers .env.

Ouvrez le fichier src/App.js.

Importez l’URI public de l’application SPA à partir des variables d’environnement de l’application SPA.

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

Ajoutez le préfixe REACT_APP_PUBLIC_URI au logo WKND <img src=.../> pour forcer la résolution contre la SPA

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

Faites de même pour charger l’image dans 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>);
    }
}

Ainsi que pour les deux instances du bouton Précédent dans 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" />
    }
}

Ouvrez le projet SPA dans votre IDE.

Téléchargez et copiez les deux fichiers suivants dans src/styles.

• _grid.scss
  • Générateur SCSS de grille réactive AEM
• _grid-init.scss
  • Appelle _grid.scss à l’aide des points d’arrêt spécifiques de l’application SPA (sur bureau et mobile) et des colonnes (12).

Ouvrez src/App.scss et importez ./styles/grid-init.scss.

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

Sur la ligne de commande, accédez à la racine du projet SPA.

Démarrez la SPA à l’aide des commandes normales (si vous ne l’avez pas déjà fait).

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

Accédez à la SPA à l’adresse http://localhost:3000. Votre site doit s’afficher, quelle merveille !

Connectez-vous au service de création AEM.

Accédez à Sites > Application WKND > fr > fr

Sélectionnez la Page d’accueil de l’application WKND et cliquez sur Modifier pour afficher la SPA.

Passez à l’aperçu en utilisant le sélecteur de mode en haut à droite.

Cliquez sur la SPA.