Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

fionas76543059
Level 4
Level 4

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

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@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

5 Replies
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@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

fionas76543059
Level 4
Level 4
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
Community Advisor
Community Advisor

@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