Getting to Know Sitecore XM Cloud Development: Part One

Sitecore Experience Manager Cloud (Sitecore XM Cloud) allows organizations to create a customized, private cloud-based content management system for more relevant and engaging customer experiences across channels.

XM Cloud’s central role in the Sitecore Digital Experience Platform means that development, product, and marketing product teams can all benefit from knowing the basics of how to use it. This information can make cross-team collaboration easier, and of course it can also streamline development for XM Cloud.

We’re Solution Architects with extensive experience on XM Cloud projects for Rightpoint clients. Over time, we’ve seen that organizations where all stakeholders start with a basic understanding of XM Cloud implementation requirements have an easier time developing and benefiting from proven execution strategies.

Key Takeaways

• Building a successful project execution strategy starts with selecting the right local development approach.

• Setting your dev team up for success is easier with customizable scaffolding tools for component creation.

• Partnering with seasoned Sitecore Architects enables your team to accelerate their learning process and maximize the effective use of XM Cloud.

Choosing Your Local Development Approach

How will your development team build components, scaffolding, and page architecture in the XM Cloud platform? The answer depends on the local development approach you choose.

Sitecore’s documentation provides great guidance on selecting a local development strategy, but in our experience, it can be helpful to have some additional perspective when choosing between the two most common approaches.

Front-end first development

Front-end first development is the approach that Sitecore recommends. Developers may work in a shared XM Cloud instance, which can foster collaboration and efficiency. Front-end first development can also support separation of front-end and back-end developers for a headless approach. For example, one team member might design and develop a component, a module, or other back-end feature in Sitecore, while a front-end team member can then use these foundations to rapidly make adjustments and instantly see the results in real time. The XM Cloud Pages editor also enables real-time updates proxying to your local development application, allowing developers to see their components in Pages before the code is deployed.

Front-end first pros and cons

• Better for teams with more front-end development experience.

• Faster component creation and real-time updates.

• Risk of team members “stepping on” each other’s work when changing configurations in the shared database.

Docker-based development

The more traditional docker-based development approach has team members working in silos. In this approach, the developers serialize feature components and other required items individually and then share them with other team members.

Docker-based pros and cons

• Finer-grained control over local instances.

• Allows for more consistency across the application.

• Takes longer to build components than the front-end first approach.

Beginning XM Cloud Development

After choosing a local development approach, the next step is to initialize your headless application. There is no "one size fits all" boilerplate project given the variety of project use cases, so it’s typically best to start with the XM Cloud Starter Kit provided by Sitecore to get your developers ramped up on XM Cloud quickly, and then start introducing an opinionated structure to the project based on past experiences. The XM Cloud Starter Kit will support either local development approach.

Properly chosen architectural principles provide a solid foundation for your team’s headless application, because it makes it easier for your developers to navigate through the project. We often recommend the Bulletproof React guide to clients using Next.js/React architecture, because it advocates for separation of concerns within projects—for example, moving your business logic away from your views and setting up your API layers with state management. In our experience, the Bulletproof approach makes it easier to detect and address issues early, and it keeps all team members on the same page.

Set Up Your XM Cloud Sprint 0 Essentials

With your project structure in place, it’s time to gather the rest of the resources your team will need for kickoff.

Component Scaffolding Tool

An effective scaffolding tool can help developers automate component creation to accelerate the feature building process. The same tool can also be customized as the project progresses to better meet the needs of the project, so the team can maintain its momentum. Sitecore JSS starter kits come with a scaffold command to create a simple component but lack the ability to provide guard rails and best practices in a maintainable fashion.

Therefore, we’ve found it helpful to build our own scaffolding tool to help clients with their headless projects. The scaffolding tool asks questions compiled from real project experiences, creating all necessary functionality from responses baked into component files that blend naturally with our pattern of development.

Each developer can then reverse-engineer the components and files to understand how the components are built so they can apply that going forward instead of learning from scratch.

We’ve seen that this approach is especially helpful to developers who are new to Sitecore because it quickly gets everyone up to speed and accelerates component creation.

A sneak peak of such scaffolding tool can be seen here.

Code repositories

Sitecore XM Cloud hosts its two primary applications—the rendering host and the platform—separately. With the ability to create and deploy distinct code repositories for each application, this separation streamlines development by reducing build times. Pull requests now impact only one application at a time instead of both, enabling faster and more efficient development cycles.

Serialization

Sitecore serialization plays an integral part in managing and transferring content and configuration item data throughout your Sitecore environments. Item Serialization is done by setting up serialization modules, paths, and rules within the application, configured for both local development and cloud environments. We like to separate our serialization modules as early as possible into four distinct item areas: Master, Structure, Content, and Local:

• Master module declares developer specific configurations, such as Sitecore Templates, Layouts, Renderings, Placeholder settings, Branches, System settings, PowerShell scripts, Custom Workflows, and so on.

• Structure module declares all entry points of content usually scoped to that Single Item, such as the Site Tenant and Site Items.

• Content module declares any content that gets promoted to higher-level environments. Content that is permanent and provides a starting point for authors should be serialized here*.

• Local module declares any items that are intended for Local development and will not be promoted to further environments. Items such as API Keys, Rendering Hosts, and Site pages and Site data are applicable.

* Any content that can possibly be deleted by authors should not be listed here, as serialization items are generated into an IAR package during the build and placed on the file system, therefore the item cannot be deleted from the platform until this IAR file removes that item reference.

Recommended reading

One of the most popular Sitecore JavaScript Rendering SDKs for JSS is the Sitecore JavaScript Rendering SDK (JSS) for Next.js. Sitecore offers comprehensive documentation on how to use this SDK, making it an essential review to fully grasp its concepts. Additionally, having a solid foundation of React is essential for effectively leveraging this SDK.

The team should also review the Sitecore Accelerate Cookbook for XM Cloud, which is “a set of recipes to guide the project team through an XM Cloud set-up, configuration and implementation.” Ideally, the team will also be aware of the differences between and limitations of content resolvers, Integrated GraphQL, Connected GraphQL, and component-level data fetching, all of which are covered in the Sitecore developer knowledgebase.

Kickstarting Your Sitecore XM Cloud Development

The practices and resources discussed here will help simplify your development team’s transition into Sitecore XM Cloud development. Having a solid understanding of the planning and preparatory steps can also provide valuable guidance for setting realistic development timelines. In our next Sitecore XM Cloud development post, we will take a deeper technical approach, covering performance optimizations, strategies for integrating external data, and composable architecture dependencies.

Rightpoint is a Sitecore Platinum Partner with digital experience delivery strategies honed through hundreds of projects for clients in a range of industries. If you’d like to learn more about using Sitecore XM Cloud, contact our experts for more information.