Using Page designs or Partial Designs in SXA JSS Site

Question

We have built out a JSS tenant and creating pages that are rendered with React with Sitecore 10.1.1 in integrated mode (Sitecore first). Basic layouts and placeholders are working as expected. We are trying to use page designs and partial designs based on this article https://doc.sitecore.com/en/developers/sxa/101/sitecore-experience-accelerator/create-a-jss-tenant-and-site.html

We believe that page designs and partial designs should work but do not appear to be rendered in the experience editor or on the page. We have tried using the default JSS Layout as well as our custom layouts.

I can see the Page design information passed in the JSON data.

Do we need a React component to render this information?

Update 1:

We can view the issue in the experience editor. On the JSS site when we view a Partial design in experience editor mode we can see our rendering. But when we add the partial design to a page design,we do not see the rendering when the page design is viewed in experience editor mode. We have confirmed our App routes, page designs, and partial designs are all using the same JSS layout. We have confirmed the desired behavior exists in an OOTB SXA site on the same instance (which leverages the OOTB MVC layout). We have confirmed that we do not have multiple site nodes (as noted here: sxa - Partial design content not appearing in Page design

The JSON from the layout service has the information about the page designs. If we use the partial design item id in the layout service it's able to get the information related to the placeholders and data.

Answer 1

The Page Design that you're seeing isn't processed by the React application, it's just part of the default Item serialization.

The power of SXA's Page + Partial Designs will translate into a list of placeholders, components, and nested placeholders in the JSON, no different than a non-SXA site.

You need to start off with ensuring your JSS Layout definition item includes a link to the jss-main (for example) placeholder in the Layout Service Placeholders field.

Renderings also have this Layout Service Placeholders field.

Sitecore will ignore any presentation details where the placeholder isn't defined in the definition item of the Layout or Rendering.

Answer 2

SXA JSS sites should not be defined in the configuration files. Instead, they are configured using Sitecore items. Please refer to this article for more details on how to manage JSS apps with SXA.

Don't use jss deploy config command on an SXA JSS website.

If you use it to deploy config for the graphql endpoint. Ensure the site and apps node are commented.

<?xml version="1.0" encoding="UTF-8"?>
<!--
  JSS Sitecore Configuration Patch File

  This configuration file registers the JSS site with Sitecore, and configures the Layout Service
  to work with it. Config patches need to be deployed to the Sitecore server.

  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
-->
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:role="http://www.sitecore.net/xmlconfig/role/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
   <sitecore>
      <settings>
         <!--
        PROXY CONFIGURATION
        When running JSS with the headless proxy (node-headless-ssr-proxy),
        the original IP address of clients is obscured by the proxy.
        This setting tells Sitecore to read the forwarded header the proxy sends,
        thus making analytics track the correct original client IP address.
      -->
         <setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
      </settings>
      <sites>
         <!--<site patch:before="site[@name='website']" inherits="website" name="mysite" hostName="cm.mysite.local" rootPath="/sitecore/content/mytenant/mysite" startItem="/home" database="master" />-->
      </sites>
      <javaScriptServices>
        <apps>
             <!--<app name="mysite" sitecorePath="/sitecore/content/mytenant/mysite" useLanguageSpecificLayout="true" graphQLEndpoint="/api/mysite" inherits="defaults" />-->
         </apps>
      </javaScriptServices>
   </sitecore>
</configuration>

The config is typically deployed to the zzz folder or the folder mentioned in the sitecoreConfigPath in package.json