Crear proyecto spa-editor-project

Abra un terminal de línea de comandos e introduzca el siguiente comando Maven:

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=35 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"

Observe el frontendModule=react propiedad. AEM Esto indica al tipo de archivo del proyecto de la que arranque el proyecto con un iniciador Base de código de React AEM SPA para usar con el Editor de la. Propiedades como appTitle, appId, artifactId, y groupId se utilizan para identificar el proyecto y el propósito.

Lista completa de propiedades disponibles para configurar un proyecto se puede encontrar aquí.

El tipo de archivo Maven genera la siguiente estructura de carpetas y archivos en el sistema de archivos local:

|--- aem-guides-wknd-spa.react/
    |--- LICENSE
    |--- README.md
    |--- all/
    |--- archetype.properties
    |--- core/
    |--- dispatcher/
    |--- it.tests/
    |--- pom.xml
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.config/
    |--- ui.content/
    |--- ui.frontend/
    |--- ui.tests /
    |--- .gitignore

Cada carpeta representa un módulo Maven individual. En este tutorial trabajaremos principalmente con el ui.frontend , que es la aplicación React. Puede encontrar más información sobre los módulos individuales en la AEM Documentación del tipo de archivo del proyecto.

AEM Asegúrese de que una instancia de la se esté ejecutando localmente en el puerto 4502.

Desde la línea de comandos, vaya a aem-guides-wknd-spa.react directorio del proyecto.

$ cd aem-guides-wknd-spa.react

AEM Ejecute el siguiente comando para generar e implementar todo el proyecto en el que se va a realizar la ejecución del proyecto de forma:

$ mvn clean install -PautoInstallSinglePackage

La compilación tardará aproximadamente un minuto y debe finalizar con el siguiente mensaje:

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

El perfil de Maven autoInstallSinglePackage AEM compila los módulos individuales del proyecto e implementa un paquete único en la instancia de la instancia de la. AEM De forma predeterminada, este paquete se implementa en una instancia de que se ejecuta localmente en el puerto 4502 y con las credenciales de admin:admin.

Vaya a Administrador de paquetes AEM en la instancia local de la: http://localhost:4502/crx/packmgr/index.jsp.

Debería ver varios paquetes con el prefijo aem-guides-wknd-spa.react.

AEM Administrador de paquetes

AEM Todo el código personalizado necesario para el proyecto se incluye en estos paquetes y se instala en el entorno de la.

Vaya a Sites consola: http://localhost:4502/sites.html/content.

SPA El WKND incluye una estructura básica del sitio con un país, un idioma y una página de inicio. Esta jerarquía se basa en los valores predeterminados del tipo de archivo para language_country y isSingleCountryWebsite. Estos valores se pueden sobrescribir actualizando el propiedades disponibles al generar un proyecto.

Abra el us > en > SPA Página de inicio de WKND React página seleccionando la página y haciendo clic en el botón Editar en la barra de menús:

A Texto ya se ha añadido el componente a la página. AEM Puede editar este componente como cualquier otro componente de la lista de componentes de la lista de componentes

Añadir un adicional Texto a la página.

Tenga en cuenta que la experiencia de creación es similar a la de una página de AEM Sites tradicional. Actualmente hay un número limitado de componentes disponibles para su uso. Se agregarán más en el curso del tutorial.

En el Editor de página, haga clic en Información de página botón > Ver como aparece publicado:

Se abrirá una nueva pestaña con el parámetro de consulta ?wcmmode=disabled AEM que desactiva de forma efectiva el editor de: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Vea el origen de la página y observe que el contenido de texto Hello World o cualquier otro contenido no se encuentra. En su lugar, debería ver un HTML como el siguiente:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...

clientlib-react.min.js SPA es la de React que se carga en la página y responsable de procesar el contenido.

Sin embargo, ¿de dónde proviene el contenido?

Vuelva a la pestaña: http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

Abra las herramientas para desarrolladores del explorador e inspeccione el tráfico de red de la página durante una actualización. Ver el XHR solicita:

Debe haber una solicitud a http://localhost:4502/content/wknd-spa-react/us/en.model.json. SPA Contiene todo el contenido, con formato JSON, que impulsará la creación de la.

En una nueva pestaña, abra http://localhost:4502/content/wknd-spa-react/us/en.model.json

La solicitud en.model.json representa el modelo de contenido que dirigirá la aplicación. Inspect utiliza la salida JSON y debería poder encontrar el fragmento que representa el Texto componente(s).

...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...

AEM SPA AEM SPA En el siguiente capítulo analizaremos cómo se asigna este contenido JSON de Componentes de la a Componentes de la para formar la base de la experiencia del Editor de la.