Intégrer une SPA developer-workflow

Dans l’IDE de votre choix, ouvrez votre projet AEM. Ce tutoriel utilisera le code IDE Visual Studio.

Développez et examinez le dossier ui.frontend. Ouvrez le fichier ui.frontend/package.json.

Sous les dependencies, vous devriez en voir plusieurs en lien avec react, y compris react-scripts.

L’ui.frontend est une application React basée sur Créer une application React (CRA). La version de react-scripts indique quelle version de CRA est utilisée.

Il existe également plusieurs dépendances dotées du préfixe @adobe :

"@adobe/aem-react-editable-components": "~1.1.2",
"@adobe/aem-spa-component-mapping": "~1.1.0",
"@adobe/aem-spa-page-model-manager": "~1.3.3",
"@adobe/aem-core-components-react-base": "1.1.8",
"@adobe/aem-core-components-react-spa": "1.1.7",

Les modules ci-dessus constituent le SDK JS de l’éditeur de SPA d’AEM. Ils fournissent la fonctionnalité permettant de mapper les composants SPA aux composants AEM.

Vous trouverez également les éléments suivants : Composants de gestion de contenu web AEM - Mise en oeuvre principale React et Composants de gestion de contenu web AEM - Éditeur de SPA - Mise en oeuvre principale React. Il s’agit d’un ensemble de composants réutilisables de l’interface utilisateur qui correspondent aux composants AEM prêts à l’emploi. Ils sont conçus pour être utilisés en l’état. Leur mise en forme répond aux besoins de votre projet.

Le fichier package.json contient plusieurs scripts définis :

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && clientlib",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}

Il s’agit de scripts de version standard rendus disponibles par Créer une application React.

La seule différence est l’ajout de && clientlib au script build. Cette instruction supplémentaire est chargée de copier la SPA compilée dans le module ui.apps en tant que bibliothèque côté client lors d’une création.

Le module npm aem-clientlib-generator facilite cette opération.

Inspectez le fichier ui.frontend/clientlib.config.js. Ce fichier de configuration est utilisé par aem-clientlib-generator pour déterminer comment générer la bibliothèque cliente.

Inspectez le fichier ui.frontend/pom.xml. Ce fichier transforme le dossier ui.frontend en un module Maven. Le fichier pom.xml a été mis à jour pour utiliser le plug-in frontend-maven-plugin pour tester et créer l’application monopage lors d’une création Maven.

Inspectez le fichier index.js sous ui.frontend/src/index.js :

//ui.frontend/src/index.js
...
document.addEventListener('DOMContentLoaded', () => {
    ModelManager.initialize().then(pageModel => {
        const history = createBrowserHistory();
        render(
        <Router history={history}>
            <App
            history={history}
            cqChildren={pageModel[Constants.CHILDREN_PROP]}
            cqItems={pageModel[Constants.ITEMS_PROP]}
            cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
            cqPath={pageModel[Constants.PATH_PROP]}
            locationPathname={window.location.pathname}
            />
        </Router>,
        document.getElementById('spa-root')
        );
    });
});

index.js est le point d’entrée de la SPA. ModelManager est fourni par le SDK JS de l’éditeur de SPA d’AEM. Il est chargé d’appeler et d’injecter le pageModel (le contenu JSON) dans l’application.

Inspectez le fichier import-components.js à ui.frontend/src/components/import-components.js. Ce fichier importe les Composants principaux de React prêts à l’emploi et les rend disponibles pour le projet. Le chapitre suivant examine le mappage du contenu AEM aux composants SPA.

Dans le module ui.frontend, sous ui.frontend/src/components, créez un dossier nommé Header.

Créez un fichier nommé Header.js sous le dossier Header.

Remplissez Header.js avec les éléments suivants :

//Header.js
import React, {Component} from 'react';

export default class Header extends Component {

    render() {
        return (
                <header className="Header">
                    <div className="Header-container">
                        <h1>WKND</h1>
                    </div>
                </header>
        );
    }
}

Vous trouverez ci-dessus un composant React standard qui génère une chaîne de texte statique.

Ouvrez le fichier ui.frontend/src/App.js. Il s’agit du point d’entrée de l’application.

Appliquez les mises à jour suivantes à App.js pour inclure le paramètre Header statique :

  import { Page, withModel } from '@adobe/aem-react-editable-components';
  import React from 'react';
