Expand my Community achievements bar.

How to transform Create React App to clientlib

Avatar

Level 1

Hello can I please ask for some quidelines how to transform CRA (create-react-app) into one standalone clientlib for one ( NON AEM SPA) custom componenent ? This component will exist with standard AEM components on the page.
Example:
Fully static aem page with header, herobanner, footer - build using standard aem components but I want to have one part of body of this page to be dynamic react app with some external api calls

Background:
I created a react app that I want to transform to an aem component that will recive some json data from Model

 

<div id="myComponent" data-props="{image: SomeAemModel.imageSrc, heading: SomeAemModel.heading}"></div>

 

 

I checked some of the libs that could help like `react-habitat` and `aem-clientlib-generator` but I am not quite sure how to connect dots here. Cheers

2 Replies

Avatar

Community Advisor

Hi @aemreacthell,

Since you already check the "aem-clientlib-generator", I believe this article may help you.

https://www.embitel.com/ecommerce-insights/building-a-project-in-aem-6-5-with-react-integration 

Thanks,
Sravan

Avatar

Level 1

Thank you for the response but my case I am afraid that my case is slightly different, my project is build on some older archetype i dont have such folder structure like in given examples