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.
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:
Designating a browser, or even an alternative browser profile if nothing else, as a Pages validation area will help catching those bugs early on.
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.
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.
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:
Sitecore.Pages.LocalXmCloudUrl
.https://xmcloudcm.localhost/
.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.