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

Avatar

Avatar
Validate 10
Level 2
fionas76543059
Level 2

Likes

3 likes

Total Posts

73 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 10
Level 2
fionas76543059
Level 2

Likes

3 likes

Total Posts

73 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Applaud 5
View profile
fionas76543059
Level 2

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
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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)