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

Avatar

Avatar

fionas76543059

Avatar

fionas76543059

fionas76543059

21-07-2020

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.

 

 

 

thx

Fiona

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

21-07-2020

@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)