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 la propiedad frontendModule=react. AEM AEM SPA Esto le indica al tipo de archivo del proyecto de que arranque el proyecto con un código de React base inicial que se utilizará con el Editor de código de. Propiedades como appTitle, appId, artifactId y groupId se utilizan para identificar el proyecto y el propósito.

Encontrará una lista completa de las propiedades disponibles para configurar un proyecto 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 módulo ui.frontend, que es la aplicación React. AEM Encontrará más detalles sobre módulos individuales en la documentación sobre el tipo de archivo del proyecto de.

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

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

$ 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] ------------------------------------------------------------------------

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

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

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

SPA

AEM Administrador de paquetes de

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 la consola de Sites: 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 las propiedades disponibles al generar un proyecto.

SPA Abra la página us > en > WKND React Home Page; para ello, seleccione la página y haga clic en el botón Editar de la barra de menús:

Ya se agregó un componente Texto a la página. AEM Puede editar este componente como cualquier otro componente de la lista de componentes de la lista de componentes

Agregue un componente Text adicional 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áginas, haga clic en el botón Información de la página > Ver como publicado:

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

Vea el origen de la página y observe que no se encuentra el contenido de texto Hello World o cualquiera de los demás contenidos. 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>
...

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

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

Vuelva a la ficha: 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 las solicitudes XHR:

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 ficha nueva, abra http://localhost:4502/content/wknd-spa-react/us/en.model.json

La solicitud en.model.json representa el modelo de contenido que controlará la aplicación. Inspect usa la salida JSON y debería poder encontrar el fragmento que representa los componentes Texto.

...
":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.