Tailwind Logo

Reflecting locally created components in XM Cloud's Staging

XM CloudCLI

Published: 2023-12-10

In the previous article, we created a component that uses all items called Types. This time, we will use this component and add it to the Staging server using the CLI.

Component Serialization

Serialize the created component and reflect it in the repository. For the serialization settings, we have prepared a file named src\SitecoreDemo.module.json in our environment, which contains the following settings.

JSON
{
  "namespace": "SitecoreDemo",
  "references": ["InitItems"],
  "items": {
    "includes": [
      {
        "name": "placeholders",
        "path": "/sitecore/layout/Placeholder Settings/Project/sitecoredemo-jp"
      },
      {
        "name": "demo-renderings",
        "path": "/sitecore/layout/Renderings/Feature/Demo"
      },
      {
        "name": "demo-settings",
        "path": "/sitecore/system/Settings/Feature/Demo"
      },
      {
        "name": "demo-branches",
        "path": "/sitecore/templates/Branches/Feature/Demo"
      },
      {
        "name": "demo-template",
        "path": "/sitecore/templates/Feature/Demo"
      },
      {
        "name": "renderings",
        "path": "/sitecore/layout/Renderings/Project/sitecoredemo-jp"
      },
      {
        "name": "templates",
        "path": "/sitecore/templates/Project/sitecoredemo-jp"
      },
      {
        "name": "languages",
        "path": "/sitecore/system/Languages"
      }
    ]
  }
}

The additional items, such as templates and rendering, are serialized in the above. The content is in a separate Json file, so everything can be serialized except for the content tree, which can be serialized.

The Sitecore CLI can be used to serialize the associated files.

PowerShell
dotnet sitecore ser pull -n default -i SitecoreDemo

Some data is actually serialized, added and updated as shown in the following screenshot.

uploadconmponent01.png

The following commands are reflected in Staging.

PowerShell
dotnet sitecore ser push -n staging -i SitecoreDemo

In this state, the site does not yet recognize the component. Set Types for the available components in /sitecore/content/sitecoredemo-jp/sitecoredemo-jp/Presentation/Available Renderings/Demo.

uploadconmponent02.png

Now that you are ready, open Pages. You will see that the component has been added to the left side.

uploadconmponent03.png

Summary

The procedure for reflecting locally created components on the XM Cloud side was carried out this time using the CLI. By making good use of the serialization mechanism, components can be developed and reflected in the cloud along with related data.

Tags