How to render a component through both HTL and React in SPA editor | Community
Skip to main content
santhosh_kumark
santhosh_kumark
Level 6
June 27, 2023

How to render a component through both HTL and React in SPA editor

  • June 27, 2023
  • 3 replies
  • 1987 views

We have a requirement in AEM React SPA application, where we need to render the component for the first time using AEM component HTML, and there on the react should override it and render the react code. It's like a component having both html and react logic. I tried adding html for the component but it's not working in spa editor.

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

3 replies

Pawan-Gupta
Pawan-Gupta
Level 8
June 27, 2023

there is a good post to refer - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-general-htl-components-in-an-aem-spa-react/td-p/376107

    Tanika02
    Tanika02
    Level 7
    June 28, 2023

    Hello @santhosh_kumark - 

     

    To combine AEM's server-side rendering capabilities with client-side rendering using React here are the steps you can follow : 

     

    1.Start by creating an AEM component that includes the initial HTML markup for the component. This HTML will be rendered by AEM when the page is initially loaded. You can use AEM's component editor to design and define the initial HTML structure.

     

    2. Create a React component that will be responsible for rendering the dynamic behavior and interactivity of the component. This React component should be designed to replace the initial HTML markup rendered by AEM.

     

    3.  In the AEM component's HTL (HTML Template Language) file, include a placeholder element where the React component will be mounted. This placeholder element can be a `<div>` or any other suitable HTML element.

     

    4. Use JavaScript to initialize React and mount the React component on the placeholder element. This initialization should be done after the AEM component's HTML has been rendered. You can use a JavaScript framework like React or ReactDOM to accomplish this.

     

    Here's an example of how you can achieve this in the AEM component's HTL file:

     

     

    <!-- AEM component's HTL file --> <div data-reactroot="${properties.reactRootId}"></div> <script> // Initialize React and mount the component on the placeholder element ReactDOM.render( <YourReactComponent />, document.querySelector('[data-reactroot="${properties.reactRootId}"]') ); </script>

     



    In the example above, `${properties.reactRootId}` is a placeholder for the ID of the root element of your React component, which can be passed as a property to the AEM component.

     

    5. By default, the SPA Editor in AEM does not render server-side HTML when editing React components. You need to customize the SPA Editor configuration to allow the AEM component's HTML to be rendered in the SPA Editor.

    • Locate the html-spa-react-app project in your AEM project's structure.
    • In the html-spa-react-app project, locate the EditConfig folder. If the folder doesn't exist, create it.    
    • Inside the EditConfig folder, create a new configuration file with the name cq-editconfig.json. This file will contain the custom configuration for the SPA Editor.
    • Open the cq-editconfig.json file and add the following configuration to enable rendering of the AEM component's HTML in the SPA Editor:

     

    { "editConfig": { "extended": { "componentName": { "dialogEditable": true } } } }

          

     

    •  Replace "componentName" with the name of your AEM component and save.
      santhosh_kumark
      santhosh_kumarkAuthor
      Level 6
      June 28, 2023

      Hi @tanika02

       

      We are mapping AEM component to react with MapTo() and not using any div id's to render dynamic logic it in react. Here our scenario is different, we need to render the component content in hybrid approach, first time the content of component html file and thereon the react should override the original content.

        A
        AnamikaP
        Level 2
        August 5, 2024

        Did you got the solution? I am also having the same question.

        Terms & ConditionsAccessibility statement

        Loading footer...