Full-Stack Local XM Cloud Dev Environment Tutorial - Set up


So you’re looking for a Full-stack Local XM Cloud Dev Environment Tutorial? Well, setting up a local cloud development environment can be tricky with so many requirements and moving parts. However, with the right steps and prerequisites in place, you can avoid many common struggles. Heck, perhaps you've already read through tutorials and setup guides but still ran into issues.

This Full-stack XM Cloud local development Tutorial is written by Yaochang Liu, a Sitecore Content Hub Administrator Certification winner and experienced developer from Qedge.

Yaochang, we really appreciate your effort!

So, let's get started.

How To Create A Local Sitecore XM Environment For XM Cloud

I'd like to share our experience and SOP of how to establish the Full-stack XM Cloud local development environment in this article.

Total Time: 1 hour

1. Preparation and Docker Installation

Please refer to How to Set up Docker for XM Cloud Dev and then go on.

2. Create A New Rendering Host Item

Server-side rendering engine(1)

Create new item /sitecore/system/Settings/Services/Rendering Hosts/Local
Server-side rendering engine endpoint URL http://rendering:3000/api/editing/render
Server-side rendering engine application URL http://rendering:3000/

3. Edit Site Item

Predefined application rendering host

Change the Predefined application rendering host to Local under the item path /sitecore/content/Play/Play/Settings/Site Grouping/Play

4. Set Up .env.local

Open FE root folder of the project src>sxstarter and duplicate the file .env and then rename it to .env.local

5. Edit .env.local


You can get the value of
JavaScriptServices.ViewEngine.Http.JssEditingSecret (https://xmcloudcm.localhost/sitecore/admin/ShowConfig.aspx)
the value of JSS_EDITING_SECRET(1)
You can get the value of SITECORE_API_KEY from the Item ID of /sitecore/system/Settings/Services/API Keys/xmcloudpreview
Remove comments to enable debug
and start debugging

6. Visit Rendering Host

In "sxstarter", run
npm install
npm run start:connected

and then visit http://localhost:3000

7. Query Data from Graph QL ui

query {
# path can be an item tree path or GUID-based id
item(path: "/sitecore/content/Play/Play/home", language: "en") {

qedge_XM Cloud APIkey

8. Link Pages To The Local XM Cloud Instance

Visit https://pages.sitecorecloud.io/
Add the following entry to it
Refresh the page to check it out!
connect to pages and refresh the page(1)

QEdge's LinkedIn Page