JSS Layout Service fails an item resolving by path with virtual directory

Question

I am using Sitecore 9.3 JSS with a Create React App front-end with a virtual folder setup.

When I create a link pointing to the site root item, it works fine when directly browsing to it e.g. opening http://localhost/virtualfolder/root.

But when I use client-side navigation (with React router under the hood) the page (/root) cannot be found.

This is due to Layoutservice HTTP call that does not return any route data for: http://localhost/sitecore/api/layout/render/jss?item=%2Froot&sc_apikey=<key>&sc_site=my-app

When I manually change this to http://localhost/sitecore/api/layout/render/jss?item=/&sc_apikey=<key>&sc_site=my-app it returns route data.

Any clues on how to fix this?

Answer 1

Layout Service can not resolve a virtual directory by default. Sitecore recommends to always populate sc_site parameter in the calls to Layout Service to use this technique. But, if you have more than one JSS app, you have to add additional code to extend the Layout Service call with the query string parameter.

But I prefer another way. I extended the Sitecore SiteResolver. I have got the original Sitecore SiteResolver and extended it by adding the following code:

 var filePath = args.Url.FilePath;
            if (uri.AbsolutePath.StartsWith("/sitecore/api/layout"))
            {
                string query = uri.Query;
                var queryDictionary = System.Web.HttpUtility.ParseQueryString(query);
                var itemProperty = queryDictionary["item"];
                filePath = itemProperty ?? "/";
            }

Look at the following screenshot to compare the updated site resolver with an original one:

Then you have to patch the configuration:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <preAuthenticateRequest>
        <processor type="#your-namespace#.CustomSiteResolving, #your-assambly-name#"
                   patch:instead="*[@type='Sitecore.Pipelines.PreAuthenticateRequest.SiteResolver, Sitecore.Kernel']"
                   resolve="true"/>
      </preAuthenticateRequest>
    </pipelines>
  </sitecore>
</configuration>

Take into account that you have to patch the Sitecore.Pipelines.PreAuthenticateRequest.SiteResolver. So the previously known Sitecore.Pipelines.HttpRequest.RisolveSite processor is not used anymore.