Kickstart XM Cloud Journey with Sitecore Content SDK

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
A black background with white text

AI-generated content may be incorrect.

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 Generation) or SSR (Server-Side Rendering):

·       Choose SSG for static sites

·       Choose SSR if your components require dynamic rendering

For this demo, we’ll select SSG.

A screenshot of a computer AI-generated content may be incorrect.

A screen shot of a computer AI-generated content may be incorrect.

Once complete, you’ll have a Next.js app created in your chosen folder.

 A screenshot of a computer AI-generated content may be incorrect.

Install the Content SDK CLI

The Content SDK CLI provides useful commands to create components and manage your Content SDK applications.

To install it globally:

npm install -g @sitecore-content-sdk/cli
A screen shot of a computer

AI-generated content may be incorrect.

After installation, open your new app in Visual Studio Code. You’ll notice several environment files (like .env.example) already created.

A screenshot of a computer AI-generated content may be incorrect.

Set Up Environment Variables

We’ll now configure the environment connection to your XM Cloud instance.

1.      Duplicate one of the existing .env files (for example .env.remote.example)

2.     Rename it as .env.local

A screenshot of a computer program AI-generated content may be incorrect.

We’ll fill this file with values from the XM Cloud portal.

Connect to XM Cloud Instance

1.  Log in to your XM Cloud portal:
https://portal.sitecorecloud.io/

A screenshot of a login form AI-generated content may be incorrect.

2.   Select your project.

A screenshot of a video game AI-generated content may be incorrect.

3.   Click Manage Environments

A white rectangular object with black text AI-generated content may be incorrect.

4.   Choose the desired environment

A white background with blue lines AI-generated content may be incorrect.

5.   Go to the Developer Settings tab and Select your site name, note the

o   SDK Version → Content SDK

o   Environment variables

A screenshot of a computer AI-generated content may be incorrect.

Copy all environment variable values and paste them into your .env.local file at respective places.

Build and Run the App

Once the .env.local file is configured, run:

npm run build

If you encounter errors, double-check your environment variable values from the XM Cloud portal and update them as needed.

A screenshot of a computer AI-generated content may be incorrect.

Save the file and run the build again

A screen shot of a computer AI-generated content may be incorrect.

When the build succeeds, start your app locally with:

npm run start
A screen shot of a computer AI-generated content may be incorrect.

You’ll see a local URL in the terminal, open it in your browser to view your app.

You’ve now successfully connected your local app to Sitecore XM Cloud using the Content SDK!

In the next post, we’ll explore how to create your first component using the Content SDK and integrate it into this app.

Happy coding!

Comments

Post a Comment

Popular posts from this blog

Beginner’s Guide: Step-by-Step Local Installation for Sitecore XM Cloud

Image
Many times, we want to accomplish a task but aren’t sure where to start—the same applies to Sitecore XM Cloud local setup and installation. In this guide, I’ll Walk you through the process of setting up a Sitecore XM Cloud environment locally, step by step. Sitecore XM Cloud is the cloud-native, headless version of Sitecore Experience Manager (XM), designed for modern, omnichannel digital experiences. It separates content management (authoring) from content delivery, enabling fast, API-driven, and scalable architectures. Developers can deliver content to web, mobile, and other channels via GraphQL APIs and Experience Edge, while content authors manage items in a cloud-first environment. Even though XM Cloud is cloud-first, a local environment is essential for: Experimenting safely with content, templates, and workflows. Testing headless frontends like Angular, React, or Next.js. Debugging GraphQL queries and APIs efficiently. Validating scheduled tasks...
Read more

Setting Up Sitecore Headless with Next.js in Disconnected Mode

Image
Sitecore Headless CMS offers a flexible way to integrate with different frontend technologies. For developers working with frameworks like Next.js, Sitecore provides various ways to set up the environment, including four distinct modes: Disconnected Mode , Connected Mode , Integrated Mode , and API Mode . Each mode offers unique features for different stages of development and production needs. What Is Disconnected Mode? Disconnected Mode is designed for local development and testing without requiring a direct connection to the Sitecore platform. In this mode, data is typically retrieved from static files (like YAML or JSON), and content updates are done manually. This mode is ideal for frontend developers who want to focus on building the user interface and the site’s functionality without waiting for backend integration. In Disconnected Mode , the data flow is not dependent on the Sitecore CMS. Instead, content is stored locally in static files, which are easier to manage and qu...
Read more

Migrating from Sitecore JSS SDK to Content SDK – Best Practices and Pitfalls

Image
The Sitecore JSS SDK has been a staple for building modern headless websites with XM Cloud and Sitecore XP. It offers deep integration with the Sitecore Layout Service, letting frontend developers render content directly based on Sitecore-managed components. Now, with the introduction of the Sitecore Content SDK, teams have a lightweight, REST-first way to fetch clean JSON data, leaving rendering entirely to the frontend. For projects focused on performance, composable architectures, or custom rendering logic, the Content SDK can be a compelling choice. If you’re considering a switch from JSS SDK to Content SDK, this guide walks you through how to migrate, best practices, and the pitfalls to avoid. Why Migrate to Content SDK? Lightweight: No dependency on Layout Service rendering. Faster payloads: Returns only the requested fields, reducing over-fetching. Flexible rendering: Total control of frontend presentation. Better for static generation: Idea...
Read more