Verificar una extensión

Inicie sesión en el entorno de AEM as a Cloud Service deseado.

Seleccione el icono Fragmentos de contenido.

AEM Espere a que se cargue la consola Fragmento de contenido de en el explorador.

AEM Copie la URL de la consola Fragmento de contenido de la barra de direcciones del explorador, debe tener un aspecto similar al siguiente:

https://experience.adobe.com/?repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin

Abra una línea de comandos en la raíz del proyecto de extensión.

AEM Ejecute la extensión de la IU de la aplicación como una aplicación local de App Builder

$ aio app run
...
No change to package.json was detected. No package manager install will be executed.

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

Inicialmente (y siempre que vea un error de conexión) abra https://localhost:9080 (o la URL de su aplicación local) en su explorador web y acepte manualmente el certificado HTTPS.

AEM Agregue los dos parámetros de consulta siguientes a la dirección URL de la interfaz de usuario 🔗

• &devMode=true
• &ext=<LOCAL APPLICATION URL>, normalmente &ext=https://localhost:9080.

Agregue los dos parámetros de consulta anteriores (devMode y ext) como los primeros parámetros de consulta de la dirección URL. AEM La interfaz de usuario extensible que se está utilizando utiliza rutas hash (#/@wknd/aem/...), por lo que la corrección posterior de los parámetros después de # no funciona de manera incorrecta.

La URL de vista previa debe tener este aspecto:

https://experience.adobe.com/?devMode=true&ext=https://localhost:9080&repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin

Copie y pegue la dirección URL de vista previa en el explorador.

• Es posible que tenga que aceptar inicialmente y después periódicamente el certificado HTTPS para el host de la aplicación local (https://localhost:9080).

AEM La interfaz de usuario de se carga con la versión local de la extensión insertada en ella para la verificación.

Abra una línea de comandos en la raíz del proyecto de extensión.

Asegúrese de que el espacio de trabajo de fase esté activo (o el Workspace que se utilice para la verificación).

$ aio app use -w Stage

Combine cualquier cambio realizado en .env y .aio.

Implemente la aplicación de App Builder de extensión actualizada. Si no inició sesión, ejecute aio login primero.

$ aio app deploy
...
Your deployed actions:
web actions:
  -> https://98765-123aquarat.adobeio-static.net/api/v1/web/aem-cf-console-admin-1/generic
To view your deployed application:
  -> https://98765-123aquarat.adobeio-static.net/index.html
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://98765-123aquarat.adobeio-static.net/index.html
New Extension Point(s) in Workspace 'Production': 'aem/cf-console-admin/1'
Successful deployment 🏄

AEM Agregue los dos parámetros de consulta siguientes a la dirección URL de la interfaz de usuario 🔗

• &devMode=true
• &ext=<DEPLOYED APPLICATION URL>

AEM Agregue los dos parámetros de consulta anteriores (devMode y ext) como los primeros parámetros de consulta en la dirección URL, ya que las IU de extensibles utilizan una ruta hash (#/@wknd/aem/...), por lo que la corrección posterior incorrecta de los parámetros después de # no funciona.

La URL de vista previa debe tener este aspecto:

https://experience.adobe.com/?devMode=true&ext=https://98765-123aquarat.adobeio-static.net/index.html&repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin

Copie y pegue la dirección URL de vista previa en el explorador.

AEM La consola Fragmento de contenido de la aplicación inserta la versión de la extensión implementada en el espacio de trabajo de fase en. Esta URL de fase se puede compartir con los usuarios de control de calidad o empresariales para su verificación.

Cree un marcador en el explorador.

Edite el marcador.

Asigne un nombre significativo a un marcador, como AEM UI Extension Preview (localhost:9080).

Establezca la dirección URL del marcador en el siguiente código:

javascript: (() => {
    /* Change this to the URL of the local App Builder app if not using https://localhost:9080 */
    const previewApp = 'https://localhost:9080';

    const repo = new URL(window.location.href).searchParams.get('repo');

    if (window.location.href.match(/https:\/\/experience\.adobe\.com\/.*\/aem\/cf\/(editor|admin)\/.*/i)) {
        window.location = `https://experience.adobe.com/?devMode=true&ext=${previewApp}&repo=${repo}${window.location.hash}`;
    }
})();

AEM Vaya a una interfaz de usuario de ampliable en la que cargar la extensión de vista previa y, a continuación, haga clic en el bookmarklet.