Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM SPA React - Dispatcher Setup

bipinchandra92
Level 2
Level 2

We have tried to setup the dispatcher for the AEM SPA Journal Project.

In the Apache, we have done the rewrite to short the urls to hide the content hierarchy.

http://localhost/content/we-retail-journal/react/en/home.html to http://localhost/react/en/home.html

 

Only with the /content the react application is working and in the XHR there is only one call for model.json

bipinchandra92_0-1603208827473.png

 

And with the short url we are getting the two model.json calls that are 

bipinchandra92_1-1603208887546.png

 

What steps needed  in the AEM SPA dispatcher setup to hide the /content  hierarchy?

 

1 Accepted Solution
Nikhil-Kumar
Correct answer by
Community Advisor
Community Advisor

@bipinchandra92  - Can you verify that, When you are hitting short URL then are you getting :children property in en.model.json ?

This happens when you page data is loaded from home.model.json instead of en.model.json.

So, In first case your data gets fetched from root e.model.json and whereas in second case it gets fetched from home.model.json(respecctive page). 

As per my understanding you :path property in preview mode of en.model.json should match with the request URI. So when you hit short path i.e without /content/project-name it looks for :path property in en.model.json  where it doesn't match and moves to individual page's model.json i.e home.model.json

View solution in original post

9 Replies
Shashi_Mulugu
Community Advisor
Community Advisor

@bipinchandra92 I think it is nothing to do with dispatcher. Please check your spa logic where it is firing two XHR requests.

bipinchandra92
Level 2
Level 2
@Shashi_Muluga It is out of box aem journal project provided by Adobe for SPA reference. I have not implemented any custom code.
Nikhil-Kumar
Correct answer by
Community Advisor
Community Advisor

@bipinchandra92  - Can you verify that, When you are hitting short URL then are you getting :children property in en.model.json ?

This happens when you page data is loaded from home.model.json instead of en.model.json.

So, In first case your data gets fetched from root e.model.json and whereas in second case it gets fetched from home.model.json(respecctive page). 

As per my understanding you :path property in preview mode of en.model.json should match with the request URI. So when you hit short path i.e without /content/project-name it looks for :path property in en.model.json  where it doesn't match and moves to individual page's model.json i.e home.model.json

View solution in original post

nasrinj31078225
Level 2
Level 2

@bipinchandra92  I am also facing same issue. We are using SPA Editor project archetype 23. I have added rewrite rules on dispatcher for URL shortening. I am getting blank page. Whenever en.model.json is coming XHR, the page is coming blank. I tried to debug the issue and added vanity URL on publisher as /home.html, but same issue was there  on publisher too.                                                                                                                                               The issue is not with the dispatcher but in SPA whenever we are shortening the URL, the AEM-React integrated page is not getting rendered properly.

I tried to create non-SPA page with no-spa components in the same project, I am getting page properly with same dispatcher settings.

 

Please let me know, in case you got any solution 🙂

Thanks in Advance,

Nasrin

bipinchandra92
Level 2
Level 2

@nasrinj31078225You have to short the url in hierarchy page model class for the SPA to work in the dispatcher. As said by Nikhil Kumar comment :path should match the browser url otherwise it will try to hit the 2 urls and pages will not be rendered.

nasrinj31078225
Level 2
Level 2
Hi Bipin, Do you have any reference link for making change in hierarchy page model class.
bipinchandra92
Level 2
Level 2
There are no documents available. For it to work you have to shorted the urls at getExportedPath(), in getModelUrl() and in getChildPageModels() in hierarchy page model class to work it on dispatcher.
nasrinj31078225
Level 2
Level 2
So to summarize, I need to implement HierarchyNodeExporter and in sling model need to override getExportedPath(). In this method i have to replace "/content/projectname/en/home" to "/home". Correct me if I am going wrong.