AEM Headless APIs and React

Clone the app from Github by executing the following command on the command line.

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

Change into the headless-first directory, and install the dependencies.

$ cd headless-first
$ npm ci

Create a file named .env at the root of the project. In .env set the following values:

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>

You can retrieve a developer token in Cloud Manager. Log in to Adobe Cloud Manager. Click Experience Manager > Cloud Manager. Choose the appropriate Program and then click the ellipses next to the Environment.

1. Click in the Integrations tab
2. Click Local Token tab & Get Local Development Token button
3. Copy the access token beginning after the open quote until before the close quote.
4. Paste the copied token as the value for REACT_APP_TOKEN in the .env file.
5. Let’s now build the app by executing npm ci on the command line.
6. Now start the React app and by executing npm run start on the command line.
7. In ./src/utils a file named context.js includes the code to set the values in the .env file into the context of the app.

Start the React app by executing npm run start on the command line.

$ npm run start

The React app will start and open a browser window to http://localhost:3000. Changes to the React app will be automatically reloaded in the browser.

To connect the React app to AEM as a Cloud Service, let’s add a few things to App.js. In the React import, add useContext.

import React, {useContext} from 'react';

Import AppContext from the context.js file.

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

Now within the app code, define a context variable.

const context = useContext(AppContext);

And, finally wrap the return code in <AppContext.Provider> ... </AppContext.Provider>.

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

For reference, the App.js should now be like this.

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;

Import the AEMHeadless SDK. This SDK is a helper library used by the app to interact with AEM’s Headless APIs.

Add this import statement to the home.js.

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

Add the following { useContext, useEffect, useState } to the React import statement.

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

Import the AppContext.

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

Inside the Home component, get the context variable from the AppContext.

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

Initialize the AEM Headless SDK inside a useEffect(), since the AEM Headless SDK must change when the context variable changes.

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

Create React state that exposes the content coming from the AEM Headless SDK.

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

Connect the app to AEM. Use the persisted query created in the previous lesson. Let’s add the following code inside the useEffect after the AEM Headless SDK is initialized. Make the useEffect dependent on the context variable as seen below.

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

Open the developer tools’ Network view to review the GraphQL request.

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

The AEM Headless SDK encodes the request for GraphQL and adds the provided parameters. You may open the request in the browser.

Display the Content Fragments in the app. Return a <div> with the teaser’s title.

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

You should see the title field of the teaser displayed on the screen.

The last step, is to add the teaser to the page. A React teaser component is included in the package. First, let’s include the import. At the top of the home.js file, add the line:

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

Update the return statement:

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

You should now see the teaser with the content included within the fragment.