Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Created Aem react spa project but unable to drag drop normal Component

Avatar

Level 2

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

Used this tutorial to create project .
I am unable to understand why we are able to drag drop only spa component on home page.
why we are not able to drag drop normal aem component

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@aniketp1012 

The SPA Editor is an AEM-provided solution for React and Angular applications to integrate directly with AEM with in-context editing.

This is typically used when, 

  • you plan to write your entire frontend site in React or Angular
  • you require SPA-controlled routing and want to serve SPA web pages from AEM.

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/develo...

 

The SPA archetype is designed for such use cases, if you need to use normal components you would need to alter your project structure to a normal one and add additional features to include react via webpack and have your react components map to AEM components via data attributes.

View solution in original post

4 Replies

Avatar

Level 5

@aniketp1012 Just curious did you edited page templates to modify content/page policy to allow the regular components?

If not check this tutorial to help with

https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/template-edito...

 

Let me know if this works or share more details of your implementation.

 

Avatar

Correct answer by
Community Advisor

@aniketp1012 

The SPA Editor is an AEM-provided solution for React and Angular applications to integrate directly with AEM with in-context editing.

This is typically used when, 

  • you plan to write your entire frontend site in React or Angular
  • you require SPA-controlled routing and want to serve SPA web pages from AEM.

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/develo...

 

The SPA archetype is designed for such use cases, if you need to use normal components you would need to alter your project structure to a normal one and add additional features to include react via webpack and have your react components map to AEM components via data attributes.

Avatar

Community Advisor

@aniketp1012 Currently I don't have a sample,however, you can check this https://github.com/arunpatidar02/AdaptTo2019

shared earlier for a similar query.