Prévisualiser une extension locale de l’éditeur universel

Pour prévisualiser une extension de l’éditeur universel pendant le développement, vous devez :

Exécuter l’extension localement

Cela implique que vous avez déjà créé une extension de l’éditeur universel et que vous souhaitez la prévisualiser pendant les tests et le développement en local.

Démarrez votre extension de l’éditeur universel avec :

$ aio app run

Vous verrez une sortie du type :

To view your local application:
  -> https://localhost:9080
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

Votre extension est exécutée à l’adresse https://localhost:9080 par défaut.

Accepter le certificat auto-signé

L’éditeur universel requiert HTTPS pour charger les extensions. Étant donné que le développement local utilise un certificat auto-signé, votre navigateur doit l’approuver explicitement.

Ouvrez un nouvel onglet de navigateur et accédez à la sortie de l’URL de l’extension locale à l’aide de la commande aio app run :

https://localhost:9080

Votre navigateur affiche un avertissement de certificat. Acceptez le certificat pour continuer.

Une fois accepté, la page d’espace réservé de l’extension locale s’affiche :

Ouvrir une page dans l’éditeur universel

Ouvrez l’éditeur universel via la console de l’éditeur universel ou en modifiant une page dans AEM Sites qui utilise l’éditeur universel :

Charger l’extension

Dans l’éditeur universel, recherchez le champ Emplacement au milieu en haut de l’interface. Développez-le et mettez à jour l’URL dans le champ Emplacement, et non dans la barre d’adresse du navigateur.

Ajoutez les paramètres de requête suivants :

Exemple :

https://author-pXXX-eXXX.adobeaemcloud.com/content/aem-ue-wknd/index.html?devMode=true&ext=https://localhost:9080

Prévisualiser l’extension

Chargez à nouveau le navigateur pour vous assurer que l’URL mise à jour est utilisée.

L’éditeur universel charge désormais votre extension locale, dans votre session de navigateur uniquement.

Toutes les modifications de code que vous apportez localement sont répercutées immédiatement.