Configuración de desarrollo local

Clona la aplicación WKND Teams React de la rama de solución basic-tutorial.

$ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

Vaya al directorio basic-tutorial y ábralo en el editor de código.

$ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

Instale las dependencias e inicie la aplicación React.

$ npm install
$ npm start

Abra la aplicación WKND Teams React en el explorador en http://localhost:3000. Muestra una lista de los integrantes del equipo y sus detalles. AEM El SDK de la aplicación React proporciona el contenido mediante las API de GraphQL (/graphql/execute.json/my-project/all-teams), que se pueden comprobar mediante la ficha de red del explorador.

Descargue la versión más reciente del servicio de editor universal del Portal de distribución de software.

Extraiga el archivo zip descargado y copie el archivo universal-editor-service.cjs en un nuevo directorio llamado universal-editor-service.

$ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

Cree el archivo .env en el directorio universal-editor-service y agregue las siguientes variables de entorno:

# The port on which the Universal Editor service runs
EXPRESS_PORT=8000
# Disable SSL verification
NODE_TLS_REJECT_UNAUTHORIZED=0

Inicie el servicio local de Universal Editor.

$ cd universal-editor-service
$ node universal-editor-service.cjs

Instale el paquete local-ssl-proxy globalmente.

$ npm install -g local-ssl-proxy

Inicie dos instancias del proxy HTTP SSL local para los siguientes servicios:

• AEM Proxy HTTP SSL local del SDK de la en el puerto 8443.
• Proxy HTTP SSL local del servicio Editor universal en el puerto 8001.

# AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

Detenga el React presionando Ctrl + C en el terminal.

Actualice el archivo package.json para incluir la variable de entorno HTTPS=true en el script start.

"scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

AEM Actualice REACT_APP_HOST_URI en el archivo .env.development para utilizar el protocolo HTTPS y el puerto proxy HTTP SSL local del SDK de la.

REACT_APP_HOST_URI=https://localhost:8443
...

Actualice el archivo ../src/proxy/setupProxy.auth.basic.js para usar la configuración SSL relajada mediante la opción secure: false.

...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

Inicie la aplicación React.

$ npm start

Abra Universal Editor https://experience.adobe.com/#/aem/editor en su explorador. Si se le solicita, inicie sesión con su Adobe ID.

Introduzca la URL de la aplicación WKND Teams React en el campo de entrada URL del sitio del editor universal y haga clic en Open.

La aplicación WKND Teams React se carga en el editor universal pero aún no puede editar el contenido. Debe instrumentar la aplicación React para habilitar la edición de contenido con el editor universal.