Expand my Community achievements bar.

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

Avatar

Community Advisor

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.

4 Replies

Avatar

Community Advisor

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.

Avatar

Community Advisor

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.

Avatar

Level 2

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