Items created in Sitecore XM Cloud can be serialized as YAML files using the Sitecore CLI tools. This time, we will use this mechanism to manage site information on GitHub.
Creating a Tailwind CSS Sample Site with XM Cloud - Part 5 Serialization
XM CloudCLIHeadless SXAPublished: 2024-06-27
For the serialization procedure, we will be referring to the YouTube tutorial.
The GitHub Gist code introduced along the way is at the following URL.
Additional site settings
We will take this opportunity to add not only the site being created, but also the mechanisms that will be needed to actually use the site. First, since we will be using the Component Wizard to create custom components in the future, we will create a folder called Custom as shown below.
- /sitecore/layout/Renderings/Feature/Tailwindcss
- /sitecore/system/Settings/Feature/Tailwindcss
- /sitecore/templates/Branches/Feature/Tailwindcss
- /sitecore/templates/Feature/Tailwindcss
Now you are ready to serialize.
Identify which content to serialize
By using the Sitecore CLI, items created in Sitecore can be serialized (text data) and exported. Vice versa, it is also possible to import the data being output in serialization as an item.
In order to create a simple project, we will go into a little more detail regarding serialization. Detailed information on the command line can be found on the following page
In this case, we will create the Gist GitHub code shown in the video as src\tailwindcss.module.json. The template provided needs to be modified in several ways.
- <SITE_COLLECTION_NAME> : Set the name of the Site Collection (in this case Tailwindcss )
- <SITE_NAME> : Set the name of the site (in this case Tailwindcss )
It contains items that have been prepared as templates and will not be used for some time. Please remove the following code sections (there are three locations).
JSON
{
"name": "layoutsProject",
"path": "/sitecore/Layout/Layouts/Project/Tailwindcss",
"allowedPushOperations": "CreateUpdateAndDelete"
},
{
"name": "branchesProject",
"path": "/sitecore/templates/Branches/Project/Tailwindcss",
"allowedPushOperations": "CreateUpdateAndDelete"
},
{
"name": "layoutsFeature",
"path": "/sitecore/Layout/Layouts/Feature/Tailwindcss",
"allowedPushOperations": "CreateUpdateAndDelete"
},Also, add the following code because the folder used for component creation is not included.
JSON
{
"name": "projectRenderingsFeature",
"path": "/sitecore/layout/Renderings/Feature/Tailwindcss",
"allowedPushOperations": "CreateUpdateAndDelete"
},You are now ready to go. The actual code can be found here.
This serialization setup uses scope to set the rules for serializing items. The rules are as follows
- singleItem : Only the content item.
- itemsWithChildren : The content item and its immediate children.
- itemsAndDescendants : The content item and all its descendants.
- descendantsOnly : Only the descendants of the content item.
- ignored : All children and descendants are ignored except those previously matched.
For more information, please refer to the following pages
Run serialization
Since we are working in a local environment, the following command will connect to the local Sitecore.
PowerShell
dotnet sitecore loginOnce login is complete, serialization is performed with the following command.
PowerShell
dotnet sitecore ser pullThis results in the creation of many Yaml files in the items folder.
Import test
Check to see if you can reproduce the new environment using the files already created. Stop the Docker container running locally, delete the local data, and start a new instance again.
PowerShell
docker compose down
cd docker
.\clean.ps1
cd ..
.\up.ps1This will erase the data that was running and start a clean instance of CMS.
Now we will reflect the serialized data on the Sitecore side.
PowerShell
dotnet sitecore ser push
After completion, access to the content editor will show that the site has been imported correctly.
Summary
In this case, we were able to create a site, run serialization, and export and import CMS data. This allows us to manage the item's data in GitHub, allowing us to combine our branches with the XM Cloud environment to manage the process of development, testing, and deployment.
The code up to this time can be found in the following branches.
Related article
- Headless SXA - Using the Component Wizard
- Sitecore Content Serialization
- Sitecore Content Serialization configuration reference #scope