Tutorial: How to Set Up XM Cloud

Overview

XM Cloud focuses on being a headless, enterprise content and website management system. You can manage XM Cloud via several UIs, and also through APIs and the CLI. For this tutorial, we will focus on the XM Cloud deploy UI for creating new XM Cloud projects and environments.

In this tutorial you wil do the following:

1. Log into the Sitecore Cloud Portal
2. Create a new XM Cloud Project using the Deploy XM Cloud UI
3. Setup your GitHub repository for your project
4. Create the hosted development environment

Prerequisites

In order to complete the following tutorial, you will need these resources:

1. A valid organization login for the Sitecore Cloud portal
2. Organization Admin role access or higher in the Sitecore Cloud portal to access XM Cloud Deploy tools to create projects and environments.
3. A GitHub source control account.

Setup the project and environment

Now, we will setup the project and environment that we will create therein. In the first stage, we will access the cloud portal and create a new project. A project is connected to a source code repository, for example, GitHub.

Each project can have multiple environments. A typical setup is to have one source code repository for one Brand or legal entity, and then have a DEV environment, QA, Staging or Pre Prod, and Production.

We will start with a Dev Environment for now, and create the other environments later.

Let’s get started!

Log into Sitecore Cloud Portal

1. To begin, open the Sitecore Cloud Portal (https://portal.sitecorecloud.io) and log in.
2. Access the XM Cloud project and environment management interface by clicking XM Cloud Deploy.
   

Create a new Project and Authoring Environment

1. From there, create a new project with the XM Cloud Deploy App by clicking Create project.

   

2. From here you provide a Project Name e.g. XM Cloud Tutorial Series and click the Continue button

   

3. Choose whether you want to connect to GitHub or to Azure DevOps. A starter solution will be copied to your connected source code repository as a starting point. For the sake of this tutorial you choose GitHub and click the Continue Button

   

   In the next step you can choose whether you want to start from the XM Cloud template or if you want to use your own code. The XM Cloud template is a starter kit based on Next.js, that already contains a rich set of features and sample implementations. It is best practice to start from the template.

4. Choose a GitHub Account from the dropdown or click on Connect to a new account and follow the steps to connect to a different account. Make sure you give rights to create a new repository in your account.

   Not every GitHub account can or should be used to create a source control connection. For account requirements and recommendation on creating a project with a GitHub source control connection, see Creating a source control connection with GitHub.

5. Provide a name for the repository e.g. xm-cloud-tutorial-series and click the Continue button.

6. Enter a name for the environment e.g. DEV

   

7. In the Production SaaS SLA section you will specify if this new environment is a production environment or not. Select No to make this a non-production environment.

8. Select whether you want to auto deploy on push to the repository. Select “Yes”. This enables the CI/CD pipeline from your main branch. This can be adjusted later.

9. Click the Continue button.

10. On the 5th step review your selections and click the “Start deployment” button

    

The deployment starts, and provisioning and build run in parallel.

What is provisioned for XM Cloud

So, how does this work? Referencing the figure below, let’s walk through the different bits and pieces of XM Cloud.

1. XM Cloud contains a Content Management (CM) instance (the violet box on the right) where authors manage their content, layout, and experiences. This is then published to the Edge layer.
2. Edge (yellow box) is a geographically distributed delivery layer. Edge offers a GraphQL endpoint to allow applications to query for the content coming from XM Cloud.
3. Your app connects to Edge to retrieve data and can run with whatever host you are rendering your application on, such as Vercel, Netlify, AWS, Azure, or another vendor.
4. In order to utilize the WYSIWYG editing experience, an internal rendering host, or editing host (green box), is delivered with XM Cloud. This editing host is managed by Sitecore, and runs a Node server that can host any Node-based application.
5. The main way of accessing XM Cloud is through the Sitecore Cloud Portal (solid outlined box, 'Sitecore Cloud'). This GUI allows you to manage and access your different Sitecore Apps and Users. For an in-depth exploration of the Sitecore Cloud Portal, navigate here.
6. When developing with XM Cloud, you can use the available build and deployment services (purple box). XM Cloud has these services built-in, so that you do not have to think about building or provisioning the XM Cloud instance, it is all done for you. If you have more requirements than currently provided, you can set up your own build and deployment pipeline using the XM Cloud CLI.

While not pictured in the diagram, the XM Cloud CLI allows you to manage your XM Cloud instance and deploy, instead of using the GUI. You can also serialize content items that represent developer artifacts from your XM cloud instance into your source code repository. To learn more about serialization with Sitecore, navigate here.

Once the provisioning and build process are finished, the deployment starts. The moment the deployment is finished, you can start using the new XM Cloud environment. Some actions run in the background to warm up the application.

Related XM Cloud Documentation

• Getting started with XM Cloud
• Introduction to the Sitecore Cloud Portal
• Sitecore Cloud Portal roles
• What is an XM Cloud Project?
• What is an XM Cloud Environment?
• Deploying XM Cloud
• XM Cloud Deploy app
• Manage an XM Cloud environment
• XM Cloud Deploy API
• Creating an XM Cloud Project using the Sitecore CLI
• Serialization in XM Cloud
• Experience Edge architecture
• Creating a source control connection with GitHub

Related XM Cloud Accelerate guidance for Sitecore Partners

• Project Solution Setup