Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Traditional and SPA components used in tandem

Avatar

Level 1

Hi folks,

 

I have a project that uses aem 6.5 components in the traditional way (HTL aka JSP). The header and footer are built that way and are both experience fragments. I would like to start making usage of the AEM SPA framework without losing our header and footer and a few other components (about 24) that are written as native (traditional) components. Can the two types of components co-exist and added to the same template? I know the AEM SPA uses an iFrame editor, so hence the question.

 

Many thanks in advance

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @anish-s 

The example you provided explains how to map a react JS component to an Adobe (non Sightly) SPA based component using MAPTO Function. But as per my understanding what @FFM2  is asking is to use AEM Sightly based component (non SPA) along with SPA based components(Your example) in same page/template.

 

Regards,

Rajashankar.R

 

 

View solution in original post

5 Replies

Avatar

Community Advisor

Hi @FFM2 

Adobe AEM (HTL) based components (non SPA) and SPA based components cannot exists in same template/Page.Thats one of the drawback.They cannot co exists. Only way as per my understanding is you need to create separate template one to support HTL based(non SPA) and one to support SPA based.

 

Please refer this forum topic on same discussion

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/on-aem-6-5-can-we-build-a-...

 

Also to your question you want to you experience fragment you can add SPA based component inside an Experience fragment and use it in a page created using SPA template. That is supported.  Adobe also provides a lot of React or Angular based OOTB SPA based components which we can readily make use of similar to AEM core Components.Which you can reuse readily.

check this out 

https://github.com/adobe/aem-react-core-wcm-components-examples

 

Regards,

Rajashankar.R

 

 

Avatar

Level 10

hi @FFM2 ,

You can map the AEM components to SPA in AEM and use the normal AEM components. There are some steps you need to perform in order to achieve this. Refer to this link and it explains clearly how to achieve this - https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

.

Avatar

Correct answer by
Community Advisor

Hi @anish-s 

The example you provided explains how to map a react JS component to an Adobe (non Sightly) SPA based component using MAPTO Function. But as per my understanding what @FFM2  is asking is to use AEM Sightly based component (non SPA) along with SPA based components(Your example) in same page/template.

 

Regards,

Rajashankar.R

 

 

Avatar

Level 1

That's exactly it mate! Use two components (non-spa and spa) in the same template. Thanks for confirming that such isn't possible. 🙂