Get Sitecore Pages Running Against Your Local XM Cloud Environment

Navigating Browser Compatibility and Local Setup for Sitecore XM Cloud Pages

It goes without saying that as part of development you should be testing against a number of browsers. While there is certainly a lot greater proximity in presentation between them all these days, there are still fine nuances that each one brings to the table. While, Pages is still somewhat a work in progress, there are number of features coming to it in the near and future term and thus making sure your headless components operate as expected for the user is vital. Not everything that works in Experience Editor works in Pages.

Download a Secondary Browser

When it comes to validating your development workflow in Sitecore XM Cloud Pages, the steps we’ll cover below should really just be done in a single browser and likely a separate browser that you are using outside of regular development.

The reason is because we’re going to be altering specific attributes related to Local Storage while on Sitecore XM Cloud Pages and thus, if you forget, you could be easily mistaken which environment you’re working with.

There are a number of great alternatives to use if needed. In no particular order, some examples are:

• Microsoft Edge
• Brave
• Firefox
• Chrome
• Duck Duck Go
• Opera GX

Designating a browser, or even an alternative browser profile if nothing else, as a Pages validation area will help catching those bugs early on.

Setup Pages Locally

While in the past it was always important to validate a component’s usage in Experience Editor, even more so with the introduction of Sitecore SXA. It is now vitally important to validate a component, even something as simple as a banner component, while using Sitecore Pages. Out-of-the-box however, a local XM Cloud developer environment doesn’t have a working Sitecore Pages. It actually requires you to hook up the cloud version of Sitecore Pages to your local.

Modify Your Browser’s Local Storage

First thing first. In the browser of your choice, head on over to https://pages.sitecorecloud.io . Once there, navigate through your developer tool console to the Application / Storage panel.

1. In the Local Storage panel, click the line for XM Cloud Pages https://pages.sitecorecloud.io. This will then show the options. We need to update the list and create a new item by adding a new row with the following values:
   • Key: Sitecore.Pages.LocalXmCloudUrl.
2. Value: the URL of your local XM Cloud instance. For example, https://xmcloudcm.localhost/.

Update Your Local Development’s Environment Variables

Be sure to update your local environment variables in your .env.local file

SITECORE_Pages_Client_Host=https://pages.sitecorecloud.io
SITECORE_Pages_CORS_Allowed_Origins=pages.sitecorecloud.io
SITECORE_GRAPHQL_CORS=*.sitecorecloud.io

And that’s it. It’s a pretty easy setup required to get a local environment using Sitecore XM Cloud Pages.

---