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

[aniketp1012]

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

[nnakirikanti]

@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.

[Manu_Mathew_ · Accepted solution]

@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.

[aniketp1012]

Do you have any sample for this

[Manu_Mathew_]

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

shared earlier for a similar query.