Include a react component in a page, using a clientlib, no need to be editable



Hi folks,

I want to include a react app in a simple component in a static template page. I found the aem-clientlib-generator npm plugin to create an AEM clientlib and that works fine.


So after that, I include the clientlib in the page and put nothing but the SPA "root" id in a <div> in the component sightly file ?


Am I overlooking anything ?

I have no interest in "editing" the component at this time so I've no interest in the Editable SPA.






Accepted Solutions (1)

Accepted Solutions (1)




@fionas76543059, it looks like you are going in the right direction. 

For the Front-end Application, as you said, you can create a new page component (for a new template) OR edit the basePage cq:Component to include the <div id="root">. Next, ensure your client library is loading the JavaScript right before the </body> tag. 

You can also create a new component to render an HTML element with an id-identifier, example: <div id="micro-app">, so your JavaScript will execute as expected. Next, ensure your client library is loading the JavaScript right before the </body> tag. 

The "aem-clientlib-generator" npm plugin is a preferred way to generate AEM client libraries from custom front-end applications. Make sure you upload and install the client library to a your running development AEM environment. Next, check if the client library is installed propery. If your front-end application is coupled with your AEM maven project code, then you can utilise the 'maven front-end plugin' to automatically run npm build commands, and also maven build commands when your maven project is being built; check out this example.

Answers (0)