+ import Header from './components/Header/Header';

  // This component is the application entry point
  class App extends Page {
  render() {
      return (
      <div>
+       <Header />
         {this.childComponents}
         {this.childPages}
     </div>

Ouvrez un nouveau terminal et accédez au dossier ui.frontend, puis exécutez la commande npm run build :

$ cd aem-guides-wknd-spa
$ cd ui.frontend
$ npm run build
...
Compiled successfully.

File sizes after gzip:

118.95 KB (-33 B)  build/static/js/2.489f399a.chunk.js
1.11 KB (+48 B)    build/static/js/main.6cfa5095.chunk.js
806 B              build/static/js/runtime-main.42b998df.js
451 B              build/static/css/main.e57bbe8a.chunk.css

Accédez au dossier ui.apps. Sous ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-react, vous devriez constater que les fichiers SPA compilés ont été copiés à partir du dossier ui.frontend/build.

Retournez dans le terminal et accédez au dossier ui.apps. Exécutez la commande Maven suivante :

$ cd ../ui.apps
$ mvn clean install -PautoInstallPackage
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  9.629 s
[INFO] Finished at: 2020-05-04T17:48:07-07:00
[INFO] ------------------------------------------------------------------------

Vous déployez ainsi le package ui.apps vers une instance d’exécution locale d’AEM.

Ouvrez un onglet de navigateur et accédez à http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Vous devriez maintenant voir le contenu du composant Header affiché dans le SPA.

Les étapes ci-dessus sont exécutées automatiquement lors du déclenchement d’une version Maven à partir de la racine du projet (c’est-à-dire mvn clean install -PautoInstallSinglePackage). Vous devez maintenant comprendre les principes de base de l’intégration entre les bibliothèques SPA et AEM côté client. Notez que vous pouvez toujours modifier et ajouter des composants Text dans AEM, sous le composant Header statique.

Revenez à l’IDE et ouvrez le fichier ui.frontend/package.json.

Recherchez une ligne comme celle-ci :

"proxy": "http://localhost:4502",

Créer une application React fournit un mécanisme facile pour traiter les requêtes d’API en tant que proxy. Toutes les requêtes inconnues sont traitées par proxy via localhost:4502, le démarrage rapide local AEM.

Ouvrez une fenêtre de terminal et accédez au dossier ui.frontend. Exécutez la commande npm start :

$ cd ui.frontend
$ npm start
...
Compiled successfully!

You can now view wknd-spa-react in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.86.136:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Ouvrez un nouvel onglet du navigateur (s’il n’est pas déjà ouvert) et accédez à http://localhost:3000/content/wknd-spa-react/us/en/home.html.

Vous devriez voir le même contenu que dans AEM, mais sans aucune fonctionnalité de création activée.

Revenez à l’IDE et créez un fichier nommé Header.css dans le dossier src/components/Header.

Remplissez le Header.css avec les éléments suivants :

.Header {
    background-color: #FFEA00;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}

.Header-container {
    display: flex;
    max-width: 1024px;
    margin: 0 auto;
    padding: 12px;
}

.Header-container h1 {
    letter-spacing: 0;
    font-size: 48px;
}

Rouvrez Header.js et ajoutez la ligne suivante pour référencer Header.css :

  //Header.js
  import React, {Component} from 'react';
+ require('./Header.css');

Enregistrez les modifications.

Accédez à http://localhost:3000/content/wknd-spa-react/us/en/home.html pour que les modifications de style soient automatiquement répercutées.

Ouvrez le fichier Page.css dans ui.frontend/src/components/Page. Apportez les modifications suivantes pour résoudre la marge intérieure :

.page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 12px;
  padding-top: 50px;
}

Revenez au navigateur à l’adresse http://localhost:3000/content/wknd-spa-react/us/en/home.html. Les modifications apportées à l’application devraient immédiatement être répercutées.

Vous pouvez continuer à effectuer des mises à jour de contenu dans AEM et les voir répercutées dans webpack-dev-server, car nous effectuons un proxy sur le contenu.

Arrêtez le serveur de développement Webpack avec ctrl+c dans le terminal.

Accédez à la racine du projet (aem-guides-wknd-spa) et déployez le projet vers AEM à l’aide de Maven :

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Accédez à http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Vous devriez constater que l’Header et les styles mis à jour ont été appliqués.

Maintenant que la SPA mise à jour est dans AEM, vous pouvez reprendre la création.

Revenez à l’IDE, accédez à ui.frontend/public et ajoutez un nouveau dossier nommé mock-content.

Créez un fichier nommé mock.model.json sous ui.frontend/public/mock-content.

Dans le navigateur, accédez à http://localhost:4502/content/wknd-spa-react/us/en.model.json.

Il s’agit du fichier JSON exporté par AEM qui dirige l’application. Copiez la sortie JSON.

Collez la sortie JSON de l’étape précédente dans le fichier mock.model.json.

Ouvrez le fichier index.html dans ui.frontend/public/index.html. Mettez à jour la propriété de métadonnées du modèle de page AEM pour qu’elle pointe vers une variable %REACT_APP_PAGE_MODEL_PATH% :

    <!-- AEM page model -->
    <meta
       property="cq:pagemodel_root_url"
       content="%REACT_APP_PAGE_MODEL_PATH%"
    />

L’utilisation d’une variable pour la valeur du cq:pagemodel_root_url facilite le changement entre le proxy et le modèle JSON simulé.

Ouvrez le fichier ui.frontend/.env.development et effectuez les mises à jour suivantes pour mettre en commentaire la valeur précédente pour REACT_APP_PAGE_MODEL_PATH et REACT_APP_API_HOST :

+ PUBLIC_URL=/
- PUBLIC_URL=/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react/resources

- REACT_APP_PAGE_MODEL_PATH=/content/wknd-spa-react/us/en.model.json
+ REACT_APP_PAGE_MODEL_PATH=/mock-content/mock.model.json

- REACT_APP_API_HOST=http://localhost:4502
+ #REACT_APP_API_HOST=http://localhost:4502

REACT_APP_ROOT=/content/wknd-spa-react/us/en/home.html

En cas d’exécution, arrêtez le webpack-dev-server. Démarrez le webpack-dev-server depuis le terminal :

$ cd ui.frontend
$ npm start

Accédez à http://localhost:3000/content/wknd-spa-react/us/en/home.html et vous devriez voir la SPA avec le même contenu utilisé dans le proxy JSON.

Apportez une petite modification au fichier mock.model.json créé précédemment. Vous devriez voir immédiatement la mise à jour du contenu dans le webpack-dev-server.