Short URLS using React SPA

[daros]

Hi,

I'm currently facing a lot of issues trying to shorten the URL in an AEM project using the spa editor.

Currently we have a structure similar to /content/project/en/home.html that is rewritten to just /en/home/ using dispatcher mod_rewrite.

The SPA router just doesn't understand the short URLS, resulting in a blank page. I have tried some sketchy solutions, like shortening the incoming path on the router or a custom model client, but had no success. ( page with duplicated content or could not load extra content ).

Is there a easier way to achieve this? What would be the steps? 

Our project uses AEM Project Archetype 36 with react module, and AEM Cloud.

[bipinchandra92]

Hi @daros  , for the url shortening on the React SPA , please follow solution provided(Please refer the whole thread where I have commented regarding the URL short methods we need to modify) on this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-spa-react-dispatcher-s...

[daros]

Thanks for the help @bipinchandra92 ,

I have implemented a custom page model and shortened the path at said methods: 

1. getExportedPath()
2. getModelUrl()
3. getChildPageModels()

all three now, remove the content folder part out of the output.

but I still get an extra call:

made to /en/home.html

and i am not able to get any content outside the initial page load:

Clicked on a link to /en/what-we-do.html. Request returns 200, but no page is added to the router.

This is the content of home.model.json:

{
  "title": "Home",
  ":type": "project/components/page",
  ":itemsOrder": [ ... ],
  ":path": "/en/home".
  ":items": { ... },
  ":hierarchyType": "page"
}

Content is rendered fine when I reload the page tho, is this a problem with the model client? Or is there an extra step to this?

[bipinchandra92]

@daros  I am not able to see the :children properties in the json you have mentioned. Please check the model classes as well , root page model  json will always contains the :children that should have shortened urls also otherwise there will always call for the model.json on the children pages when details of the same is not available in root page model json.

[daros]

@bipinchandra92 In that example i had set Structure Depth to 0, in spa template policy.

Here's what it looks like when set to 1:

{
  "title": "English",
  ":itemsOrder": [],
  ":items": {...},
  ":path": "/en",
  ":type": "project/components/spa",
  ":children": {
    "/en/home": {
      "title": "Home",
      ":itemsOrder": [...],
      ":items": {...},
      ":path": "/en/home",
      ":type": "project/components/page",
      ":hierarchyType": "page"
    },
    "/en/about-us": {...},
    "/en/what-we-do": {...},
    "/en/platforms": {...},
    "/en/our-work": {...},
    "/en/careers": {...},
    "/en/lets-talk": {...},
    "/en/404": {...},
    "/en/policies": {...}
  },
  ":hierarchyType": "page"
}

the page "en" uses the spa-root template while the rest use spa-page. As you can see it also captures the child pages pages on depth 1.

let's say I am on home and click on a link to "/en/platforms/subpage.html", a page that is not included on this initial root model:

Using the default /content/ path:

1. It will fetch the required json (subpage.model.json)
2. An add it to the router
3. Page will be rendered on screen
4. Navigation is fine on all pages and subpages whatever the level.

However what happens now using the short path:

1. It will fetch the required json, but using the short path 
2. The .model call is rewritten to include /content/...
3. It will get the model, but the page is not added to the router resulting on a blank page.
4. If I hit F5 i get both the root model and the subpage again, but the subpage is added to the router and renders fine (until i open another page that is not already on router).

Getting all the pages on the root model is not a possibility as it hinder the performance too much.

My suspicion is that this is a problem with Model Manager, any thoughts?

[daros · Accepted solution]

I made it work!

you need to change the URL root meta property on customheaderlibs to use the getRootUrl ( I was wondering what it was for ) from your custom model: 

This is the default using spa core Page model

<meta
    property="cq:pagemodel_root_url"
    data-sly-use.page="com.adobe.aem.spa.project.core.models.Page"
    content="${page.hierarchyRootJsonExportUrl}"
/>

Change it to your own function

<meta
  property="cq:pagemodel_root_url"
  data-sly-use.page="com.you.project.core.models.HierarchyPage"
  content="${page.RootUrl}"
/>

It will work fine on publish now, but you also need modify the model so it doesn't short the path in author.

Thanks for the help, appreciated.

[iamnjain]

Hi @daros 

Whatever you explained above, same situation I am in.

Can you please add your model code snippet here as well which you wrote in your custom sling model?

It will help. Thanks

[iamnjain]

@kautuk_sahniCan you please help involve AEM SPA expert here?

[kautuk_sahni]

@iamnjain I would recommend you create a new question for clarity and that would allow more eyes to look at your problem statement. 

[iamnjain]

Hi @daros 

What logic you wrote in this model method?

page.RootUrl