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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

marcjermaine
Level 2
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
Nikhil-Kumar
Correct answer by
Community Advisor
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

2 Replies
Nikhil-Kumar
Correct answer by
Community Advisor
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

marcjermaine
Level 2
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.
Nikhil-Kumar
Community Advisor
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.