How to Configure an External Editing Host for Sitecore XM Cloud

👋Introduction

Configuring an external editing host in XM Cloud can significantly improve your content editing workflow, especially when managing multiple websites with different codebases. Whether you're using Sitecore Experience Editor or Sitecore XM Cloud Page Builder (formerly known as Pages Editor), an external editing host allows your development team to check page functionality, ensure correct data rendering, and enhance editing efficiency. This article explains how to set up an external editing host, its benefits, and the steps to configure it effectively.

🙋‍♂️What Are Editing Hosts and Rendering Hosts?

When using Sitecore XM Cloud, it's important to understand the difference between editing hosts and rendering hosts because they play different roles in your content management system. 🔝

Understanding the Rendering Host

This is the front-end application responsible for displaying your website to end-users. It’s hosted on platforms like Vercel and optimized for live traffic. This is the public-facing side of your XM Cloud environment.

💡 Hosted on platforms like Vercel
💡 Set up and scaled to manage live traffic
💡 The public-facing part of your website

Exploring the Editing Host

This component enables editing experiences within XM Cloud, such as the Sitecore XM Cloud Page Builder, and is not designed for public traffic. It enables WYSIWYG (What You See Is What You Get) editing experiences. When you deploy an XM Cloud environment using the Deploy app, a default editing host is provided by Sitecore. 🔝

💡 Allows editing within the XM Cloud setup
💡 Not set up to handle live traffic
💡 Includes settings that tell Sitecore XM which application code and configurations to use
💡 Uses the same code as the rendering host app (Later, we will explore how to use the different code base.)

XM Cloud is a powerful platform for managing and delivering content-driven experiences, featuring tools like Sitecore XM Cloud Page Builder for editing pages and layouts. To support these editing experiences, XM Cloud uses an editing host—a specialized application instance that enables WYSIWYG (What You See Is What You Get) editing without handling live traffic.

💸Benefits of Configuring a Sitecore Headless External Editing Host

Before moving into the importance of the External Editor Host, lets first understand how your Code Repository and your XM Cloud Environment (CM instance) connected with each other: 🔝

If you look at the diagram above, it clearly shows that the Git Repo is linked to the XM Cloud Project, and the Git Repo Branch is linked to the XM Cloud Environment (CM instance). This means the default editing host created by Sitecore XM Cloud uses a single code base based on the Monorepo branching strategy. Now, consider the situation where you have different code bases for different websites, either in separate Git Repo Branches or different folders within the same Git Repo Branch. How would you validate those code bases with the Sitecore XM Cloud Page Builder?🤔

In these situations, your solution is an external editing host. Hosting your editing environment externally lets your team edit pages efficiently while keeping the production rendering host optimized for live traffic. This setup is especially helpful for projects with multiple codebases in different repositories, as it helps developers manage these complexities: 🔝

✅ Managing multiple websites with separate codebases and repositories.

✅ Verify that pages load correctly in Sitecore XM Cloud Page Builder

✅ Verifying page rendering and data accuracy in Page Builder

✅ Supporting development teams working with custom front-end applications hosted outside XM Cloud.

⚡Using Different Rendering Hosts in Sitecore XM Cloud

Based on the information above, I created a diagram to show how the Default Editing Rendering Host, Rendering Host, and External Editing Host (Custom Editing Host) work. The diagram illustrates how different code repositories fit with the benefits of using an External Editing Host and how it can be used with MASTER / PREVIEW/ EXPERIENCE EDGE Content: 🔝

🪜Steps to Configure an External Editing Host in Sitecore XM Cloud

1️⃣ Prerequisites

Before setting up an external editing host, ensure you have:

✔ Deployed your project and environment in XM Cloud
✔ Access to the XM Cloud Deploy app 🔝
✔ An available hosting provider for the external editing host (e.g., Vercel, Netlify, Azure Web App).

2️⃣ Configure Environment Variables

1. Open Sitecore XM Cloud Deploy App

2. Navigate to Developer Settings and set Context to Preview

3. Copy the following environment variables into your project:

   • SITECORE_EDGE_CONTEXT_ID

   • SITECORE_SITE_NAME

   • JSS_EDITING_SECRET

3️⃣ Ways to Host Your XM Cloud SXA Site

In this section, I will share different methods for hosting your Sitecore XM Cloud SXA site by using the environment variables from Step-2. Understanding these options will help you choose the best hosting solution for your project's specific needs, ensuring optimal performance and scalability. Whether you prefer cloud-based platforms like Vercel or traditional hosting providers, you'll find useful information here.

⚡Deploy your XM Cloud Site to Vercel

If you want to deploy your Sitecore XM Cloud Headless SXA Site to Vercel, check out the articles below for more information: 🔝

⚡Deploy your XM Cloud Site to GitHub Codespaces

As Sitecore XM Cloud becomes more popular with modern developers, many front-end developers prefer not to use Docker-based local development environments. A great tool for this is GitHub Codespaces, a cloud-based development environment. It can be used to deploy your Sitecore XM Cloud Next.js codebase and use the GitHub Codespaces provided Rendering Host as an Editing Rendering Host to validate your codebase by connecting with the Sitecore XM Cloud Headless SXA Site. You can find detailed steps in the article below: 🔝

⚡Deploy your XM Cloud Site to Vercel Using Azure DevOps

