On AEM 6.5 can we build a website with React, Core and custom components and ability to add them to a SPA Editor? | Community
Skip to main content
surenk
surenk
Level 4
April 22, 2020
Solved

On AEM 6.5 can we build a website with React, Core and custom components and ability to add them to a SPA Editor?

  • April 22, 2020
  • 1 reply
  • 4316 views

We wanted to build a website in AEM using a combination of React, Core and custom components. We are learning AEM SPA and not sure if we can do this? Built the base project using AEM Archetype 24-SNAPSHOT using "react" as frontend. 

 

Based on this https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-overview.html looks like we cannot add non-spa components to a SPA Editor based template.

  • Is there any way to add regular/core components to a SPA Editor template?
  • What are our other options? Some we can think of..
    • Make all regular/core components as React components then use them on the templates, so they are editable?
    • Build non-spa editor and add React components there. Authors cannot edit the React components?
    • Build static templates with react and other non-spa components added to it?

 

    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 Daniel_Gordon

    For the SPA-editor you will not be able to re-use traditional AEM components as-is. You would need to migrate the HTL script(s) and create corresponding React components for each one. This might be quite an effort depending on your needs. FWIW there is some work creating React versions of Core Components: https://www.npmjs.com/package/aem-core-components-contributions-react-core-spa and https://www.youtube.com/watch?v=9759AhM7fAc but this is very much a work in progress and not quite production ready.

     

    Based on your image though, it looks like you are trying to go for a hybrid approach. This can also be achieved. The AEM CIF project (Commerce Integration Framework) has taken this approach with some of their non-editable components, like a shopping cart, and user checkout: https://github.com/adobe/aem-core-cif-components/tree/master/react-components. They use a similar project build pattern as the SPA-Editor and copy the compiled React app as a clientlibrary which are then loaded into AEM. You can see that the HTL for the Cart component just includes the div id: https://github.com/adobe/aem-core-cif-components/blob/master/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v1/minicart/minicart.html  which will be targeted by their react app.

     

    Now in the CIF Project does not allow authors to edit these components and all of the data is coming from external sources (Magento graphql). However not all is lost! You should be able to use: https://github.com/adobe/react-webcomponent to build mini React apps that map to webcomponents with custom elements. So why would we introduce the webcomponents? Well then you can still use Dialogs+HTL to pass author driven values back to your React app. So you might have some HTL that looks like:

     

    <!--HTL --> <sly data-sly-test="${properties.title}"> <reactteaser data-sly-attribute.data-title="${properties.title"></reactteaser> </sly>

     

    Where reactteaser is a webcomponent that gets mapped to a React component using the Adobe webcomponent library. Now you can pass in the value of title from an author dialog back to your ReactTeaser component and then decide how you want to render it... 

     

    Unfortunately I do not have a working example but hopefully this gives you good information to experiment with some approaches. I am interested to see which direction you go in!

    1 reply

    Daniel_Gordon
    Adobe Employee
    Daniel_GordonAdobe EmployeeAccepted solution
    Adobe Employee
    April 24, 2020

    For the SPA-editor you will not be able to re-use traditional AEM components as-is. You would need to migrate the HTL script(s) and create corresponding React components for each one. This might be quite an effort depending on your needs. FWIW there is some work creating React versions of Core Components: https://www.npmjs.com/package/aem-core-components-contributions-react-core-spa and https://www.youtube.com/watch?v=9759AhM7fAc but this is very much a work in progress and not quite production ready.

     

    Based on your image though, it looks like you are trying to go for a hybrid approach. This can also be achieved. The AEM CIF project (Commerce Integration Framework) has taken this approach with some of their non-editable components, like a shopping cart, and user checkout: https://github.com/adobe/aem-core-cif-components/tree/master/react-components. They use a similar project build pattern as the SPA-Editor and copy the compiled React app as a clientlibrary which are then loaded into AEM. You can see that the HTL for the Cart component just includes the div id: https://github.com/adobe/aem-core-cif-components/blob/master/ui.apps/src/main/content/jcr_root/apps/core/cif/components/commerce/minicart/v1/minicart/minicart.html  which will be targeted by their react app.

     

    Now in the CIF Project does not allow authors to edit these components and all of the data is coming from external sources (Magento graphql). However not all is lost! You should be able to use: https://github.com/adobe/react-webcomponent to build mini React apps that map to webcomponents with custom elements. So why would we introduce the webcomponents? Well then you can still use Dialogs+HTL to pass author driven values back to your React app. So you might have some HTL that looks like:

     

    <!--HTL --> <sly data-sly-test="${properties.title}"> <reactteaser data-sly-attribute.data-title="${properties.title"></reactteaser> </sly>

     

    Where reactteaser is a webcomponent that gets mapped to a React component using the Adobe webcomponent library. Now you can pass in the value of title from an author dialog back to your ReactTeaser component and then decide how you want to render it... 

     

    Unfortunately I do not have a working example but hopefully this gives you good information to experiment with some approaches. I am interested to see which direction you go in!

      surenk
      surenkAuthor
      Level 4
      April 24, 2020
      Thanks for the detailed answer @daniel_gordon, much appreciated
      Terms & ConditionsAccessibility statement

      Loading footer...