Headless integration with AEM

[vaibhavtiwari260]

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/d...

Thanks,

Vaibhav Tiwari

[iamnjain]

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 · Accepted solution]

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/s... 

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.