Non SPA React Integration with AEM Project

[Julkar__Naim]

Hi everyone,

I am trying to integrate react in  AEM project wihtout spa-editor. I have gone through this following community posts - 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-integrate-react-int... 
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-integration-with-react... 

I have tried to use react-abode npm package but got build failure. Haven't tried react-habitat package though, it seems way too old (last commit was 8 years ago). Also it doesn't support functional react component.

Can anyone share a working repo of non SPA React implementaion?

[ManviSharma]

Hi Julkar,

1. Use ui.frontend for React Integration:

   • Customize the ui.frontend module within your AEM project to build React components.
   • Use Webpack or a similar bundler to compile React components into JavaScript and CSS.
   • Deploy these assets into AEM as client libraries.

2. Embed React Components Dynamically:

   • Create a div container in your HTL (Sightly) templates.
   • Render React components dynamically into these div containers using ReactDOM.render. For example:

     import React from 'react';
     import ReactDOM from 'react-dom';
     import MyComponent from './MyComponent';
     
     ReactDOM.render(<MyComponent />, document.getElementById('my-react-div'));

3. Follow AEM Headless Guidance:

   • If your application consumes content from AEM, you can use AEM's headless capabilities or Content Services to fetch JSON data and render it in your React components. This keeps React and AEM decoupled.

4. Handling State and Data Sharing:

   • Use client-side storage like SessionStorage or LocalStorage for multi-step forms or to persist state temporarily across React components.
     
     Ref. docs:
     https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...
     http://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless...
     https://github.com/adobe/aem-react-core-wcm-components-base
     
     
     
     
     
     

[Julkar__Naim]

Hi @ManviSharma ,

I am trying to integrate react with existing code base, cant use SPA editor or headless approach. My goal is to use react in HTL. I will pass model data as json through data-attribute or something, then react handles the rest. Your shared snippet is exactly what I have in mind, I have tried this approach with webpack bundler but getting build failure for ui.frontend module. 

Could you please share a working example?