Need Help on AEM integration with Microfrontend along with steps | Community
Skip to main content
K
Kalyan_ChakravarthyCh
Level 2
December 4, 2024

Need Help on AEM integration with Microfrontend along with steps

  • December 4, 2024
  • 2 replies
  • 2300 views

Hi,


I want to do POC on AEM with Microfrontend integration. I have gone through the below links but not useful much. Please help me with the steps how to proceed further. 

https://medium.com/@satyambansal001/aem-react-run-multiple-react-apps-on-single-aem-page-without-ejecting-cra-create-react-app-b7d57973a0b5

https://medium.com/@gaurav.poojari/aem-micro-frontend-integration-aee64e923b00

 

Thanks & Regards,

Kalyan

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

2 replies

S
SorinDiaconescu
Level 2
December 4, 2024

Hi @kalyan_chakravarthych 

I have read both online resources that you also followed I believe they are pretty good and they give a step-by-step approach on how to setup your project to leverage micro-frontent architecture pattern.


What exactly are your bottlenecks when you try into practice ? Maybe you can share more about what do you want to demonstrate with your PoC ? Also what version of AEM are you using ? And so on...

    K
    Kalyan_ChakravarthyChAuthor
    Level 2
    December 4, 2024

    Hi @sorindiaconescu ,

    Thank you for inputs. 

    There is no specific use case as part of POC. First Iam trying to understand how to Integrate AEM with microfrontend as we might have similar to sample project wknd-app/we-retail. By using that want to try in my local and after that we will do as part of the project POC. 

    Iam using AEM 6.5

     

    Please let me know if you have more documentation with steps using oob like wknd-app and then will work further if any customisation need to do. 

     

    Thanks & Regards,

    Kalyan

      K
      Kalyan_ChakravarthyChAuthor
      Level 2
      December 4, 2024

      I would say you would need to write logic to expose json containing component data.

      So the most basic example for a core component, for example Carousel one, would look something like:

      <div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel" data-something="${carousel.data.json}" />

       For a custom component it will be similar, but using your Sling model.


      Hi @tethich ,

       

      I did not understand, for headless solution how we need to expose the data and component mapping in ReactJS/AngularJS

       

      Thanks & Regards,

      Kalyan

      narendragandhi
      Community Advisor
      narendragandhiCommunity Advisor
      Community Advisor
      December 4, 2024

      Hi @kalyan_chakravarthych 

       

      I have not had a chance to try this yet. Please check this article - https://jcdubs.medium.com/serverless-vue-micro-frontend-b4eda030137d if it helps to proceed.

       

      Thanks

      Narendra

        Terms & ConditionsAccessibility statement

        Loading footer...