Several times on this site in the past, we have provided examples of Sitecore XM Cloud using Tailwind CSS. This time, we have revamped the samples on the site and changed them to co-exist with the standard sxastarter samples.
The samples we have presented so far are as follows.
- Creating a Tailwind CSS sample site with XM Cloud - Part 6 Applying Tailwind CSS to Next.js
- Creating a Tailwind CSS Sample Site with XM Cloud - Part 5 Serialization
- Creating a Tailwind CSS Sample Site with XM Cloud - Part 4 Creating a New Site
- Creating a Tailwind CSS Sample Site with XM Cloud - Part 3 Protecting .env Files
- Creating a Tailwind CSS Sample Site with XM Cloud - Part 2 Deploying to XM Cloud
- Creating a Tailwind CSS Sample Site in XM Cloud - Part 1. Create New Repository
Change repository configuration
This time, the Tailwind CSS sample sites will continue to be available as before, and will be expanded to the following sites.
- src\tailwindcss
On the other hand, the originally provided sxastarter sample was removed. For this, we will retrieve it from the latest version of the sample and add it to be deployed at the following site.
- src\sxastarter
Now that you have two Next.js projects set up, you want to configure them to work as separate rendering engines. This procedure was introduced in the following blog.
Developing the local environment
The first step is to set up the local environment. This time, the following code was added to the .env.template file for the host information to be added.
Plain Text
# Configure host name for tailwindcss
TAILWINDCSS_RENDERING_HOST=tailwindcss.sxastarter.localhostModify the docker-compose.override.yml file to run each individual Node.js container. Note that we will adapt the description to the sample so that the default container is used by sxastarter this time. The differences in the code below are in the host of volumes, labels and rendering.
Dockerfile
rendering:
image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-rendering:${VERSION:-latest}
build:
context: ./docker/build/rendering
target: ${BUILD_CONFIGURATION}
args:
PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
volumes:
- .\src\sxastarter:C:\app
environment:
SITECORE_API_HOST: "http://cm"
NEXTJS_DIST_DIR: ".next-container"
PUBLIC_URL: "https://${RENDERING_HOST}"
JSS_EDITING_SECRET: ${JSS_EDITING_SECRET}
SITECORE_API_KEY: "${SITECORE_API_KEY_xmcloudpreview}"
DISABLE_SSG_FETCH: ${DISABLE_SSG_FETCH}
depends_on:
- cm
- nodejs
labels:
- "traefik.enable=true"
- "traefik.http.routers.rendering-secure.entrypoints=websecure"
- "traefik.http.routers.rendering-secure.rule=Host(`${RENDERING_HOST}`)"
- "traefik.http.routers.rendering-secure.tls=true"
tailwindcss:
image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-tailwindcss:${VERSION:-latest}
build:
context: ./docker/build/rendering
target: ${BUILD_CONFIGURATION}
args:
PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
volumes:
- .\src\tailwindcss:C:\app
environment:
SITECORE_API_HOST: "http://cm"
NEXTJS_DIST_DIR: ".next-container"
PUBLIC_URL: "https://${TAILWINDCSS_RENDERING_HOST}"
JSS_EDITING_SECRET: ${JSS_EDITING_SECRET}
SITECORE_API_KEY: "${SITECORE_API_KEY_xmcloudpreview}"
DISABLE_SSG_FETCH: ${DISABLE_SSG_FETCH}
depends_on:
- cm
- nodejs
labels:
- "traefik.enable=true"
- "traefik.http.routers.tailwindcss-secure.entrypoints=websecure"
- "traefik.http.routers.tailwindcss-secure.rule=Host(`${TAILWINDCSS_RENDERING_HOST}`)"
- "traefik.http.routers.tailwindcss-secure.tls=true"You can now launch two Next.js projects in their own containers.
Developing the XM Cloud environment
When adding a container in the XM Cloud environment, you need to add a definition in the xmcloud.build.json file. In this case, we have written the following.
JSON
{
"renderingHosts": {
"xmcloudpreview": {
"path": "./src/sxastarter",
"nodeVersion": "20.14.0",
"jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
"enabled": true,
"type": "sxa",
"buildCommand": "build",
"runCommand": "next:start"
},
"Tailwindcss": {
"path": "./src/tailwindcss",
"nodeVersion": "20.14.0",
"jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
"enabled": true,
"type": "sxa",
"buildCommand": "build",
"runCommand": "next:start"
}
},
"postActions": {
"actions": {
"warmUpCm": {
"urls": [
"/sitecore/shell",
"/sitecore/shell/Applications/Content%20Editor.aspx?sc_bw=1",
"/sitecore/client/Applications/Launchpad"
]
},
"populateSchema": {
"indexNames": []
},
"reindex": {
"indexNames": []
}
}
}
}The key point is the addition of Tailwindcss instead of just the standard xmcloudpreview for the renderingHosts definition. This ensures that when the project is deployed to XM Cloud, the Rendering Host items are generated separately.
This means that when the Tailwindcss sample site renders, simply specify a separately created Rendering Host to complete the switchover.
Isolation of serialised data.
In terms of content data, we have decided to manage them in separate repositories, as we want to manage them separately from now on. The repositories are as follows
The points of change take the following form.
- Separate json files are maintained for sxastarter and tailwindcss to allow for separate serialisation of each.
- sxastarter uses Default for Rendering Host, so it is not subject to serialisation
- tailwindcss uses a different Rendering Host and is therefore subject to serialisation
- In this case, the value changes depending on the environment, so the setting needs to be changed each time.
This repository allows work to be carried out in the local environment as well.
Summary
As it was becoming more and more of a hassle to create both the introduction using sxastarter and the sample implementation using Tailwind CSS in separate projects, I decided to make them coexist in one repository so that I could introduce tips on my blog in the future.
You can get a sample repository at this stage from the following.
- https://github.com/haramizu/sitecoredemo-jp/tree/part-7
- https://github.com/haramizu/xmc-content/tree/part-1