Last week the Sitecore Symposium took place in Chicago after 3 years without having the in-person event, it was amazing to be back there and meet with people in person as well as the amazing community folks during the MVP summit.

One of the main announcements was the release of XM Cloud to the public, even though we already knew about the product, and had been able to test and play with it for a while now so decided to write a quick step-by-step guide to help devs getting started, get a better understanding on the development workflow, have a quick overview of the product and so on so forth.

For this demo, I’m not spinning up any local environment (Docker containers), to make it really simple, assuming we want only to tackle it from the front-end side development and we’re not deploying any customization to the XM.

About XM Cloud

Sitecore Experience Manager Cloud (XM Cloud) is a fully managed self-service deployment platform for developers and marketers to efficiently launch engaging omnichannel experiences in the Cloud using Sitecore’s headless CMS. Experience Manager Cloud bundles the latest versions of Experience Manager, the Pages editor, Sitecore Headless Experience Accelerator (S X A), Headless Services, the Sitecore Next.js SDK (and other Heads), and Experience Edge.

With an optimized cloud-based strategy, you can rapidly and cost-effectively scale to meet your customers’ needs, shorten your time-to-market, and be more adaptive as new capabilities and functionality are added to your Martech stack. Explore how the right cloud approach will help you thrive now and into the future.

Sitecore Experience Manager Cloud re-imagines Content Management and introduces a no-compromise Content Management System (CMS) that delivers developer agility through the best attributes of the headless CMS while empowering marketers through a visually rich, WYSIWYG page composition experience. With XM Cloud, our customers can deliver relevant experiences at high speed.

Speed: Visitors are greeted with an experience that loads lightning-fast and engages instantly
Relevance: Customers are recognized and welcomed back to an experience that understands their needs

The importance of your company’s growth comes with the:

Agility: Marketers can easily orchestrate the overall experience across digital campaigns
Flexibility: Developers can rapidly develop and launch new experience types with modern front-end frameworks

Architecture

XM Cloud comes with a Content Management application based on Sitecore XM including known but also new editing Tools. So, you will be able to use Content Editor as well as Experience Editor. In addition to these powerful tools, XM Cloud includes Sitecore Pages to manage your content and Design Pages, and many other tools.

The content delivery is provided by publishing to Edge. That can be Sitecore Edge (configured as default) but also other edge vendors.

Edge delivers content and design information headlessly through the GraphQL endpoint and can be consumed by any head technology such as Next.js, ASP.NET core, Angular, Vue or React.

Developers and System Administrators can manage the XM Cloud instances and deploy the custom CM (Content Management) customizations using the “build and deployment services” as well as the Deploy App that provides the functionalities via UI.

For reference, please check the official documentation here.

Now let’s put our hands to work

Creating the XM Cloud project and Site

The first step of course would be to login into the XM Cloud portal and create a new project.

We can now start from a template or from existing code, I’m selecting “Start from a starter template” as I want to use the XM-Cloud Foundation project.

Step 3 – *Integration with other providers to come*

Time to grab a coffee and by the time you’re back most probably the project would be ready, if that’s not the case, just have a look at the logs so you get a better understanding of what is going on there.

Now the deployment is done and our XM Cloud instance up and running.

If we have a look at Pages, we see the defualt Sitecore homepage, but the tree looks empty. So, let’s create our first site. For that, we go to the “Sites” tab and click on “Add your first website“:

We choose for this example the “Basic Site” template:

We give it a name (mysite) and click on create website, in a few minutes, the site will be ready.

After is done, we can get back to the “Pages” tab and start playing and exploring the new editor.

We can now publish the site to the Edge so we can start querying the GraphQL Endpoint:

Generating the Edge access token

Now that we have the site created and published to the Experience Edge, we have to create our Edge Token so we can set up our local Next.js app and also start querying the edge GraphQL endpoint.

We need now to connect to our XM Cloud instance, for doing that we can use the Sitecore CLI:

dotnet sitecore cloud login

After you get the code, then we can start using the CLI that is now connected to our XM Cloud instance. Now get the projects list and copy the project id corresponding to the recently created project.

dotnet sitecore cloud project list

dotnet sitecore cloud environment list --project-id {project-id}

Now that we know the environment id, we can run the script to generate the edge token. Go to the project root folder and run the following script:

.\New-EdgeToken.ps1 -EnvironmentId {environment-id}

We’ve created now the edge token, the script is already opening the GraphQL playground so you can add the X-GQL-Token to the headers and test a query to the home item:

Setup the local Next.js project

The first step is to navigate to the FE project (/../src/sxastarter) and duplicate the “.env” file, name it “env.local” that is already excluded from git, so that we avoid pushing changes to environment variables by mistake.

In the newly created .env file, we add the API key, GraphQL endpoint, and app name:

SITECORE_API_KEY: The token we generated in the previous step.
GRAPH_QL_ENDPOINT: https://edge.sitecorecloud.io/api/graphql/v1
JSS_APP_NAME: The site name we set in XM Cloud (mysite).

Now we are all set to start the next.js app locally and test it. Still in the same folder (/../src/sxastarter) we ran the commands to install all dependencies and then run the app in connected mode:

npm install
npm run start:connected

Open the browser and go to http://localhost:3000

Deploy to Vercel

Option A – Manual

Now that we have the FE app up and running locally, let’s move one step further and deploy it to Vercel.

We just need to set the environment variables (the same values we already used for the local app) and make sure the root directory is set to “src/sxastarter“.

Click deploy and keep checking logs to make sure everything is going as expected:

Here we go! The site is now running and hosted in Vercel.

Option B – Automatic (Experimental Feature)

First, we need to enable the experimental features, click on the settings icon, in the right upper corner and tick the checkbox:

Then we can go to the project settings and click on “Setup Hosting”

Click on “Create a new Vercel installation” to connect our instance to Vercel:

Select the options and accept them. Now is ready to go and deploy:

Go to Vercel and check its progress, the project is already getting deployed in Vercel!

Done! our site is now live and hosted in Vercel, with only a few clicks, amazing!

This blog post just shows how easy is to get started with XM Cloud, a bit of an overview of what you can expect, and a development workflow from a front-end point of view. Note: For backend development, customizations, etc. I’ll be just spinning up the containers locally and/or working with the Sitecore CLI to pull/push content, more on this later.

Thanks for reading!