top of page
Writer's pictureGowtham

How to Set Up Sitecore XM Cloud Locally using Docker: A Detailed Guide

Updated: Jun 4, 2023

Are you looking to set up a Sitecore XM Cloud locally using Docker containers? In this comprehensive guide, I will walk you through the process of setting up a Sitecore XM Cloud environment using Docker containers.


Sitecore XM Cloud is a powerful platform that enables you to create and manage your digital content with ease. Leveraging Docker containers allows you to easily spin up a local environment that mirrors the production environment. This guide is perfect for developers, DevOps engineers, and anyone interested in learning more about Sitecore XM Cloud and Docker containers.


Let's dive in and get started!

 

Before we start setting up the Sitecore XM Cloud, ensure that you have the following prerequisites ready:

  1. A valid Sitecore License file

  2. .Net SDK 6.0 and runtime, which you can download and install from here. You can verify if you already have it installed by running the 'dotnet --info' command in your terminal.

  3. .NET Framework 4.8 SDK

  4. Docker for Desktop with Windows Containers enabled, along with other installation requirements for Docker Containers. You can find all the installation requirements on the Docker Containers Sitecore website.

  5. Node LTS, which you can download and install from here. The minimum required version is v18.13.0.

  6. PowerShell 5.1

  7. Hyper-V enabled from within the 'Turn Windows features on or off' option.

  8. An account on https://portal.sitecorecloud.io. If you already have access to the XM Cloud portal and are part of an organization, you can skip this step. Otherwise, register yourself even if you don't have an organization yet. You'll need to log in to your local environment using this account.

 

After ensuring that you have all the prerequisites in place, it's time to spin up the Docker containers. Follow these steps:

  • Clone the Sitecore XM Cloud repository from GitHub to your local machine. You can clone it to a directory of your choice. For example, D:\xmcloud directory.

  • Open PowerShell in admin mode and navigate to the directory where you cloned the XM Cloud repo. For instance, you can run the following command to switch to the directory:

cd D:\xmcloud\xmcloud-foundation-head
  • Run the following command in PowerShell

.\init.ps1 -InitEnv -LicenseXmlPath "C:\path\to\license.xml" -AdminPassword "DesiredAdminPassword"
  • Replace "C:\path\to\license.xml" with the path to your license file and "DesiredAdminPassword" with your desired admin password.

  • Once the command completes successfully, you'll see a message on the PowerShell window indicating that you need to set the NODE_EXTRA_CA_CERTS environment variable to avoid HTTPS errors. Copy the command provided in the message and run it on your terminal.

###########################################################################
To avoid HTTPS errors, set the NODE_EXTRA_CA_CERTS environment variable
using the following commmand:
setx NODE_EXTRA_CA_CERTS C:\Users\Gowthamaraja.Eswaramoorthy\AppData\Local\mkcert\rootCA.pem

You will need to restart your terminal or VS Code for it to take effect.
########################################################################### 
  • After running the command successfully, you'll get the message "SUCCESS: Specified value was saved." You can then close the terminal and reopen it again and navigate back to the directory where you cloned the XM Cloud repository.

  • Run the below command in terminal to download the images required for the XM Cloud:

.\up.ps1
  • When successful, you'll get the Device Confirmation screen on your browser. Confirm this to proceed with the next steps.

Device Confirmation Screen in XM Cloud
Device Confirmation Screen in XM Cloud
  • After confirmation, other preconfigured processes like Indexing and restoring the items will be processed. Once all processes are done successfully, you will get your local site opening on your browser.

Local Site of XM Cloud on Browser
Local Site of XM Cloud on Browser

At this point, we have successfully installed XM Cloud on our local environment using Docker Container.

 

Once you've successfully set up the XM Cloud on your local environment, the next step is configuring the front-end project. Follow the steps below:

  • Navigate to the src\sxastarter folder where you have the SXA starter template project.

  • In this folder, run the command:

jss setup
  • If the "jss" command is not available, install it using the command.

npm install -g @sitecore-jss/sitecore-jss-cli
  • After running the "jss setup" command in the "src\sxastarter" folder, a few configuration-related questions will be prompted.

  • To obtain the Sitecore API Key, go to the CMS and navigate to this path: "/sitecore/system/Settings/Services/API Keys/xmcloudpreview". Note that the XM Cloud environment is pre-configured with the GUID {B35645D5-D54B-4E92-87E8-718DB9DB4195}, which we will use.

Sitecore API Key Retrieval from CMS
Sitecore API Key Retrieval from CMS
  • The file scjssconfig.json is generated by the jss setup command, and it looks like:

{
  "sitecore": {
    "instancePath": "",
    "apiKey": "{B35645D5-D54B-4E92-87E8-718DB9DB4195}",
    "deploySecret": "hi7p5zg1l6h4ks5t6awfc3eo8g6d4xojsjxj3zmbo84g",
    "deployUrl": "https://xmcloudcm.localhost/sitecore/api/jss/import",
    "layoutServiceHost": "https://xmcloudcm.localhost"
  }
}
 

Before deploying the JSS app, we need to prepare the XM Cloud environment by creating a headless tenant and a headless site with the name of the JSS app. Here's how to do it:

  • The name of the JSS app can be found in the "package.json" file

Package.json File Displaying the Name of the JSS App
Package.json File Displaying the Name of the JSS App
  • Login to Sitecore and create the Headless Collection

Creation of Headless Collection in Sitecore
Creation of Headless Collection in Sitecore
  • Create Headless site.

Creation of Headless Site in Sitecore
Creation of Headless Site in Sitecore
  • Use the Deployment secret from the scjssconfig.json file.

Entering Deployment Secret in Sitecore
Entering Deployment Secret in Sitecore
  • Once the site is created run the below command to push the serialized items to Sitecore which includes the rendering item

dotnet sitecore ser push
 

Finally, it's time to start your app and see it in action. Follow the steps below:

  • To prepare the app, run "npm i" in your terminal. Once the installation is complete, run "npm run start:connected" to start the app in Sitecore connected mode.

  • The app should now be available on https://www.sxastarter.localhost/

  • Open the Home page in the Experience Editor and start developing.

Experience Editor Interface in Sitecore
Experience Editor Interface in Sitecore
  • To stop the container, change the directory to D:\xmcloud\xmcloud-foundation-head and run the .\down.ps1

That's it! You have successfully set up a Sitecore XM Cloud locally using Docker Containers. Happy coding!


I hope this guide has been helpful for those of you looking to get started with Sitecore XM Cloud and Docker. If you have any questions or need further clarification, feel free to reach out. Happy Sitecore development!

1,107 views0 comments

Comentários


bottom of page