The article below will show you how to deploy your XM Cloud Next.js codebase to Vercel using Azure DevOps:

4️⃣ Get details of Predefined application editing host in XM Cloud

1. Open XM Cloud → Content Editor 🔝

2. Navigate to /sitecore/content/<SITE_COLLECTION>/<SITE>/Settings/Site Grouping/<SITE>

3. Note the value of Predefined application editing host (image reference: Sitecore)

   

5️⃣ Configure Rendering Host Settings

1. Navigate to /sitecore/system/Settings/Services/Rendering Hosts 🔝

2. Click the item that matches your Predefined application editing host (e.g., "Default").

3. It's a good idea to create a copy of the Predefined application editing host and name it externaleditinghost

4. Set the following Server-side Rendering Engine URLs:

   For JSS 22.1 or later (Supports Metadata Editing):

    https://<DOMAIN_OF_EDITING_HOST>/api/editing/render
   

   For Older JSS Versions:

    https://<DOMAIN_OF_EDITING_HOST>/jss-render
   

   Additional settings: 🔝

    Server-side rendering engine application URL: https://<DOMAIN_OF_EDITING_HOST>/
    Server-side rendering engine configuration URL: https://<DOMAIN_OF_EDITING_HOST>/api/editing/config
   

   

5. Click Save to apply your changes. 🔝

6. Navigate to /sitecore/content/<SITE_COLLECTION>/<SITE>/Settings/Site Grouping/<SITE>

7. Select the the externaleditinghost as your Predefined application editing host

8. Append the host name amitkumar-azuredevops-preview-xxxx.vercel.app of your external editing host in the Hostname field. You can use a pipe (|) to separate and list alternative names

    services.sxastarter.localhost|localhost|amitkumar-azuredevops-preview-xxxx.vercel.app
   

   

9. Click Save to apply your changes. 🔝

6️⃣ Verify the External Editing Host Setup in Sitecore Page Builder and Experience Editor

1. Open Sitecore XM Cloud Page Builder

2. Ensure pages load correctly from your external editing host

Test content editing and layout modifications

7️⃣ Connect External Editing Host directly in Sitecore Page Builder

If you want to check your code branch, which is different from the one used in the XM Cloud Default Editing Host, you can use the Sitecore XM Cloud Page Builder App and set the External Editing Host as Local Host in the Sitecore XM Cloud Page Builder App. The External Editing Host (Rendering Host) can be hosted in any of the following ways or based on your choice of hosting provider: 🔝

🏃‍♂️‍➡️Run the Rendering Host on your local machine using HTTPS.

🏃‍♂️‍➡️Run the Rendering Host on GitHub Codespaces (for development phase only).

🏃‍♂️‍➡️Run the Rendering Host on your preferred hosting provider, such as Vercel.

If you look closely at the diagram above ☝️, you'll see that I'm using a different code base in the External Editing Host. This helps me check changes without disrupting my XM Cloud Deployment process. 🔝

1. Screen -1: Displaying the use of Code Repository ONE with the Default Editing Host in the Sitecore XM Cloud Page Builder app, and rendering the Services website.

2. Screen -2: Displaying the use of Code Repository TWO and rendering the Financial website on External Rendering Host

3. Screen -3: Displaying the use of Code Repository TWO, setting the Local Host as the External Editing Host in the Sitecore XM Cloud Page Builder app, and rendering the Services website.

4. Screen -4: Displaying the use of Code Repository TWO, setting the Local Host as the External Editing Host in the Sitecore XM Cloud Page Builder app, and rendering the Financial website.

🦾Best Practices and Considerations for Using External Editing Hosts

🔹 Automatic Updates: Remember to update your XM Cloud environment while working on your front-end application.

🔹 Security: When using an External Editing Host, do not use FORM-based authentication, such as Vercel Authentication. This is because the Page Builder or Experience Editor calls the /api/editing/render with necessary parameters to display the website, and you will encounter errors like this one. 🔝

Connection to your rendering host https://xmc.sitecorecloud.io/api/editing/render failed with 
the following error: The remote server returned an error: (500) Internal Server Error.

Unable to connect to your rendering host at http://rendering:3000/api/editing/render

(403) Forbidden

Connection to your rendering host failed with the following error: 
The remote server returned an error: (500) Internal Server Error.

Here is a sample request for your reference:

https://amitkumar-azuredevops-preview-xxxx.vercel.app/api/editing/render?sc_itemid=xxxx&sc_lang=en&sc_site=Financial&sc_layoutKind=final&mode=edit&secret=xxxxx&route=%2Fpersonal&tenant_id=xxxx

One thing to remember is that the SECRET used in the query string parameter must match your environment variable JSS_EDITING_SECRET found in the XM Cloud > Developer settings

🔹Efficiency: Let your development team check page edits and data loading instantly.

🔹Scalability: Separate the editing and rendering hosts to improve performance for both editors and end- users. 🔝

💡Conclusion

Setting up an external editing host for XM Cloud is a great way to improve your content editing process. By using this guide, you can create a custom editing host, connect it with XM Cloud, and make sure your team can easily edit and check pages. Whether you're handling different codebases or several websites, an external editing host gives you the flexibility and control to provide outstanding digital experiences.

💬 Share Your Experience!

Have you configured an external editing host before? Share your insights, challenges, and best practices in the comments below! 🤝🙏

🙏Credit/References

🏓Pingback