La configuración rápida es una guía rápida que ilustra cómo instalar y ejecutar la aplicación WKND y como SPA remoto, y crearla con AEM SPA Editor.
La configuración rápida le lleva directamente al estado final de este tutorial.
Un vídeo explicativo de la configuración rápida
Este tutorial requiere lo siguiente:
Este tutorial supone:
~/Code/wknd-app
http://localhost:4502
admin
con contraseña admin
http://localhost:3000
Descargue e instale el AEM SDK Quickstart en el puerto 4502, con las credenciales predeterminadas admin/admin
.
Descomprima el SDK de AEM en ~/aem-sdk
Ejecutar el Jar de inicio rápido del SDK de AEM
$ java -jar aem-sdk-quickstart-xxx.jar
# Provide `admin` as the admin user's password
AEM SDK se iniciará y se iniciará automáticamente en http://localhost:4502. Inicie sesión con las siguientes credenciales:
admin
admin
Este tutorial depende del proyecto WKND 0.3.0+'s (para contenido).
aem-guides-wknd.all.x.x.x.zip
admin
.aem-guides-wknd.all.x.x.x.zip
descargados en el paso 1aem-guides-wknd.all-x.x.x.zip
Para realizar una configuración rápida, se proporcionan AEM paquetes que contienen la configuración de AEM final y el contenido del tutorial.
admin
.wknd-app.all.x.x.x.zip
descargados en el paso 1wknd-app.all.x.x.x.zip
wknd-app.ui.content.sample.x.x.x.zip
descargados en el paso 2wknd-app.ui.content.sample.x.x.x.zip
Descargue el código fuente de la aplicación WKND de Github.com y cambie la rama que contiene los cambios a la SPA realizada en este tutorial.
$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql
Desde la raíz del proyecto, instale las dependencias npm de SPA proyectos y ejecute la aplicación.
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start
Si hay errores al ejecutar npm install
, pruebe los siguientes pasos:
$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start
Compruebe que la SPA se esté ejecutando en http://localhost:3000.
Antes de crear contenido, arregle las ventanas del navegador de modo que AEM Author (http://localhost:4502
) esté a la izquierda y el SPA remoto (http://localhost:3000
) se ejecute a la derecha. Esta disposición le permite ver cómo los cambios en el contenido AEM se reflejan inmediatamente en la SPA.
admin
http://localhost:3000
y vea que los cambios se reflejanhttp://localhost:3000
y vea que los cambios se reflejanhttp://localhost:3000
y vea que los cambios se reflejanLas páginas de AEM nuevas en la Página de inicio de la aplicación WKND > Aventura deben tener un nombre de página AEM que coincida con el nombre del fragmento de contenido de la aventura correspondiente. Esto se debe a que la ruta SPA a AEM asignación de página se basa en el último segmento de la ruta, que es el nombre del fragmento de contenido.
Solo tienes que probar rápidamente cómo AEM editor de SPA puede mejorar tu SPA con áreas controladas y editables. Si le interesa, consulte el resto del tutorial, pero asegúrese de empezar de nuevo, ya que en esta configuración rápida su entorno de desarrollo local está en el estado final del tutorial.