{"id":1365,"date":"2023-07-28T01:06:29","date_gmt":"2023-07-28T01:06:29","guid":{"rendered":"https:\/\/www.qedge.co\/blog\/?p=1365"},"modified":"2025-01-15T07:05:50","modified_gmt":"2025-01-15T07:05:50","slug":"full-stack-local-xm-cloud-dev-environment","status":"publish","type":"post","link":"https:\/\/www.qedge.ai\/blog\/full-stack-local-xm-cloud-dev-environment.html","title":{"rendered":"Full-Stack Local XM Cloud Dev Environment Tutorial - Set up"},"content":{"rendered":"\n

So you're looking for a Full-stack Local XM Cloud Dev <\/a>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.<\/p>\n\n\n\n

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

Yaochang, we really appreciate your effort! <\/p>\n\n\n\n

So, let's get started.<\/p>\n\n\n\n

How To Create A Local Sitecore XM Environment For XM Cloud<\/h2>\n\n\n
\n
\n\n

I'd like to share our experience and SOP of how to establish the Full-stack XM Cloud local development environment in this article.<\/p>\n\n<\/div>\n

Total Time:<\/strong> 1 hour<\/span><\/p>\n

\n
\n

1. Preparation and Docker Installation<\/h3>\n

Please refer to How to Set up Docker for XM Cloud Dev<\/a> and then go on.<\/p>\n<\/div>\n<\/div>\n

\n

2. Create A New Rendering Host Item<\/h3>\n
\"Server-side

Create new item \/sitecore\/system\/Settings\/Services\/Rendering Hosts\/Local<\/code>
Server-side rendering engine endpoint URL<\/strong> http:\/\/rendering:3000\/api\/editing\/render<\/code>
Server-side rendering engine application URL<\/strong> http:\/\/rendering:3000\/<\/code><\/p>\n<\/div>\n<\/div>\n

\n

3. Edit Site Item<\/strong><\/h3>\n
\"Predefined

Change the Predefined application rendering host<\/strong> to Local<\/strong> under the item path \/sitecore\/content\/Play\/Play\/Settings\/Site Grouping\/Play<\/code><\/p>\n<\/div>\n<\/div>\n

\n

4. Set Up .env.local<\/h3>\n

Open FE root folder of the project src>sxstarter<\/code> and duplicate the file .env<\/code> and then rename it to .env.local<\/code><\/p>\n<\/div>\n<\/div>\n

\n

5. Edit .env.local<\/h3>\n

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<\/code>
You can get the value of
JSS_EDITING_SECRET<\/code>
from
JavaScriptServices.ViewEngine.Http.JssEditingSecret <\/code>(https:\/\/xmcloudcm.localhost\/sitecore\/admin\/ShowConfig.aspx<\/a>)
\"the
You can get the value of SITECORE_API_KEY<\/code> from the Item ID of \/sitecore\/system\/Settings\/Services\/API Keys\/xmcloudpreview<\/code>
\"SITECORE_API_KEY(1)\"
Remove comments to enable debug
DEBUG=sitecore-jss:*,-sitecore-jss:layout<\/code>
and start debugging<\/p>\n<\/div>\n<\/div>\n

\n

6. Visit Rendering Host<\/h3>\n

In \"sxstarter\", run
npm install
npm run start:connected<\/code>
and then visit http:\/\/localhost:3000<\/a><\/p>\n<\/div>\n<\/div>\n

\n

7. Query Data from Graph QL ui<\/h3>\n

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

\n

8. Link Pages To The Local XM Cloud Instance<\/h3>\n

Visit https:\/\/pages.sitecorecloud.io\/<\/code>
Add the following entry to it
Key:
Sitecore.Pages.LocalXmCloudUrl<\/code>
Value:
https:\/\/xmcloudcm.localhost\/<\/code>
Refresh the page to check it out!
\"connect<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n

QEdge's LinkedIn Page<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":1416,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[35,23,27,24,63,64,80],"class_list":["post-1365","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-qedge-technologies-reviews","tag-sitecore-development","tag-sitecore-implementation","tag-sitecore-maintenance","tag-sitecore-xm-cloud","tag-sitecore-xm-cloud-tutorial","tag-xm-cloud-dev"],"views":7128,"_links":{"self":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/1365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/comments?post=1365"}],"version-history":[{"count":61,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/1365\/revisions"}],"predecessor-version":[{"id":7728,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/1365\/revisions\/7728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/media\/1416"}],"wp:attachment":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/media?parent=1365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/categories?post=1365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/tags?post=1365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}