How to introduce a new react component into existing AEM project with regular web AEM components | Community
Skip to main content
bpeddapudi
bpeddapudi
Level 2
September 8, 2022
Question

How to introduce a new react component into existing AEM project with regular web AEM components

  • September 8, 2022
  • 2 replies
  • 2290 views

This question was boggling me for a while and I had to learn. We have an AEM project with regular components. CSS and JS are in ui.frontend and are regular web components (non react). Now I want to use react for couple of new components with SPA Author support. Do you guys know of any tutorial or documentation which can guide with this process?

Challenge for me is can both web components and react components can co exist in same ui.frontend module?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

A
Adobe Employee
AnikaAgAdobe Employee
Adobe Employee
September 8, 2022

Yes both static and react component can co-exist but you need to have your project set up suport that.

For that purpose, you can always create your project using archtype with front end module as react.

 

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/create-project.html?lang=en 

 

Thanks

Anika

bpeddapudi
bpeddapudiAuthor
Level 2
September 8, 2022

I have to work on top of existing project, so I will update package.json accordingly to make it work. Thank you for your response Anika.

nishantg
Adobe Employee
nishantgAdobe Employee
Adobe Employee
September 8, 2022

There are quite a bit of documentation on how to get started on AEM SPA and react components, however the SPA components and templates based on standard AEM approach need to be isolated from the regular templates and cannot be mixed/merged on same page with non-SPA components.

 

Both web components and react components can co-exist in the codebase. There is also a possibility of creating react versions of existing components and create mapping so the same components and dialog can be used for SPA. The only caution is that the SPA and non-SPA usage cannot be present on same page/template.

bpeddapudi
bpeddapudiAuthor
Level 2
September 8, 2022

Hi @nishantg that's what I learned from the documentation. My goal was to have both SPA and non SPA component coexist. Maintaining common components in both SPA and non SPA format is not worth it.

Just wondering, react is completely JS based as we can modify existing ui.frontend to get react and non react minified js in separate files to apps folder. Wondering if we can make changes to a template to support both SPA and non SPA. From JS side that should not be a challenge, wanted to see if you know any documentation which talks in specific with different parts of template changes which are responsible for react component support.

Terms & ConditionsAccessibility statement

Loading footer...