AEM Headless APIs and React

Klona appen från Github genom att köra följande kommando på kommandoraden.

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

Ändra till katalogen headless-first och installera beroendena.

$ cd headless-first
$ npm ci

Skapa en fil med namnet .env i projektets rot. Ange följande värden i .env:

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>

Du kan hämta en utvecklartoken i Cloud Manager. Logga in på Adobe Cloud Manager. Klicka på Experience Manager > Cloud Manager. Välj lämpligt program och klicka sedan på ellipserna bredvid Miljön.

1. Klicka på fliken Integrationer
2. Klicka på fliken Lokal token och knappen Hämta lokal utvecklingstoken
3. Kopiera åtkomsttoken med början efter den öppna offerten till före avslutande citattecken.
4. Klistra in den kopierade token som värde för REACT_APP_TOKEN i filen .env.
5. Nu skapar vi appen genom att köra npm ci på kommandoraden.
6. Starta nu React-appen och kör npm run start på kommandoraden.
7. I ./src/utils en fil med namnet context.js innehåller koden som anger värdena i filen .env i appens kontext.

Starta React-appen genom att köra npm run start på kommandoraden.

$ npm run start

Appen React startar och öppnar ett webbläsarfönster till http://localhost:3000. Ändringar i React-appen läses automatiskt in igen i webbläsaren.

Om du vill ansluta React-appen till AEM as a Cloud Service lägger du till några saker i App.js. Lägg till useContext i React-importen.

import React, {useContext} from 'react';

Importera AppContext från filen context.js.

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

Definiera en kontextvariabel i programkoden.

const context = useContext(AppContext);

Och radbryt till slut returkoden i <AppContext.Provider> ... </AppContext.Provider>.

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

Som referens bör App.js nu vara så här.

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;

Importera AEMHeadless SDK. Detta SDK är ett hjälpbibliotek som används av programmet för att interagera med AEM Headless API:er.

Lägg till den här importsatsen i home.js.

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

Lägg till följande { useContext, useEffect, useState } i importsatsen React.

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

Importera AppContext.

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

I komponenten Home hämtar du variabeln context från AppContext.

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

Initiera AEM Headless SDK inuti en useEffect(), eftersom AEM Headless SDK måste ändras när variabeln context ändras.

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

Skapa React-läge som visar innehållet som kommer från AEM Headless SDK.

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

Anslut appen till AEM. Använd den beständiga fråga som skapades i föregående lektion. Vi lägger till följande kod i useEffect efter att AEM Headless SDK har initierats. Gör useEffect beroende av variabeln context enligt nedan.

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]);

Öppna nätverksvyn för utvecklingsverktygen för att granska GraphQL begäran.

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

AEM Headless SDK kodar begäran för GraphQL och lägger till de angivna parametrarna. Du kan öppna begäran i webbläsaren.

Visa innehållets fragment i appen. Returnera en <div> med teaserns titel.

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

Textfältet för teaser visas på skärmen.

Det sista steget är att lägga till suddgummit på sidan. En React Teaser-komponent ingår i paketet. Först tar vi med importen. Lägg till raden längst upp i filen home.js:

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

Uppdatera programsatsen return:

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

Nu bör du se suddgummit med innehållet inuti fragmentet.