Contents

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

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

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

JSS_EDITING_SECRET=Auaroi0cAkwcL1m7oSkyVXzK0WhXUiSxN27Uo6XEOI5Si6rlbfR4l2pXk0pGUUOc SITECORE_API_KEY=F5B0E4FE-0A60-475C-8995-900BB4846BE9 GRAPH_QL_ENDPOINT=https://xmcloudcm.localhost/sitecore/api/graph/edge JSS_APP_NAME=Play NODE_TLS_REJECT_UNAUTHORIZED=0
You can get the value of
JSS_EDITING_SECRET
from
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
SITECORE_API_KEY(1)
Remove comments to enable debug
DEBUG=sitecore-jss:*,-sitecore-jss:layout
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

https://xmcloudcm.localhost/sitecore/api/graph/edge/ide
query { # path can be an item tree path or GUID-based id item(path: "/sitecore/content/Play/Play/home", language: "en") { rendered } }
{"sc_apikey":"f5b0e4fe-xxxx-xxxx-xxxx-900bb4846be9"}
qedge_XM Cloud APIkey