Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Using General (HTL) Components in an AEM SPA (React)

Avatar

Level 2

Hello everyone!

I would like to ask if it is possible to use an HTL component with an AEM SPA project. Let's say I wanted to use the Title HTL component, is there a way to do this? Thank you!

marcjermaine_1-1598282411794.png

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@marcjermaine -
If you want to create any component using SPA template then it's not possible.
But you can have your own template created and and create HTL component in the same project structure.

NOTE: You can not use non SPA component in SPA template. As in SPA everything is client-side rendered.
If you see the body.html we only have root div to render at react side.

You can check out my article on the same, soon I will be coming up with one article in which I will list down the issues that I faced during my AEM+SPA project experience.

Thanks,
Nikhil

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@marcjermaine -
If you want to create any component using SPA template then it's not possible.
But you can have your own template created and and create HTL component in the same project structure.

NOTE: You can not use non SPA component in SPA template. As in SPA everything is client-side rendered.
If you see the body.html we only have root div to render at react side.

You can check out my article on the same, soon I will be coming up with one article in which I will list down the issues that I faced during my AEM+SPA project experience.

Thanks,
Nikhil

Avatar

Level 2
Thank you so much for your response! I'm interested to know more about your AEM+SPA project experience as we are currently in the process of mapping the AEM Core Components to React. I'm facing issues at some of the core components since mapping them is not always obvious.

Avatar

Community Advisor
Refer WKND sample for the initial stage, as it shows mapping of AEM title and text component with React components. Every react component uses mapTo parameter to map react to corresponding AEM component.