Sitecore Experience Accelerator (SXA) site won't render as a sub route where JSS app is the root app

Question

We have a JSS app as our site root (e.g., mydomain.com/ renders my JSS app) and want a Sitecore Experience Accelerator (SXA) website as a sub-route of the same domain (e.g., mydomain.com/sxa-site).

In the SXA Site Manager, I see this warning

To resolve site conflicts, reorder the site list or change the site definition.

And another warning more specific to my SXA site:

*/sxa-site hidden by */ from my-jss-app on * environment

my-jss-site is listed above the SXA site.

The issue is that I'm unable to reorder the SXA site to go before the JSS app. Is there some config change that needs to be made on the server to include my SXA sites before my-jss-app?

(This question was originally posted in the Sitecore Slack Community #jss channel. I wanted to repost here in hopes that it help others)

Answer 1

In a nutshell, the JSS app's config patch (usually deployed to \App_Config\Include\zzz\my-jss-app.config) is resolved before SXA sites.

When the SXA module is installed in Sitecore, you get a bunch of new configs. Of particular interest for this issue is this patch file that says where to place the SXA sites:

<!--\App_Config\Include\Z.Foundation.Overrides\Sitecore.XA.SitesToResolveAfterSxa.config -->

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <experienceAccelerator>
            <siteResolving>
                <site name="exm" resolve="after" />
                <site name="website" resolve="after" />
            </siteResolving>
        </experienceAccelerator>
    </sitecore>
</configuration>

This patch file is saying to place the SXA sites before the default website <site>. If you check out /sitecore/admin/showconfig.aspx on your website, you'll see that SXA sites are not rendered in the final config under the <sites> section. So at the point of resolving the SXA sites, your JSS app config has already been resolved and the SXA sites are going to be put behind it, between the JSS app and the default website.

In order to fix this I needed to create a new patch file adding my JSS site to this of <site>s to ensure the SXA sites are placed before it (your JSS root site):

<!--\App_Config\Include\zzz\my-jss-app_sxa-patch.config -->

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <experienceAccelerator>
            <siteResolving>
                <site name="my-jss-app" resolve="after" patch:after="site[@name='website']" />
            </siteResolving>
        </experienceAccelerator>
    </sitecore>
</configuration>

By doing this, in the SXA Site Manager, you'll see your SXA sites are now listed before your root JSS site.