La configuration rapide est une présentation accélérée qui illustre comment installer et exécuter l’application WKND et en tant que SPA distant, et la créer à l’aide d’AEM Éditeur de ressources.
La configuration rapide vous emmène directement à l’état final de ce tutoriel.
Présentation vidéo de la configuration rapide
Ce tutoriel nécessite les éléments suivants :
Ce tutoriel suppose :
~/Code/wknd-app
http://localhost:4502
admin
local avec le mot de passe admin
http://localhost:3000
Téléchargez et installez le SDK AEM Quickstart sur le port 4502, avec les informations d’identification admin/admin
par défaut.
Décompressez le SDK AEM sur ~/aem-sdk
Exécution du fichier Jar de démarrage rapide du SDK AEM
$ java -jar aem-sdk-quickstart-xxx.jar
# Provide `admin` as the admin user's password
AEM SDK démarre et se lance automatiquement le http://localhost:4502. Connectez-vous à l’aide des informations d’identification suivantes :
admin
admin
Ce tutoriel dépend du projet WKND 0.3.0+ (pour le contenu).
aem-guides-wknd.all.x.x.x.zip
admin
.aem-guides-wknd.all.x.x.x.zip
téléchargé à l’étape 1aem-guides-wknd.all-x.x.x.zip
Pour effectuer une configuration rapide, AEM modules contenant la configuration et le contenu de l’AEM finale du tutoriel sont fournis.
admin
.wknd-app.all.x.x.x.zip
téléchargé à l’étape 1wknd-app.all.x.x.x.zip
wknd-app.ui.content.sample.x.x.x.zip
téléchargé à l’étape 2wknd-app.ui.content.sample.x.x.x.zip
Téléchargez le code source de l’application WKND à partir de Github.com et basculez la branche contenant les modifications vers le SPA effectué dans ce tutoriel.
$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql
À partir de la racine du projet, installez les dépendances npm SPA projets et exécutez l’application.
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start
En cas d'erreur lors de l'exécution de npm install
, procédez comme suit :
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start
Vérifiez que le SPA s’exécute à http://localhost:3000.
Avant de créer du contenu, organisez les fenêtres de votre navigateur de sorte qu’AEM Author (http://localhost:4502
) soit à gauche et que la SPA distante (http://localhost:3000
) s’exécute à droite. Cet arrangement vous permet de voir comment les modifications apportées au contenu AEM sont immédiatement répercutées dans le SPA.
admin
http://localhost:3000
et vérifiez que les modifications sont répercutées.http://localhost:3000
et vérifiez que les modifications sont répercutées.http://localhost:3000
et vérifiez que les modifications sont répercutées.Les nouvelles pages d’AEM sous la Page d’accueil de l’application WKND > Adventure doivent avoir un nom de page AEM qui correspond au nom du fragment de contenu de l’aventure correspondante. En effet, l’itinéraire SPA vers AEM mappage de page est basé sur le dernier segment de l’itinéraire, qui est le nom du fragment de contenu.
Vous venez d’apprendre rapidement comment l’éditeur de SPA d’AEM peut améliorer votre avec des zones contrôlées et modifiables ! Si vous êtes intéressé, consultez le reste du tutoriel, mais assurez-vous de commencer à nouveau, puisque dans cette configuration rapide, votre environnement de développement local est maintenant à l’état final du tutoriel !