Context
As the technical lead on the project, you need to set up the Project and Environment(s) in the customer portal, as well as a source code repository, so that the project developers can start implementing the client project, commit, and deploy their code.
Execution
There are two paths to setup the solution, depending on whether you are using a source code provider with a supported integration to the XM Cloud Deploy app or not. In the following use case we will focusing on GitHub, but Azure DevOps steps are available in the source control and hosting providers documentation.
Setting up your first Project, Environment, and Site - Supported Integration
In the process of creating a new Project, you connect a GitHub Repository. Make sure you grant following access rights:
- Read access to metadata
- Read and write access to administration and code
- Access to all repositories
If granting those permissions is against your organization’s security policies, follow the “No Integration” steps to setup the project. The Project and Environment creation process requires these to copy a GitHub project to your private or company repository.
In the setup process the project requires a name. Make sure to use proper Naming conventions in case your license allows to have to more than one project or your are planning more projects in the future. Similarly, when creating the first environment you will choose the name of the environment, make sure you are using a standard Naming convention.
Each environment needs to be setup to be a production or non-production environment. So it’s crucial to mark only the production environment accordingly and your QA and UAT environment as non-productions. Give the environments applicable names.
Starting from March 3, 2025, XM Cloud released a feature that allows to build and deploy environment and editing host separately. That means source code for authoring environment and head application can be stored in separate repositories. To enable the feature, follow the Deploy documentation.
Setting up your first Project, Environment, and Site - No Integration
When creating a project with no integration, you will need to use the Sitecore Cloud CLI.
-
Login to the XM Cloud Deploy App using the CLI
dotnet sitecore cloud login -
Create a project providing name of the project and the region where this should be created
dotnet sitecore cloud project create --name <project-name> -
Create an environment within that project passing the project ID of the previously created project and the environment name
dotnet sitecore cloud environment create ` --name <environment-name> ` --project-id <project-id-of-previously-created-project> -
Deploy to your environment using the environment id. This will provision the different XM Cloud resources, build and deploy the foundation head solution and run post actions.
dotnet sitecore cloud deployment create ` -id <environment-id-of-previously-created-environment> -
Fork the Foundation Head repository (for Next.js or for ASP.NET Core) into your source control
-
Deploy your custom solution using the environment ID and the upload parameter. Make sure to run this command from your solution root. Note: the deployment log can be followed live in the deploy app.
dotnet sitecore cloud deployment create ` -id <environment-id-of-previously-created-environment> ` --upload
Create a new Site
Once the process of provisioning the CM resources, and deploying your code and first items to the XM Cloud environment is done, you need to access the dashboard. From here you will create your first site.
For a client project, create an empty site - follow the Creating a Site recipe for further detail.
xmcloud.build.json file includes configuration for rendering host. Next.js is configured by default.
Sitecore XM Cloud currently does not support the automatic deployment of the editing host for ASP.NET Core Head applications. As a result, after deployment, Page Builder will display an error such as "unable to connect to the remote server". It is currently required to deploy an external editing host to support this.
xmcloud.build.json file includes configuration for rendering host. Next.js is configured by default. Thus, Angular needs to be configured instead of Next.js. You can do it by changing “enabled” setting.

Walk through the Solution
As mentioned earlier, it is required to start using the foundation head solution. This can be either cloned during the project creation process or forked separately.
The solution contains everything to run XM Cloud locally using Docker Containers as well as running the head application locally connecting towards the GraphQL Preview Endpoint.
The Next.js template it contains .env file for managing environment specific connection strings as well as the NextJS application named sxastarter.

ASP.NET Core Application should be created from the GitHub Template Repository. It contains headapps\aspnet-core-starter\appsettings.json file for configuring connection settings to run in connected mode and local-containers\.env.template file to use for running local Docker Containers.

Angular template it contains .env file for managing environment specific settings.

Don't try and force Helix into your front-end JavaScript application.
Helix is a set of project structure and dependency management principles that was very helpful when Sitecore XM/XP implementations were done entirely in back-end code. Helix is less useful in front-end projects built with JavaScript frameworks. Front-end projects are better off following the project structure best practices published by the front-end framework owners.
For ASP.NET Core, Helix might still be useful since most development is done in Visual Studio.
Items Serialization
The items folder contains serialized versions of the items coming from XM Cloud. Those items are stored in yml format and organized based on the item hierarchy and the configuration in the module.json files.
Check out the Setup Sitecore Content Serialization recipe for more details.
Platform
The platform folder can contain customizations you want to add to the XM Cloud content management instance. It is not recommended to do customizations.
The headapps folder represents the head application built with NextJS. it contains its own .env file. The src folder provides already implementation such as a out of the box components but also middleware functionalities such as redirects or personalization.
Middleware functionalities such as redirects or personalization are provided out of the box. Please note that the starter template currently uses the page router instead of the newer app router introduced with version 13.
In ASP.NET Core Starter Kit, the platform folder is in authoring subfolder.
The head application in ASP.NET Core Starter Kit is created using the new Sitecore ASP.NET Core SDK. It contains authoring and headapps subfolders to separate back-end Sitecore Platform and Head (ASP.NET Core) aspects.
The headapps folder represents the head application built with NextJS. it contains its own .env file. The src folder provides already implementation such as a out of the box components but also middleware functionalities such as redirects or personalization.
Proxy application is necessary for server-side rendering, editing in Pages and personalization.
Next Steps
Using .env.template
- Rename
.envto.env.templatein your solution root - remove confidential data from
.env.template - Set
.envto be ignored by git in.gitignorefile - update
init.ps1to copy.envfrom.env.templatebefore any of the env variables are set
Based on your framework, rename the project accordingly -
Rename the nextjs-starter Project:
- Rename
nextjs-starterapp folder name to your client related application name - Update the
appNameproperty in thepackage.jsonto your Site name field of your site item - In
.env.templatesetCOMPOSITE_PROJECT_NAMEto the new appname and setRENDERING_HOSTto match your new appname - In
init.ps1- change the certificate creation to create certificates according your
RENDERING_HOSTentry - change initialization of environment variables to use the
RENDERING_HOSTvalue - make host file adjustments use the host name from
RENDERING_HOSTenvironment variable
- change the certificate creation to create certificates according your
- In
docker-compose.overwrite.ymlchange rendering volumes to.\src\[YOUR_APP_FOLDER_NAME]:C:\APP - Update the source code path in the
xmcloud.build.json - In
cert_config.ymlchange traefik configuration to match theapp_folder_name - In
package-lock.jsonchange name field and packages name field toapp_folder_name - In
render.tschange the comment from sxastarter to yourapp_folder_name - In
Platform.csprojchange AssemblyName - In
AssemblyInfo.cschangeAssemblyTitleandAssemblyProductaccordingly - Rename Solution File
XMCloudSXAStarter.slnto what your are using in Assembly configurations.
Rename the aspnet-core-starter Project:
- Rename
aspnet-core-starterapp folder name to your client related application name. If you are using Visual Studio Code editor - ensure to rename the reference inheadapps\aspnet-core-starter.slnfile alternatively rename it in Visual Studio IDE. - Rename
headapps\aspnet-core-starter.slnas well asheadapps\aspnet-mega\aspnet-core-starter.csprojfiles. - Update value of
SITE_NAMEvariable inlocal-containers\.env.templateto a newappname. - In
local-containers\docker-compose.override.ymlfile update following entries to a newappname.
- In
.env.template:- set
COMPOSITE_PROJECT_NAMEto the new appname - set
RENDERING_HOSTto something matching your new appname
- set
- In
init.ps1:- change the certificate creation to create certificates according your
RENDERING_HOSTentry - change initialization of environment variables to use the
RENDERING_HOSTvalue - make
hostfile adjustments use the host name fromRENDERING_HOSTenvironment variable
- change the certificate creation to create certificates according your
- In
cert_config.ymlchange traefik configuration to match the app_folder_name - In the file
authoring\items\aspnet-core-starter\items\DefaultRenderingHost\Default.ymlupdate URL values to new one (appname). - Change name of the item serialization module namespace in the file
authoring\items\aspnet-core-starter\aspnet-core-starter.module.jsonto the newappname, rename the fileauthoring\items\aspnet-mega\aspnet-core-starter.module.jsonappropriately. - Rename the folder
authoring\items\aspnet-core-starterto use new appname. - Update the path in COPY instruction to the new one in the file
local-containers\docker\build\aspnet-mega\Dockerfile - Rename the folder
local-containers\docker\build\aspnet-core-starterto use new appname. - In the file
local-containers\scripts\up.ps1update following lines to use new appname.
Additionally, update references to the new app name in both README.md and local-containers\README.md files.
Rename the angular-starter Project:
- Clean up the starter kit. You can delete unnecessary parts. For example, “nextjs-starter” folder includes Next.js starter app.
- It is up to you to keep “headapps/spa-starters” folder structure or not. If you change the structure or rename, do not forget to update
xmcloud.build.jsonpath. - Rename
angularapp folder name to your client related application name - Update the
appNameproperty in thepackage.jsonto your Site name field of your site item - Update necessary parts in “scripts” section match with “angular-starter” name (e.g. build:server, lint etc.).
- Update “angular-starter” part in
angular.jsonfile. - In
package-lock.jsonchange name field and packages name field to app_folder_name. - In
Platform.csprojchangeAssemblyName. - In
AssemblyInfo.cschangeAssemblyTitleandAssemblyProductaccordingly. - Rename Solution File
XMCloudSXAStarter.slnto what your are using in Assembly configurations.
Insights
Structure in XM Cloud
When starting in XM Cloud the overall structure needs to be understood. When getting access to the Sitecore Composable DXP through the Sitecore Cloud Portal you’ll be part of an Organization that contains the subscription. Depending on the licensing model of your subscription you’ll be able to create and manage 1 to many XM Cloud projects each one containing 1 to many XM Cloud environments.
When to use Site Collections, Site Collection Folders and Site Folders
XM Cloud is made for multisite implementations. Dependent on the amount of sites you have and the requirements for separation, XM Cloud helps you to organize and manage sites in a hierarchical way.
Every site requires to be within a Site Collection. The Site collection can be seen as a brand folder. But the site collection is not only good for separating and organizing your sites, but also provides certain features. You can share content from one site to another within a site collection. You can create internal links between sites. Sites within a site collection share the same page templates.
If you need content separation you can create a dedicated site collection.
Review the Site Management and Multisite Architecture recipes for further details on how to setup the best multi-site setups.