Traditional and SPA components used in tandem | Community
Skip to main content
F
FFM2
April 7, 2022
Solved

Traditional and SPA components used in tandem

  • April 7, 2022
  • 2 replies
  • 1590 views

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

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by RajaShankar

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

 

 

2 replies

RajaShankar
Community Advisor
RajaShankarCommunity Advisor
Community Advisor
April 7, 2022

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-website-with-react-core-and-custom/m-p/359598#M23983

 

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
    Adobe Employee
    Anish-SinhaAdobe Employee
    Adobe Employee
    April 7, 2022

    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/spa-editor/react/map-components.html

    .

      RajaShankar
      Community Advisor
      RajaShankarCommunity AdvisorAccepted solution
      Community Advisor
      April 7, 2022

      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

       

       

        F
        FFM2Author
        April 7, 2022

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

          Terms & ConditionsAccessibility statement

          Loading footer...