Understand the flow of AEM + SPA

[Kalyan_ChakravarthyCh]

Hi,

I want to understand the flow of AEM + SPA how the en.model.json/home.model.json was formed and called to load. Is it in AEM or In UI it form en.model.json and called. Can anyone help the same. 

Thanks & Regards,

Kalyan

[Preetpal_Bindra]

Hello @Kalyan_ChakravarthyCh ,

are you referring to any documents/videos for it? Do you mind posting the link here. That would help explain the use case a little better.

thank you.

[Tethich]

I believe AEM SPA is using Sling Model Exporter to get JSON representation of requested page. As you don't have HTL. You only serve a JSON to your React or Angular components.

Sling Model Exporter documentation:

https://experienceleague.adobe.com/en/docs/experience-manager-learn/foundation/development/understan...

You can find a nice reply in my opinion here : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/model-json-not-showing-com...

Another article on SPA topic, where model.json is also mentioned, even thought I believe is very clear what is the purpose of model.json in general (not only in SPA context): https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/spa-aem-how-can-we-apply-b...

And here in the Introduction it explains high level how SPA works: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa...

[Kalyan_ChakravarthyCh]

Hi @Tethich ,

Thank you for the details. Iam looking how the home.model.json is loading from frontend. How it is forming the home.model.json and calling from UI.  

Thanks & Regards,

Kalyan

[Tethich]

Is this what are you looking for ?

 

Or you need the under the hood coding and logic stuff that the framework is doing ?

[Kalyan_ChakravarthyCh]

Hi @Tethich ,

Yes Iam looking the hood coding and logic stuff that the framework is doing regarding how model.json is forming and calling in AEM-spa-model-manager

Thanks & Regards,

Kalyan

[Tethich]

Then maybe this is what are you looking for ?
https://github.com/adobe/aem-spa-page-model-manager/tree/master

[Nikhil-Kumar]

Formation of en.model.json/home.model.json

1. AEM Backend (Content Rendering)
   • In AEM, a resource-oriented approach is used to serve content. Each page or resource corresponds to a Sling Model or Component model, which is responsible for providing the content as a JSON structure.
   • When you create a page in AEM (e.g., en, home), a Page Model is associated with it. This model includes:
     • Page properties (e.g., title, description).
     • Content hierarchy and components (e.g., header, footer, body).
     • Data from individual components exposed by their respective Sling Models.
   • The model.json file for a page is generated dynamically when requested via the model.json URL for that page:
     lua

     <page-path>.model.json
     For example:
     bash

     /content/mysite/en.model.json /content/mysite/home.model.json
   • The Sling Model Exporter serializes the data into JSON format using annotations like @exporter in Java.

---

Calling en.model.json/home.model.json

2. UI Layer (SPA Framework)

   • The SPA (typically built using React, Angular, or Vue.js) integrates with the AEM backend via the JSON output.
   • The SPA uses the AEM SPA Editor JavaScript SDK to fetch the model.json dynamically:
     • On page load, the SPA sends a request to AEM to fetch the model.json of the current page.
     • Example request:
       bash

       GET /content/mysite/en.model.json
     • The SDK processes the response and maps the JSON structure to the UI components.

3. Dynamic Data Loading

   • The SPA is designed to use the JSON data to render its components dynamically:
     • Page-level content is mapped to the SPA layout.
     • Component-level content is injected into the respective React/Angular/Vue components.

4. Routing in SPA

   • When navigating within the SPA, additional model.json files for sub-pages or components might be requested dynamically.
   • For example:
     bash

     /content/mysite/en/about.model.json

 

[kautuk_sahni]

@Kalyan_ChakravarthyCh Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[Imran__Khan]

@Kalyan_ChakravarthyCh Follow below blog to get overall understanding on AEM + SPA using JSON

https://medium.com/@toimrank/aem-react-spa-fb10256dbdce