AEM API sin encabezado y React

Clone la aplicación desde Github ejecutando el siguiente comando en la línea de comandos.

$ git clone git@github.com:lamontacrook/headless-first.git

Cambie al directorio headless-first e instale las dependencias.

$ cd headless-first
$ npm ci

Cree un archivo con el nombre .env en la raíz del proyecto. En .env establezca los siguientes valores:

REACT_APP_AEM=<URL of the AEM instance>
REACT_APP_ENDPOINT=<the name of the endpoint>
REACT_APP_PROJECT=<the name of the folder with Content Fragments>
REACT_APP_TOKEN=<developer token>

Puede recuperar un token de desarrollador en Cloud Manager. Inicie sesión en Adobe Cloud Manager. Haga clic en Experience Manager > Cloud Manager. Elija el Programa adecuado y, a continuación, haga clic en los puntos suspensivos junto al Entorno.

AEM

1. Haga clic en la ficha Integraciones
2. Haga clic en la ficha Token local y obtenga el token de desarrollo local
3. Copie el token de acceso comenzando después de la comillas abiertas hasta antes de la comillas de cierre.
4. Pegue el token copiado como el valor de REACT_APP_TOKEN en el archivo .env.
5. Ahora vamos a crear la aplicación ejecutando npm ci en la línea de comandos.
6. Ahora inicie la aplicación React y ejecute npm run start en la línea de comandos.
7. En ./src/utils un archivo de nombre context.js incluye el código para establecer los valores del archivo .env en el contexto de la aplicación.

Inicie la aplicación React ejecutando npm run start en la línea de comandos.

$ npm run start

La aplicación React se iniciará y abrirá una ventana del explorador a http://localhost:3000. Los cambios en la aplicación React se volverán a cargar automáticamente en el navegador.

Para conectar la aplicación React a AEM as a Cloud Service, vamos a agregar algunas cosas a App.js. En la importación React, agregue useContext.

import React, {useContext} from 'react';

Importar AppContext desde el archivo context.js.

import { AppContext } from './utils/context';

Ahora, en el código de la aplicación, defina una variable de contexto.

const context = useContext(AppContext);

Y finalmente ajuste el código de retorno en <AppContext.Provider> ... </AppContext.Provider>.

...
return(<div className='App'>
    <AppContext.Provider value={context}>
        ...
    </AppContext.Provider>
</div>);

Como referencia, App.js debería ser así.

import React, {useContext} from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './screens/home/home';
import { AppContext } from './utils/context';

const App = () => {
const context = useContext(AppContext);
return (
    <div className='App'>
    <AppContext.Provider value={context}>
        <BrowserRouter>
        <Routes>
            <Route exact={true} path={'/'} element={<Home />} />
        </Routes>
        </BrowserRouter>
    </AppContext.Provider>
    </div>
);
};

export default App;

Importe el SDK AEMHeadless. AEM Este SDK es una biblioteca de ayuda que utiliza la aplicación para interactuar con las API sin encabezado de la interfaz de usuario de la aplicación para interactuar con la interfaz de usuario sin encabezado

Agregar esta instrucción de importación a home.js.

import AEMHeadless from '@adobe/aem-headless-client-js';

Agregue el(la) siguiente { useContext, useEffect, useState } a la instrucción de importación React.

import React, { useContext, useEffect, useState } from 'react';

Importar AppContext.

import { AppContext } from '../../utils/context';

Dentro del componente Home, obtenga la variable context de AppContext.

const Home = () => {
const context = useContext(AppContext);
...
}

AEM AEM Inicialice el SDK sin encabezado de la dentro de useEffect(), ya que el SDK sin encabezado de la aplicación debe cambiar cuando cambia la variable context.

useEffect(() => {
const sdk = new AEMHeadless({
    serviceURL: context.url,
    endpoint: context.endpoint,
    auth: context.token
});
}, [context]);

AEM Cree el estado React que expone el contenido proveniente del SDK sin encabezado de.

const Home = () => {
const [content, setContent] = useState({});
...
}

AEM Conecte la aplicación a la red de. Utilice la consulta persistente creada en la lección anterior. AEM Vamos a agregar el código siguiente dentro de useEffect después de inicializar el SDK sin encabezado de la. Haga que useEffect dependa de la variable context tal como se ve a continuación.

useEffect(() => {
...
sdk.runPersistedQuery('<name of the endpoint>/<name of the persisted query>', { path: `/content/dam/${context.project}/<name of the teaser fragment>` })
    .then(({ data }) => {
    if (data) {
        setContent(data);
    }
    })
    .catch((error) => {
    console.log(`Error with pure-headless/teaser. ${error.message}`);
    });
}, [context]);

Abra la vista Red de las herramientas del desarrollador para revisar la solicitud de GraphQL.

<url to environment>/graphql/execute.json/pure-headless/teaser%3Bpath%3D%2Fcontent%2Fdam%2Fpure-headless%2Fhero

AEM El SDK sin encabezado de la codifica la solicitud de GraphQL y agrega los parámetros proporcionados. Puede abrir la solicitud en el explorador.

Muestre los fragmentos de contenido en la aplicación. Devuelve un(a) <div> con el título del teaser.

return (
<div className='main-body'>
    <div>{content.component && (content.component.item.title)}</div>
</div>
);

Debería ver el campo de título del teaser en la pantalla.

El último paso es añadir el teaser a la página. Se incluye un componente de teaser de React en el paquete. En primer lugar, vamos a incluir la importación. En la parte superior del archivo home.js, agregue la línea:

import Teaser from '../../components/teaser/teaser';

Actualice la instrucción return:

return (
<div className='main-body'>
    <div>{content.component && <Teaser content={content.component.item} />}</div>
</div>
);

Ahora debería ver el teaser con el contenido incluido en el fragmento.