Cree su primer SPA de React en AEM

Le damos la bienvenida a un tutorial en varias partes diseñado para desarrolladores que utilicen la función SPA Editor en Adobe Experience Manager (AEM) de forma nueva. Este tutorial explica la implementación de una aplicación React para una marca ficticia de estilo de vida, la WKND. La aplicación React se desarrollará y se diseñará para implementarse con el Editor de SPA de AEM, que asigna componentes de React a componentes de AEM. El SPA completado, implementado en AEM, se puede crear dinámicamente con las herramientas de edición en línea tradicionales de AEM.

SPA final implementado

Implementación de WKND SPA

Acerca de

El objetivo de este tutorial de varias partes es enseñar a los desarrolladores cómo implementar una aplicación React para trabajar con la función Editor de SPA de AEM. En un escenario real, las actividades de desarrollo se desglosan por persona, con frecuencia involucrando a un desarrollador de Front End y a un desarrollador de Back End. Creemos que es beneficioso para cualquier desarrollador que esté involucrado en un proyecto del Editor de SPA de AEM completar este tutorial.

El tutorial está diseñado para funcionar con AEM as a Cloud Service y es compatible con AEM 6.5.4+ y AEM 6.4.8+. La SPA se implementa mediante:

Calcule entre 1 y 2 horas para pasar por cada parte del tutorial.

Último código

Todo el código del tutorial se encuentra en GitHub.

El código base más reciente está disponible como paquetes AEM descargables.

Requisitos previos

Antes de iniciar este tutorial, necesita lo siguiente:

Aunque no es necesario, es beneficioso tener una comprensión básica del desarrollo de los componentes tradicionales de AEM Sites.

Entorno de desarrollo local

Se necesita un entorno de desarrollo local para completar este tutorial. Las capturas de pantalla y el vídeo se capturan utilizando el SDK de AEM as a Cloud Service que se ejecuta en un entorno Mac OS con Visual Studio Code como IDE. Los comandos y el código deben ser independientes del sistema operativo local, a menos que se indique lo contrario.

NOTA

¿Es novato en el uso de AEM as a Cloud Service? Consulte la siguiente guía para configurar un entorno de desarrollo local con el SDK de AEM as a Cloud Service.

¿Es novato en AEM 6.5? Consulte la siguiente guía para configurar un entorno de desarrollo local.

Pasos siguientes

¡¿Qué estás esperando?! Inicie el tutorial navegando hasta el capítulo SPA Editor Project y aprenda a generar un proyecto habilitado para SPA Editor utilizando el tipo de archivo del proyecto AEM.

Compatibilidad con versiones anteriores

El código de proyecto de este tutorial se ha creado para AEM as a Cloud Service. Para que el código de proyecto sea compatible con versiones anteriores para 6.5.4+ y 6.4.8+ se han realizado varias modificaciones en los archivos POM del tutorial.

El UberJar v6.4.4 se ha incluido como una dependencia:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

Se ha añadido un perfil Maven adicional, denominado classic, para modificar la compilación y dirigirla a los entornos AEM 6.x:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

El perfil classic está deshabilitado de forma predeterminada. Si sigue el tutorial con AEM 6.x, añada el perfil classic siempre que se le indique que realice una compilación de Maven, es decir:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Al generar un nuevo proyecto para una implementación de AEM, utilice siempre la versión más reciente del Tipo de archivo del proyecto AEM y actualice el aemVersion para dirigirse a la versión deseada de AEM.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free