XM Cloud - Development Workflow

Summary

XM Cloud exclusively uses headless development. In our case, we are basing our solution off of the XM Cloud starter repository (opens in a new tab) that Sitecore provides. This means that we are using a next.js application for our headless development.

With the switch to headless comes a new idealogy of how we break up tasks between front end and back end developers. In some organizations there may no longer even be a designation for front end and back end on Sitecore projects anymore. We needed a way to let our front end development team continue to work without needing access to Sitecore and docker, while also allowing our back end developers the ability to learn next.js and focus on the integration of components and the back end coding aspect of next.js.

The Solution

The solution was to create a new folder in the src/app/src folder in the headless application called ui. We then had front end developers build out components there. The key is to set up all the props to allow JSX elements or string values.

Next, the front end developer would make a new folder under src/app/src/pages called cuts. They can then add a new page for each for a given scenario and place all the proper components on it. This allows front end developers the ability to mock up pages under cuts with static data.

At this point, front end development is complete. We now hand it off to a back end developer to integrate with props and write any api routes and logic if needed. Under the src/app/src/components folder a back end developer would make the same component and reference the front end component.

Next, the back end developer would pass in all the proper props from the rendering, as well as reference the next-js jss Sitecore library JSX elements Sitecore gives you. This makes it so Experience Editor and Pages will work as expected and your proper data will make it into the final component on your headless site from the XM Cloud CMS.

Now the component is fully set up and done.

Conclusion

Headless Sitecore and XM cloud gives you the flexibility to create your own development workflows and to define how you want to develop and integrate your components. This process may not work for every team or organization, but it worked really well with our team. It gave front end developers the ability to work independently of Sitecore, while also letting back end developers learn next.js and integrate fully into Sitecore.