Short URLS using React SPA | Community
Skip to main content
D
daros
May 25, 2022
Solved

Short URLS using React SPA

  • May 25, 2022
  • 1 reply
  • 3975 views

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.

 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by daros

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


    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.

    1 reply

    B
    BipinCh1
    May 31, 2022

    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-setup/m-p/396676#M12670

      D
      darosAuthor
      May 31, 2022

      Thanks for the help @bipinch1 ,

       

      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?

        D
        darosAuthorAccepted solution
        June 1, 2022

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


        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.

          Terms & ConditionsAccessibility statement

          Loading footer...