Posts

Create a Custom Component in Sitecore XM Cloud using the Content SDK

Image
In the previous blog , we saw how to set up and start working with the Sitecore Content SDK. Now, as promised, we’re back with the next blog on how to create component using the Content SDK and integrate it into your app. In this guide, we’ll create a custom component, register it in Sitecore XM Cloud, and make it available inside the Page Builder using the Content SDK. 1. Create a Component Item in Content Editor In Content Editor, navigate to: /sitecore/layout/Renderings/Project/DemoProject Clone an existing component or use Derivative Rendering to create a new one - Go to the rendering path you want to clone - /sitecore/layout/Renderings/Feature/DemoSite/CustomForm - Right click → Scripts → Clone Rendering Provide details in the clone wizard: - Rendering Name → RichTextBlockA - Module/Site → select your project/site name - For other tabs (Data, Parameters, etc.) → you can inherit or copy to change it as needed - Click Proceed   ...

Kickstart XM Cloud Journey with Sitecore Content SDK

Image
The Sitecore Content SDK enables developers to build front-end applications that connect directly to content hosted in XM Cloud . In this post, we’ll walk through how to set up your local environment, connect to an XM Cloud instance, and get your first Content SDK app running locally. Prerequisites Before we start, make sure you have: Access to an XM Cloud instance Visual Studio Code installed The latest version of Node.js installed You can verify your Node.js installed version by running following command: node -v Create a New App Folder Let’s create a folder for our app. You can name it anything, for example: mkdir ContentSDKDemoApp cd ContentSDKDemoApp Create a New Content SDK App Run the following command to download and initialize a starter Content SDK template : npx @sitecore-content-sdk/create-sitecore-jss nextjs You’ll be prompted to confirm the app location, type y to proceed. Next, it will ask you to select between SSG (Static Site Generatio...

Content SDK 1.1: Design Library Enablers, Cursor Rules, Optimized Editing & Preview, and More

Sitecore has released Content SDK 1.1 few days back, a powerful update that brings major improvements for developers building with XM Cloud and Next.js. This new version introduces: Design library enablers including import map and code generation support Cursor rules for AI-powered development assistance Editing & preview optimizations for smoother authoring experiences Display name-based routing with UTF-8 encoding Upgrade to ESLint 9 with flat config support Cache-busting improvements in the Design Library Numerous bug fixes and stability enhancements With a fresh start or upgrading from Content SDK 1.0.0, this release boosts productivity, enhances design-to-code workflows, and ensures smoother integration with Next.js apps. Upgrade Guide: Content SDK 1.0.0 → 1.1.0 1. Update Application Dependencies To update your dependencies, In your existing application's package.json file, update every @sitecore-conte...

Working Locally with Sitecore XM Cloud: Connecting, Managing, and Serializing Items

Image
In the previous blog , we walked through the step-by-step local installation of Sitecore XM Cloud. In this post, we’ll take the next step by exploring how to connect cloud and local environments setup by: Configuring item serialization Connecting to an XM Cloud environment Connecting to your local environment Pull serialized items from XM Cloud into your local repository Push serialized items into the local environment This workflow is essential because a local XM Cloud instance is a vanilla instance with no items. To work effectively, you’ll need to bring down items from your cloud environment. With Sitecore Serialization, you can sync items between cloud and local setups, ensuring your local development mirrors what exists in the cloud. Configure item Serialization The local installation includes the file at the below path for rendering host serialization authoring/items/next-starter.module.json For local development, you need a new ...