Show Menu
TOPICS×

Génération front-end pour les applications monopage React

Ce document explique les détails du projet créé lors de l’utilisation de l’archétype pour créer une application monopage (SPA) basée sur l’infrastructure React, c’est-à-dire, lorsque vous définissez l’option
frontendModule
sur
react
.

Présentation

Ce projet a été démarré avec create-response-app .
Cette application est créée pour consommer le modèle AEM d’un site. Elle génère automatiquement la mise en page à l’aide des composants de l’application d’assistance à partir du package @adobe/cq-response-editable-components .

Scripts

Dans le répertoire du projet, vous pouvez exécuter les commandes suivantes :

npm start

npm start
Cette commande exécute l’application en mode de développement en transmettant un proxy au modèle JSON à partir d’une instance AEM locale s’exécutant sur http://localhost:4502. Cela suppose que le projet entier a été déployé sur AEM au moins une fois (
mvn clean install -PautoInstallPackage
à la racine du projet).
Après l’exécution de
npm start
dans le répertoire ui.frontend , votre application s’ouvre automatiquement dans votre navigateur (au chemin d’accès
http://localhost:3000/content/<appId>/<country>/<language>/home.html
). Si vous effectuez des modifications, la page se recharge.
Si des erreurs liées à CORS s’affiche, vous souhaiterez peut-être configurer AEM comme suit :
  1. Accédez au gestionnaire de configuration (http://localhost:4502/system/console/configMgr).
  2. Ouvrez la configuration pour « Adobe Granite Cross-Origin Resource Sharing Policy ».
  3. Créez une configuration avec les valeurs supplémentaires suivantes :
    • Origines autorisées : http://localhost:3000
    • En-têtes pris en charge : Autorisation
    • Méthodes autorisées : OPTIONS

test npm

npm test
Cette commande lance le programme d’exécution du test en mode de espion interactif. Pour plus d’informations, consultez la documentation React sur l’exécution des tests .

npm run build

npm run build
Cette commande crée l’application pour production dans le dossier de génération. Elle place React en mode de production et optimise la génération pour des performances optimales. Pour plus d’informations, consultez la documentation React sur le déploiement .
De plus, une bibliothèque cliente AEM est générée à partir de l’application à l’aide du package aem-clientlib-generator .

Prise en charge des navigateurs

Par défaut, ce projet utilise l’option par défaut Browserslist pour identifier les navigateurs cible. De plus, il inclut des polyfills pour les fonctionnalités de langage moderne afin de prendre en charge les navigateurs plus anciens (par exemple, Internet Explorer 11). Si la prise en charge de ces navigateurs n’est pas obligatoire, les dépendances de polyfills et les importations peuvent être supprimées.

Fractionnement de code

L’application React est configurée pour utiliser le fractionnement de code par défaut. Lors de la création de l’application pour production, le code est généré en plusieurs blocs :
$ ls build/static/js 2.5b77f553.chunk.js 2.5b77f553.chunk.js.map main.cff1a559.chunk.js main.cff1a559.chunk.js.map runtime~main.a8a9905a.js runtime~main.a8a9905a.js.map
Charger les blocs uniquement lorsqu’ils sont requis peut améliorer considérablement les performances de l’application.
Pour que cette fonctionnalité fonctionne avec AEM, l’application doit être en mesure d’identifier les fichiers JS et CSS à demander au code HTML généré par AEM. Pour ce faire, vous pouvez utiliser la clé « entrypoints » dans le fichier asset-manifest.json. Le fichier est analysé dans clientlib.config.js et seuls les fichiers de point d’entrée sont regroupés dans la bibliothèque cliente. Les fichiers restants sont placés dans le répertoire des ressources de la bibliothèque cliente et seront demandés dynamiquement. Ils ne seront donc chargés que lorsqu’ils seront réellement nécessaires.
Pour plus d’informations sur l’utilisation des bibliothèques clientes AEM par l’archétype du projet, consultez la documentation générale du module ui.frontend .