Created Aem react spa project but unable to drag drop normal Component | Community
Skip to main content
A
aniketp1012
Level 2
March 17, 2023
Solved

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

  • March 17, 2023
  • 2 replies
  • 1453 views

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

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

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

@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/developing/hybrid/editor-overview.html?lang=en

 

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.

2 replies

nnakirikanti
Community Advisor
nnakirikantiCommunity Advisor
Community Advisor
March 17, 2023

@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-editor-feature-video-use.html?lang=en

 

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

 

    Manu_Mathew_
    Community Advisor
    Manu_Mathew_Community AdvisorAccepted solution
    Community Advisor
    March 18, 2023

    @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/developing/hybrid/editor-overview.html?lang=en

     

    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.

      A
      aniketp1012Author
      Level 2
      March 18, 2023

      Do you have any sample for this

        Manu_Mathew_
        Community Advisor
        Manu_Mathew_Community Advisor
        Community Advisor
        March 18, 2023

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

        shared earlier for a similar query.

         

          Terms & ConditionsAccessibility statement

          Loading footer...