Enabling Headless For Existing AEM Site

Introduction

AEM Headless is a way to expose AEM content, specifically page content in some form like JSON or XML which can be consumed by any application or service. 

We have plenty of options available when we think of AEM as headless, and we can suggest these options as per client requirements. Some of them are SPA editors along with sling models popularly known as a hybrid approach, Content fragments with graphQl APIs known as the pure headless approach, etc. 

Use Case

Existing headless AEM approaches work well when content is to be developed fresh. What about the clients who already have tons of content/pages being developed in a traditional way that uses templates, but they want their existing/new content to be exposed as content services? We come across such clients frequently, and we guide them with the following approaches:

Migrating to AEM as Headless

1. We create an exhausting list of AEM components specifying what components are using sling models or not. This analysis is important to understand how much cost/effort is involved. Sling exporters can then be enabled on each component model to expose components in JSON/XML format.

2. We can then use the AEM hybrid approach to use SPA editors to create pages.

3. Content can be freshly created, or some tool can be used to migrate existing content to SPA pages since we have not changed much on component content/authoring.

4. This approach requires significant effort as it is mostly equivalent to creating a site from scratch.

Using Sling Model Exporters and traditional templates

1. In this approach, we change nothing on the existing page creation experience; that is, authors can continue working on traditional AEM templates and pages.

2. Same as in the headless approach, We create an exhausting list of AEM components specifying what components use sling models. This analysis is important to understand how much cost/effort is involved. Sling exporters can then be enabled on each component model to expose components in JSON/XML format.

3. Now, if content needs to be exposed for a page. Any application/service can make HTTP calls to AEM pages using “.model.json” selector and extension, and the whole page will be exposed as JSON/XML format in the same way it is exposed in the case of the hybrid approach.

4. So web pages continue to be served using AEM templates, and other applications/services can use sling exporters to expose the JSON/XML content of the page.

5. This approach also gives us flexibility to decide what should be exposed as JSON or not and what should be used on web pages.

Consider some use cases:

• If the component has a text field the client wants, it is shown differently on the application and web page. We can allow a separate field for this application property on the component dialog, which can be exposed using sling exporters.
• We can eliminate some content/values to be exported from the Sling exporter’s JSON/XML.
• We can even allow some extra properties in the dialog that are only meant for application.

In this blog, we have covered the approaches on how we can enable headless for an existing site. Stay tuned for more upcoming blogs on implementing the same using another approach.