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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Short URLS using React SPA

Avatar

Level 2

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.

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

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.

View solution in original post

5 Replies

Avatar

Level 4

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

Avatar

Level 2

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:

daros_1-1654029017239.png

made to /en/home.html

 

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

daros_2-1654029144117.png

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?

Avatar

Level 4

@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.

Avatar

Level 2

@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?

Avatar

Correct answer by
Level 2

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.