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

[marcjermaine]

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!

[Nikhil-Kumar · Accepted solution]

@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

[marcjermaine]

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.

[Nikhil-Kumar]

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.