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

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

  1. Exécutez l’extension localement.
  2. Acceptez le certificat auto-signé.
  3. Ouvrez une page dans l’éditeur universel.
  4. Mettez à jour l’URL de l’emplacement pour charger l’extension locale.

Exécuter l’extension localement

Cela suppose que vous avez déjà créé une extension Universal Editor et que vous souhaitez la prévisualiser lors des tests et du développement en local.

Démarrez votre extension É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 explicitement lui faire confiance.

Ouvrez un nouvel onglet du navigateur et accédez à la sortie de l’URL d’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.

Accepter le certificat auto-signé

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

Extension accessible

Ouverture d’une page dans l’éditeur universel

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

Ouvrir une page dans l’éditeur universel

Charger l’extension

Dans l’éditeur universel, recherchez le champ Emplacement au centre supérieur de l’interface. Développez-la et mettez à jour la URL dans le champ Emplacement, que la barre d’adresse du navigateur.

Ajoutez les paramètres de requête suivants :

  • devMode=true : active le mode de développement pour l’éditeur universel.
  • ext=https://localhost:9080 - Charge votre extension exécutée localement.

Exemple :

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

Mettre à jour l’URL de l’emplacement de l’éditeur universel

Prévisualiser l’extension

Effectuez un rechargement dur du navigateur pour vous assurer que l’URL mise à jour est utilisée.

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

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

Extension locale chargée

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d