How to quickly configure additional internal editing rendering hosts in Sitecore XM Cloud

Today, I’m bringing a short tutorial regarding how to configure additional internal rendering editing hosts in XM Cloud. You should know that there is a multisite add-on for handling multisite scenarios in the same head application, but there might be scenarios when you need to use additional head applications, so you need to set up additional editing hosts.

After looking through the XM Cloud documentation, I couldn’t find any clear guidance on how to configure a second or third internal editing host in XM Cloud. It only describes how to configure external editing hosts.

But I’ve also found the following the XM Cloud Build configuration documentation:

According to this documentation, I assume that I can define multiple internal editing hosts in XM Cloud, so let’s give it a try.

First steps

As usual, I grabbed the XM Cloud Foundation Head repository from GitHub and cloned it. I went to the src folder and I duplicated the sxastarter folder with a new name: second-rendering-host.
After duplicating the folder, I opened the package.json file in the second-rendering-host folder and made the necessary updates. (Updating the app name)

{
  "name": "second-rendering-host",
  "description": "Application utilizing Sitecore JavaScript Services and Next.js",
  "version": "21.5.0",
  "private": true,
  "config": {
    "appName": "second-rendering-host",
    "rootPlaceholders": [
      "jss-main"
    ],
......

I went back to the root folder and edited the xmcloud.build.json file. (Adding the new rendering hosts entry besides the existing one). You need to ensure that path property points to the proper folder.

 "renderingHosts": {
      "xmcloudpreview": {
        "path": "./src/sxastarter",
        "nodeVersion": "16.15.1",
        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
        "enabled": true,
        "type": "sxa",
        "lintCommand": "lint",
        "startCommand": "start:production",
        "buildCommand": "build",
        "runCommand": "next:start"
      },
      "second-rendering-host": {
        "path": "./src/second-rendering-host",
        "nodeVersion": "16.15.1",
        "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
        "enabled": true,
        "type": "sxa",
        "lintCommand": "lint",
        "startCommand": "start:production",
        "buildCommand": "build",
        "runCommand": "next:start"
      }
    }

(And of course, I made some hardcoded changes in both of the Layout.tsx files :) )

Once this is configured, I deployed to the XM Cloud by using the following command:

dotnet sitecore cloud deployment create --environment-id <env_id> --upload 

When the deployment was done, I checked the Rendering Hosts items in Sitecore, and I found the newly created second-rendering-host item was created during the deployment, and Server Side Rendering Engine URL values were in place too!

Verify

To quickly verify if it works as expected, I quickly created two headless SXA sites:

And ensured that the proper rendering host item is selected in the second-rendering-host site:

After opening Pages with the sxastarter site I can see my changes from the layout.tsx file.

Switching to the second-rendering-host site, I can see my changes from the second head application:

Summary

Although, I was not able to find clear guidance on how to set up a second editing rendering host, the steps were pretty straightforward and the Sitecore part/public URLs, etc were deployed/configured automatically.