Editing an External SPA within AEM

Create/identify an AEM component for which an authorable React component is created. In this example, it is using the WKND project’s text component.

Create a simple React text component in the SPA. In this example, a new file Text.js has been created with the following content.

Create a configuration object so you can specify the attributes required for enabling AEM editing.

• resourceType is mandatory to map the React component to the AEM component and enable editing when opening in the AEM Editor.

Use the wrapper function withMappable.

This wrapper function maps the React component to the AEM resourceType specified in the config and enables editing capabilities when opened in the AEM Editor. For standalone components, it also fetches the model content for the specific node.

NOTE

In this example, there are separate versions of the component: AEM wrapped and unwrapped React components. The wrapped version must be used when explicitly using the component. When the component is part of a page, you can continue using the default component as currently done in the SPA editor.

Render content in the component.

The JCR properties of the text component appear as follows in AEM.

These values are passed as properties to the created AEMText React component and can be used to render the content.

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
    // Empty component placeholder label
    emptyLabel:'Text',
    isEmpty:function(props) {
       return !props || !props.text || props.text.trim().length < 1;
    },
    // resourcetype of the AEM counterpart component
    resourceType:'wknd-spa-react/components/text'
};

const Text = ({ text }) => (<div>{text}</div>);

export default Text;

export const AEMText = withMappable(Text, TextEditConfig);

The following is how the component appears when the AEM configurations are complete.

const Text = ({ cqPath, richText, text }) => {
   const richTextContent = () => (
      <div className="aem_text" id={cqPath.substr(cqPath.lastIndexOf('/') + 1)} data-rte-editelement dangerouslySetInnerHTML={{__html: text}}/>
   );
   return richText ? richTextContent() : (<div className="aem_text">{text}</div>);
};

NOTE

In this example, further customizations were made to the rendered component to match the existing text component. It is not related to authoring in AEM.

Identify a page to be added for authoring in the SPA. This example uses /content/wknd-spa-react/us/en/home.html.

Create a file (for example, Page.js) for the authorable Page Component. use the Page Component that is provided in @adobe/cq-react-editable-components.

Repeat step four in the section AEM authorable leaf components. Use the wrapper function withMappable on the component.

As was done previously, apply MapTo to the AEM resource types for all the child components within the page.

import { Page, MapTo, withMappable } from '@adobe/aem-react-editable-components';
import Text, { TextEditConfig } from './Text';

export default withMappable(Page);

MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);

NOTE

In this example, the unwrapped React text component is used instead of the wrapped AEMText created previously. The reason is because when the component is part of a page/container and not stand alone, the container takes care of recursively mapping the component. And, enabling authoring capabilities and the additional wrapper is not needed for each child.

To add an authorable page in the SPA, follow the same steps in the section Add Authorable Components to the Page. Here, you can skip the itemPath property.

In the index.js of the React application (or where ReactDOM.render() is called)

In the index.html of the React application

In the AEM app’s page component body via two steps:

1. Create a body.html for the page component.

1. Add the root element in the new body.html file.

Identify the level which would act as the root on AEM.

• For your sample, consider wknd-spa-react/us/en as the root of the SPA. This root means that everything before that path is AEM only pages/content.

Create a page at the required level.

• In this example, the page to be edited is mydomain.com/test. test is in the root path of the app. This root path must be preserved when creating the page in AEM as well. Therefore, you can create a page at the root level defined in the previous step.
• The new page created must have the same name as the page to be edited. In this example, for mydomain.com/test, the new page created must be /path/to/aem/root/test.

Add helpers within SPA routing.

• The created page cannot yet render the expected content in AEM. The reason is because the router expects a path of /test whereas the AEM active path is /wknd-spa-react/us/en/test. To accommodate the AEM-specific portion of the URL, you must add some helpers on the SPA side.

• The toAEMPath helper provided by @adobe/cq-spa-page-model-manager can be used. It transforms the path provided for routing to include AEM-specific portions when the application is open on an AEM instance. It accepts three parameters:

  • The path required for routing
  • The origin URL of the AEM instance where the SPA is edited
  • The project root on AEM as determined in the first step

• These values can be set as environment variables for more flexibility.

Verify editing the page in AEM.

• Deploy the project to AEM and navigate to the created test page. The page content is now rendered and AEM components are editable.