Headless integration with AEM | Community
Skip to main content
V
vaibhavtiwari260
Level 2
July 27, 2023
Solved

Headless integration with AEM

  • July 27, 2023
  • 2 replies
  • 1306 views

I have an angular SPA app that we want to render in AEM dynamically. The approach I am thinking of is,

all fields on the SPA app can be rendered in XML/JSON via Web API.

If it is possible that I can render my app dynamic content in AEM using WebAPI.

then my scenario would be feasible

 

Please can someone guide me on this, also if there is a  reference/ example of doing this,  

 

I was going thru Adobe blogs and feel just the vice versa of this topic is achievable i.e. from AEM headless to another framework like react. My requirement is the opposite i.e. from other headless solution to AEM as head 

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/headless/journeys/developer/overview.html?lang=en

 

 

Thanks,

Vaibhav Tiwari

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 EstebanBustamante

I think the answer will depend on many other factors such as:

- Is the app going to be updated further?

- Who is going to maintain (update) the spa?

- Which author capabilities you are pursuing with this integration?

 

Beyond that, Adobe provides several patterns about how to use the SPA editor and integrate a SPA such as your angular application with AEM, usually as you suggested would be the opposite, but in your case, you could use the "Integrated SPA" from this articles:
 https://www.albinsblog.com/2021/11/single-page-applicationspa-design-patterns-in-aem.html. 

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

 

Another alternative is to host your angular host and redirect from AEM to that app internally, making this transparent. (Use Reverse proxy)

And another alternative is just to compile your app and add the result of the HTML, CSS and JS into an AEM component/page. 

2 replies

iamnjain
Community Advisor
iamnjainCommunity Advisor
Community Advisor
July 28, 2023

Hi @vaibhavtiwari260 

 

What I understood is, you have a standalone Angular SPA webapp and you want to render the same in AEM. Is it right?

 

    EstebanBustamante
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    July 28, 2023

    I think the answer will depend on many other factors such as:

    - Is the app going to be updated further?

    - Who is going to maintain (update) the spa?

    - Which author capabilities you are pursuing with this integration?

     

    Beyond that, Adobe provides several patterns about how to use the SPA editor and integrate a SPA such as your angular application with AEM, usually as you suggested would be the opposite, but in your case, you could use the "Integrated SPA" from this articles:
     https://www.albinsblog.com/2021/11/single-page-applicationspa-design-patterns-in-aem.html. 

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

     

    Another alternative is to host your angular host and redirect from AEM to that app internally, making this transparent. (Use Reverse proxy)

    And another alternative is just to compile your app and add the result of the HTML, CSS and JS into an AEM component/page. 

    Esteban Bustamante
      Terms & ConditionsAccessibility statement

      Loading footer...