How to Share React components across multple applications with AEM SPA | Community
Skip to main content
A
Anonymous
May 26, 2020
Solved

How to Share React components across multple applications with AEM SPA

  • May 26, 2020
  • 2 replies
  • 3218 views

Hi All,

 

I have 3 AEM SPA react applications within the same AEM repository. All these 3 applicaitions using AEM SPA React framework. Lets say AEM SPA react app a1, a2, a3. these a1, a2,a3 apps generate with maven acrhetype AEM SPA 4.0. As you all know that when we want to create any new component we need to map the specific component to AEM react app page component to display on the page.

My requirement is to re-use the components a1 app in a2 and a3. without mapping these components I am not able to re-use them in the AEM application. 

 

are there any other ways to resolve this issue?

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 Nikhil-Kumar

@17288292 

In AEM SPA architecture every react component to every AEM component. So it's one to one mapping.
In your case as you have a new project under /apps then you need to create a new one to one mapped component once again.

One way is adding the component from first app to second app by updating the page policies (This should solve your issue of reusing the components)

Thanks,
Nikhil 

2 replies

Nikhil-Kumar
Community Advisor
Nikhil-KumarCommunity AdvisorAccepted solution
Community Advisor
August 24, 2020

@17288292 

In AEM SPA architecture every react component to every AEM component. So it's one to one mapping.
In your case as you have a new project under /apps then you need to create a new one to one mapped component once again.

One way is adding the component from first app to second app by updating the page policies (This should solve your issue of reusing the components)

Thanks,
Nikhil 

    S
    saddra
    July 4, 2023

    @nikhil-kumar - Adding client-libraries into page policy allows the libraries to load in the page. But the angular mapping doesn't work. The angular client library which is loaded first in the page only components belong to that application is loaded on the page.

     

    Example: 

    Lets consider two applications as mentioned below:

    name: app1

    clientlib name: app1.angular

     

    name: app2

    clientlib name: app2.angular

     

    I am trying to use app1 angular components into app2 page by allowing the app1 components in the layout container/ responsivegrid and adding the clientlibs either by page policies in the editable template or by directly adding the clientlib in the page component of app2.  

    App 2 Page component

    head.html

    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories=['app1.angular','app2.angular']}"/>
    </sly>

     

    Body.html

    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories=['app1.angular','app2.angular']}"/>
    </sly>

     

    Scenario 1: When app1 angular js is added first in the categories the page of app2 is empty because its angular components are not mapped. 

    Scenario 2: When app1 angular js is added second in the categories list the page in the app2 gets loaded with app2 components but the app1 components are not mapped. 

    Either case only the first angular js is working and its components are mapped. Only one app.component.ts gets loaded in the page due to this I am not able to share components from different projects. 

     

     

    @17288292 -- Could you please share the solution if you have successfully loaded one application spa component in another application page?

    S
    Sai_Krishna_1404
    Level 2
    October 14, 2020
    Hi Arun, Have you got solution to this issue ?
    Terms & ConditionsAccessibility statement

    Loading footer...