JSS Multisite not resolving based off hostname - One JSS Site/Tenant with multiple apps

Question

I have a JSS multi-site setup under one tenant. I have Site A and Site B. I have modified the routeHandler.js to use a different layout based on the sitecore context Sitename value.

    // Render the app's root structural layout
if(this.props.ssrState.sitecore.context.site.name === "sitea"){
  return (
    // <Layout route={routeData.sitecore.route} />
    (this.state.isLoading) ?
    <Loading isLoading={true}/> :
    <SiteaLayout route={routeData.sitecore.route}  />
  );
}else if(this.props.ssrState.sitecore.context.site.name === "siteb"){
  return (
    // <Layout route={routeData.sitecore.route} />
    (this.state.isLoading) ?
    <Loading isLoading={true}/> :
    <SiteBLayout route={routeData.sitecore.route} />
  );
}

I have configured the two hostnames inside of sitecore under "Setting Site Grouping" for Site A and Site B. My issue is when browsing Site B it is showing Site A. Its using Site A's content and layout even though I'm browsing Site B's configured hostname. Only way I can force Site B to show the correct content/use the correct layout is with the "?sc_site=SiteB" in the querystring. Any suggestions on how to configure Site B to always use the right content and layout?

Sitecore 9.2 JSS - Headless Proxy

Answer 1

Based on the question, I assume that you are using Sitecore Experience Accelerator (SXA) with JSS. I had the same issue when I first tried the Single JSS APP for Multisites.

I have documented everything at my blog here: Sitecore-jss one to many

The main reason this is occurring is because the URL for your layoutservice is resolving to Site A. So, when the request comes through the Sitecore pipeline to resolve the SiteContext, it will obtain Site A. This is why when you add the querystring sc_site=siteb, it resolves to Site B because Sitecore checks for the querystring before checking via the hostname.

Below is a brief description/steps on how to achieve this.

LayoutServiceContext

Use to add the language of the context site so that it is easily obtained on front-end. You may skip this if you are not using language.

Update GraphQL Endpoint

Update the server.js to change the URL of the GraphQL endpoint. The code change needs to occur in the renderView function

Update the index.js in the main folder.

RouteHandler

Update the RouteHandler.js to add the site name as querystring

UPDATE 1

When I have setup the headless proxy or even when using the Connected mode, we saw a performance issue when rendering the website page. This is mainly due to the conversion of the layoutservice (json response) to HTML.

However, I did a small POC on how to achieve this on the Headless proxy. You may find the code here: https://www.dropbox.com/s/w6dvvynp7e778fs/Headless%20Server.zip?dl=0

In brief, I have created a mapping with the URL of the site as the key and the sitename as the value. Then in the proxy index.js, I read the request and then search for the site name. The site name is then passed as querystring in the url to be resolved by the Sitecore pipeline.

Note, this was not setup on Production as we moved on to Static Site Generation. You may need to compare the code I shared from the above link with the OOTB JSS headless scaffolding