Skip to main content

Sitecore XM Cloud local development setup

Below are my notes when setting up a local Sitecore XM Cloud development environment. There are many good blog articles for local XM setup but the following 3 were the most useful for me

Blog 1 - Used for Docker setup
Blog 2 - Used for Rendering site setup
Blog 3 - Used to install test content in local CM

Using the information from the first 2 articles I was able to setup my local docker environment by running the up.ps1 script and then having a local Sitecore instance running on
https://xmcloudcm.localhost

I also had my local next js rendering site running using start:connected and accessed using the url
http://localhost:3000

You can write all your rendering React code in your React app. You can create components using Json renderings in Sitecore and have corresponding tsx files in the components folder of your React app. For any Sitecore content items that are part of the component, you serialize those items as yml files in your codebase.

Important Files
scjssconfig.json => contains jss config for local Sitecore CM
sitecore.json => contains path of the serialization folder and files

user.json => contains user specific config details to xmcloud dev and local

Setup Option #1 

This is an ideal setup so that all developers have a local Sitecore instance they can use for development. This only works with Windows machines since the Sitecore XM Cloud Foundation template relies on Windows-based Docker containers.


Setup Option #2 

Most of the information in this article is about option #1 but there is another option that can be considered and worked for me. If your team consists of more front end React developers who are all on Macs, this second option would work for you. So all the developers would use a Sitecore XM cloud environment as their local Sitecore instance. This needs more communication among the developers so they don't step on each other's items and bring an environment down for everyone. But it works as long as everyone understands what they are doing. Worst case be ready to bring down an environment and re-create it if needed.

Setup Option 2

Conclusion 

It's nice that with Sitecore XM Cloud development your local setup is more simpler than traditional Sitecore local setups. Additionally you are no longer tied to using a Windows machine. Happy XM Cloud Sitecoreing!


By

Comments

Post a Comment

Popular posts from this blog

Back-End and Front-End Development in Sitecore XM Cloud

By
  Understanding the Roles In Sitecore XM Cloud, back-end developers primarily manage content models, custom APIs, and data within the Sitecore CMS backend. On the other hand, front-end developers focus on building the user interface and interactions using a JavaScript framework like React, consuming content from the backend via GraphQL endpoints. The headless CMS architecture of Sitecore XM Cloud allows the front-end to be largely decoupled from the back-end, providing flexibility in technology choices and development workflows. Back-End Developer Responsibilities Back-end developers in Sitecore XM Cloud are responsible for: Deployment of all custom components to XM Cloud. Synchronizing components, code, and content between Prod and Non-Prod environments. Answering questions from content authors regarding component usage, troubleshooting site load, caching, and component versions. Troubleshooting Edge CDN issues related to content updates. Designing and managing content structures,...
Post a Comment
Read more

Create Object XML while Debugging in VS

By
 There are times when you put breakpoints in Visual studio and read object values within Visual Studio. This is all good if you are doing some debugging. But if you want to save an object like a Json object in Visual studio there isn't a straightforward way to do that. I found this piece of code that I copied and pasted in the Immediate Window in Visual Studio and was able to save the object as an XML file. (new System.Xml.Serialization.XmlSerializer(YourObject.GetType())).Serialize(new System.IO.StreamWriter(@"c:\tmp\YourObject.xml"), YourObject) Happy Sitecoreing!
Post a Comment
Read more

Adding Entra ID Auth to a Blazor App

By
I wanted to take the time to write up this article since I found it useful when working on Blazor Apps. Althought this is not Sitecore related, I think it will be useful if we need to build an admin .NET portal. Additionally most organizations already have Entra ID if they use Microsoft apps and building Entra ID Authentication wont add costs like other Authentication methods would. To get started make sure the following packages are available (using NuGet) in your solution. Microsoft.Identity.Web Microsoft.Identity.Web.UI Azure.Security In your Program.cs file, add the following using Microsoft.AspNetCore.Authentication.OpenIdConnect; using Microsoft.Identity.Web; using Microsoft.Identity.Web.UI; // Add Microsoft Entra ID authentication builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme) .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd")); builder.Services.AddAuthorization(options => { options.FallbackPo...
Post a Comment
Read more