Adobe Experience Manager Sites & More

fionas76543059 · 7/21/20

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

BrianKasingli · 7/21/20

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

View solution in original post

BrianKasingli · 7/21/20

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

fionas76543059 · 7/21/20

Thanks Brian. That is great info. Do you know of an on-line example of a React component included in an AEM page as above ? I'm not currently interested in trying out the SPA Editor. All demos I've found are for that. tnx. Fiona

BrianKasingli · 7/22/20

@fionas76543059,

This is an example of what the AEM page should render for a Front-end application:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Client Librbary JavaScript file</title>  
        <script src="/etc.clientlibs/my-site/clientlibs/clientlibs-site.css"></script>
    </head>  
    <body>  
        <div id="root"></div>
        <script src="/etc.clientlibs/my-site/clientlibs/clientlibs-site.js"></script>
    </body>  
</html>

For a quick lesson on how to include JavaScript for an AEM Website, click here - https://sourcedcode.com/blog/aem/how-to-include-javascript-for-an-aem-website

Regards,

Brian

fionas76543059 · 7/22/20

Thanks Brian.

RohitPatil · 1/27/21

Hi

Adobe Experience Manager Sites & More

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

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe