Level 2

Need Help on AEM integration with Microfrontend along with steps

Forum|Forum|1 year ago
December 4, 2024
2 replies
2234 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.

S

SorinDiaconescu

Level 2

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

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

As it has been described in those articles also, you basically need to expose your AEM data to the Microfrontend components. It depends on the architecture (headless vs headfull vs hybrid) of course. You can understand more from this article: https://medium.com/@prajwaljainkmt/aem-architecture-headful-vs-headless-vs-hybrid-cb7a757b398f

1. In a non-headless architecture, you can have a Sling model that reads your Image component/Text component data and makes it available for the component's HTL to use. In the HTL then that data is being dropped typically into a specific data- attribute (as your article is mentioning) from where the frontend components will know how to read and use to render the UI.

This works for React and Angular as I have seen it.

If you have a proprietary in-house JS based design system, other then React or Angular or whatever, you may leverage a library called AlpineJs which in such cases I have seen it can be really powerful.

2. In a headless solution thought, you will need to expose you AEM component's data via REST API, which you might need to develop. For CFs you can leverage AEM's GraphQL. For Assets you can leverage ootb Asset API de. For the rest you might need to wrote your own Sling Servlets.

Hi @tethich ,

Thank you for clarification and Iam able to understand as per the blogs. But my doubt is on the page we can author many components. How these components data will get rendered on the page.

In the servlet/model do we need to write logic to get all the components data and expose as a json or do we have any mapping to each component similar to SPA

Thanks & Regards,

Kalyan