Expand my Community achievements bar.

SOLVED

Using react components in a normal AEM page

Avatar

Level 2

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.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

SPA
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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 



Arun Patidar

View solution in original post

6 Replies

Avatar

Community Advisor

Hi @ayushn 
You can't add SPA react component to normal AEM page OOTB.

Technically everything is possible, you just need to add the react dependency to the normal page, it may have conflict as well.

 

What we did in our case, we created react component as normal clienlibs and mapped with aem component without SPA and loaded with normal page. 



Arun Patidar

Avatar

Level 2

Thanks for the reply @arunpatidar  

 

Do you know any articles or examples for this which I can follow?

 

 

Avatar

Community Advisor

you can add properties as data-attribute in HTL and render using react component.



Arun Patidar

Avatar

Community Advisor

@arunpatidar Is there a way you are aware of to have both HTL and SPA rendered components on the same page using the SPA template?

Avatar

Correct answer by
Community Advisor

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 



Arun Patidar

Avatar

Community Advisor

@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/develo...