Using react components in a normal AEM page

Question

We want to add react components which should be authorable in a normal AEM page. We created a project structure where we have both AEM HTL components and React spa components. We can add the react spa components in the spa page and we can add AEM HTL components in the normal AEM page but we are not able to add both the normal HTL  AEM components and react components in the same page.

arunpatidar · Accepted Answer

With SPA template and AEM SPA way of implementation it is not possible. But with custom react component it would work.Example : https://github.com/arunpatidar02/AdaptTo2019

Manu_Mathew_ · Answer

@ayushn I am not sure if it's possible to have both on the same template.

1. You probably may need to have all the components to support SPA and create a react component placeholder and use the SPA project structure

2. You could provide the headless capability to components using JSON exporter and CF and use those to render in react.

3. You may need to look into both templates and create a custom page component to accommodate both.

4. Depending on the use case, you could have a separate code structure for react and normal components and create pages however can not be used together.

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/developing/headful-headless.html?lang=en

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded