Al decidir qué nivel de integración desea tener entre el SPA externo y el AEM, a menudo debe poder editar y ver el SPA dentro de AEM.
En este documento se describen los pasos recomendados para cargar un SPA independiente en una instancia de AEM, agregar secciones de contenido editables y habilitar la creación.
Los requisitos previos son sencillos.
En primer lugar, debe cargar la SPA externa en el proyecto de AEM.
src
en el /ui.frontend
carpeta del proyecto con la aplicación React src
carpeta.package.json
en el /ui.frontend/package.json
archivo.
/public
carpeta./public/index.html
archivo.Ahora que la SPA externa forma parte del proyecto de AEM, debe configurarse dentro de AEM.
Para aprovechar AEM funciones de SPA, hay dependencias en los tres paquetes siguientes.
@adobe/aem-react-editable-components
@adobe/aem-spa-component-mapping
@adobe/aem-spa-page-model-manager
@adobe/aem-spa-page-model-manager
proporciona la API para inicializar un Administrador de modelos y recuperar el modelo de la instancia de AEM. Este modelo se puede utilizar para procesar componentes AEM mediante API de @adobe/aem-react-editable-components
y @adobe/aem-spa-component-mapping
.
Ejecute el siguiente comando npm para instalar los paquetes necesarios.
npm install --save @adobe/aem-spa-component-mapping @adobe/aem-spa-page-model-manager @adobe/aem-react-editable-components
Antes de que la aplicación se procese, la variable ModelManager
debe inicializarse para gestionar la creación de la AEM ModelStore
.
Esto debe hacerse dentro del src/index.js
del archivo de la aplicación o donde se represente la raíz de la aplicación.
Para esto, podemos usar initializationAsync
API proporcionada por el ModelManager
.
La siguiente captura de pantalla muestra cómo habilitar la inicialización de la variable ModelManager
en una aplicación React simple. La única restricción es que initializationAsync
debe llamarse antes de ReactDOM.render()
.
En este ejemplo, la variable ModelManager
se inicializa y está vacío ModelStore
se crea.
initializationAsync
opcionalmente, puede aceptar un options
como parámetro:
path
- En la inicialización, se busca el modelo en la ruta definida y se almacena en la ModelStore
. Esto se puede usar para recuperar la variable rootModel
en la inicialización si es necesario.modelClient
- Permite proporcionar un cliente personalizado responsable de recuperar el modelo.model
- A model
objeto pasado como parámetro normalmente se rellena cuando uso de SSR.Cree/identifique un componente AEM para el que se creará un componente React legible. En este ejemplo, se utiliza el componente de texto del proyecto WKND.
Cree un componente de texto React simple en el SPA. En este ejemplo, un nuevo archivo Text.js
se ha creado con el siguiente contenido.
Cree un objeto de configuración para especificar los atributos necesarios para activar AEM edición.
resourceType
es obligatorio para asignar el componente React al componente AEM y habilitar la edición al abrirlo en el editor de AEM.Uso de la función wrapper withMappable
.
Esta función de ajuste asigna el componente React al AEM resourceType
especificado en la configuración y activa las capacidades de edición al abrirse en el editor de AEM. Para los componentes independientes, también recuperará el contenido del modelo para el nodo específico.
En este ejemplo hay versiones independientes del componente: AEM componentes React envueltos y sin ajustar. La versión ajustada debe utilizarse cuando se utiliza explícitamente el componente. Cuando el componente forma parte de una página, puede seguir utilizando el componente predeterminado tal como se hace actualmente en el editor de SPA.
Representar contenido en el componente.
Las propiedades JCR del componente de texto aparecen de la siguiente manera en AEM.
Estos valores se pasan como propiedades a la AEMText
Reaccione el componente y se puede utilizar para procesar el contenido.
import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';
export const TextEditConfig = {
// Empty component placeholder label
emptyLabel:'Text',
isEmpty:function(props) {
return !props || !props.text || props.text.trim().length < 1;
},
// resourcetype of the AEM counterpart component
resourceType:'wknd-spa-react/components/text'
};
const Text = ({ text }) => (<div>{text}</div>);
export default Text;
export const AEMText = withMappable(Text, TextEditConfig);
Así es como aparecerá el componente cuando se hayan completado las configuraciones de AEM.
const Text = ({ cqPath, richText, text }) => {
const richTextContent = () => (
<div className="aem_text" id={cqPath.substr(cqPath.lastIndexOf('/') + 1)} data-rte-editelement dangerouslySetInnerHTML={{__html: text}}/>
);
return richText ? richTextContent() : (<div className="aem_text">{text}</div>);
};
En este ejemplo, se han realizado más personalizaciones en el componente procesado para que coincida con el componente de texto existente. Sin embargo, esto no está relacionado con la creación en AEM.
Una vez creados los componentes React legibles, podemos utilizarlos en toda la aplicación.
Veamos una página de ejemplo en la que necesitamos agregar un texto del proyecto de SPA WKND. Para este ejemplo, queremos mostrar el texto "Hello World!" en /content/wknd-spa-react/us/en/home.html
.
Determine la ruta del nodo que desea mostrar.
pagePath
: La página que contiene el nodo, en nuestro ejemplo /content/wknd-spa-react/us/en/home
itemPath
: Ruta al nodo dentro de la página, en nuestro ejemplo root/responsivegrid/text
Añada el componente en la posición necesaria de la página.
La variable AEMText
el componente se puede añadir en la posición necesaria dentro de la página con pagePath
y itemPath
valores definidos como propiedades. pagePath
es una propiedad obligatoria.
Ahora podemos probar el componente en nuestra instancia de AEM en ejecución.
aem-guides-wknd-spa
para crear e implementar el proyecto en AEM.mvn clean install -PautoInstallSinglePackage
http://<host>:<port>/editor.html/content/wknd-spa-react/us/en/home.html
.La variable AEMText
ahora se puede autorizar en AEM.
Identifique la página que se agregará para la creación en el SPA. Este ejemplo utiliza /content/wknd-spa-react/us/en/home.html
.
Cree un nuevo archivo (p. ej. Page.js
) para el componente de página legible. Aquí, podemos reutilizar el componente de página que se proporciona en @adobe/cq-react-editable-components
.
Repita el paso cuatro de la sección AEM componentes de hoja legibles. Uso de la función wrapper withMappable
en el componente.
Como se hizo anteriormente, aplique MapTo
a los tipos de recurso AEM para todos los componentes secundarios de la página.
import { Page, MapTo, withMappable } from '@adobe/aem-react-editable-components';
import Text, { TextEditConfig } from './Text';
export default withMappable(Page);
MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);
En este ejemplo utilizamos el componente de texto React sin ajustar en lugar de la envolvente AEMText
creado anteriormente. Esto se debe a que, cuando el componente forma parte de una página o contenedor y no es independiente, el contenedor se encargará de asignar el componente de forma recursiva y de activar las capacidades de creación, y no se necesitará el envoltorio adicional para cada elemento secundario.
Para agregar una página de creación en la SPA, siga los mismos pasos en la sección Agregar componentes autorizados a la página. Aquí podemos omitir el itemPath
sin embargo.
Para verificar que la página se puede editar, siga los mismos pasos en la sección Verificar edición del contenido de texto en AEM.
La página ahora se puede editar en AEM con un contenedor de diseño y un componente de texto secundario.
En los ejemplos anteriores, hemos agregado componentes a la SPA con contenido de AEM existente. Sin embargo, hay casos en los que el contenido aún no se ha creado en AEM, pero el autor del contenido debe añadirlo más adelante. Para dar cabida a esto, el desarrollador del front-end puede agregar componentes en las ubicaciones adecuadas dentro del SPA. Estos componentes mostrarán marcadores de posición cuando se abran en el editor de AEM. Una vez que el autor de contenido añade el contenido dentro de estos marcadores de posición, los nodos se crean en la estructura JCR y el contenido se mantiene. El componente creado permitirá el mismo conjunto de operaciones que los componentes independientes de hoja.
En este ejemplo, reutilizamos la variable AEMText
componente creado anteriormente. Queremos que el texto nuevo se añada debajo del componente de texto existente en la página de inicio de WKND. La adición de componentes es la misma que para los componentes normales de hoja. Sin embargo, la variable itemPath
se puede actualizar a la ruta en la que se debe añadir el nuevo componente.
Dado que el nuevo componente debe añadirse debajo del texto existente en root/responsivegrid/text
, la nueva ruta sería root/responsivegrid/{itemName}
.
<AEMText
pagePath='/content/wknd-spa-react/us/en/home'
itemPath='root/responsivegrid/text_20' />
La variable TestPage
tiene el aspecto siguiente después de añadir el componente virtual.
Asegúrese de que la variable AEMText
el componente tiene su resourceType
configure en la configuración para habilitar esta función.
Ahora puede implementar los cambios en AEM siguiendo los pasos de la sección Verificar edición del contenido de texto en AEM. Se mostrará un marcador de posición para el no existente text_20
nodo .
Cuando el autor de contenido actualiza este componente, se crea una text_20
el nodo se crea en root/responsivegrid/text_20
en /content/wknd-spa-react/us/en/home
.
Existen varios requisitos para agregar componentes de hoja virtual, así como algunas limitaciones.
pagePath
es obligatoria para crear un componente virtual.pagePath
debe existir en el proyecto AEM.itemPath
.itemPath='text_20'
en el ejemplo anterior, el nuevo nodo se creará directamente en la página, es decir, /content/wknd-spa-react/us/en/home/jcr:content/text_20
itemPath
.
root/responsivegrid
debe existir para que el nuevo nodo text_20
se puede crear allí.Se admite la capacidad de agregar contenedores, aunque el contenedor correspondiente aún no se haya creado en AEM. El concepto y el enfoque son similares a componentes de hoja virtual.
El desarrollador de front-end puede añadir los componentes de contenedor en ubicaciones adecuadas dentro del SPA y estos componentes mostrarán marcadores de posición cuando se abran en el editor en AEM. A continuación, el autor puede añadir componentes y su contenido al contenedor que creará los nodos necesarios en la estructura JCR.
Por ejemplo, si un contenedor ya existe en /root/responsivegrid
y el desarrollador desea agregar un nuevo contenedor secundario:
newContainer
aún no existe en la AEM.
Al editar la página que contiene este componente en AEM, se muestra un marcador de posición vacío para un contenedor en el que el autor puede añadir contenido.
Una vez que el autor agrega un componente secundario al contenedor, el nuevo nodo contenedor se crea con el nombre correspondiente en la estructura JCR.
Ahora se pueden agregar más componentes y contenido al contenedor, según lo requiera el autor, y los cambios se mantendrán.
Existen varios requisitos para agregar contenedores virtuales, así como algunas limitaciones.
root/responsivegrid
ya existe en el contenedor de AEM, se puede crear un nuevo contenedor proporcionando la ruta root/responsivegrid/newContainer
.root/responsivegrid/newContainer/secondNewContainer
no es posible.Si ha seguido los ejemplos anteriores, la SPA externa ahora se puede editar en AEM. Sin embargo, hay aspectos adicionales de la SPA externa que puede personalizar aún más.
De forma predeterminada, suponemos que la aplicación React se procesa dentro de un div
de ID de elemento spa-root
. Si es necesario, se puede personalizar.
Por ejemplo, supongamos que tenemos un SPA en el que la aplicación se procesa dentro de un div
de ID de elemento root
. Esto debe reflejarse en tres archivos.
En el index.js
de la aplicación React (o ReactDOM.render()
se llama )
En el index.html
de la aplicación React
En el cuerpo del componente de página de la aplicación de AEM mediante dos pasos:
body.html
para el componente de página.body.html
archivo.Si la aplicación externa React SPA tiene varias páginas, puede utilizar el enrutamiento para determinar la página o el componente que se va a procesar. El caso de uso básico es comparar la dirección URL activa actual con la ruta proporcionada para una ruta. Para permitir la edición en estas aplicaciones habilitadas para enrutamiento, la ruta que se comparará con debe transformarse para dar cabida a información específica de AEM.
En el siguiente ejemplo tenemos una aplicación React simple con dos páginas. La página que se va a procesar se determina mediante la coincidencia de la ruta proporcionada al enrutador con la dirección URL activa. Por ejemplo, si estamos en mydomain.com/test
, TestPage
se procesará.
Para habilitar la edición en AEM para esta SPA de ejemplo, se requieren los siguientes pasos.
Identifique el nivel que actuaría como la raíz en AEM.
wknd-spa-react/us/en
como raíz del SPA. Esto significa que todo lo anterior a esa ruta es AEM solo páginas/contenido.Cree una nueva página en el nivel requerido.
mydomain.com/test
. test
se encuentra en la ruta raíz de la aplicación. Esto también debe conservarse al crear la página en AEM. Por lo tanto, podemos crear una nueva página en el nivel raíz definido en el paso anterior.mydomain.com/test
, la nueva página creada debe ser /path/to/aem/root/test
.Añada elementos de ayuda dentro SPA enrutamiento.
/test
que la ruta activa AEM es /wknd-spa-react/us/en/test
. Para dar cabida a la parte AEM de la URL específica, debemos añadir algunos elementos de ayuda en el lado SPA.toAEMPath
ayuda proporcionada por @adobe/cq-spa-page-model-manager
para esto. Transforma la ruta proporcionada para el enrutamiento para incluir partes específicas de AEM cuando la aplicación está abierta en una instancia de AEM. Acepta tres parámetros:
Compruebe que está editando la página en AEM.
test
página. El contenido de la página ahora se representa y AEM componentes son editables.El componente RemotePage espera que la implementación proporcione un manifiesto de recurso como el encontrado aquí. Sin embargo, el componente RemotePage solo se ha probado para funcionar con el marco React (y Next.js mediante el componente Remote-page-next) y, por lo tanto, no admite la carga remota de aplicaciones desde otros marcos, como el Angular.
El siguiente material de referencia puede ser útil para comprender SPA en el contexto de la AEM.