Traditional and SPA components used in tandem

[FFM2]

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

[RajaShankar]

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

[Anish-Sinha]

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...

.

[RajaShankar · Accepted solution]

Hi @Anish-Sinha 

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

[FFM2]

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

[Anish-Sinha]

Ahhh good to know. Probably I misread.