Adding Rendering for use with XM Cloud : Haramizu.com

Language:

Adding Rendering for use with XM Cloud

Published: 2023-12-21

Sitecore tools are integrated with Next.js projects to enable WYSIWYG editing. While XM Cloud provides a default rendering instance, you can set up additional ones externally. This guide will review the steps using a previously created site.

Content Update

Please check the latest information on the following page

Creating template

Add Docker for rendering

By default, the container "rendering" is used to handle rendering of edits as seen in the Experience Editor in the local environment. This time, we will use a different container.

First, to run as a different host, please make the following entry in the .env file.

Plain Text

TAILWIND_HOST=tailwind.sxastarter.localhost
TAILWIND_HOST_INTERNAL_URI=http://tailwind:3000

The host name is basically OK, but due to the use of local self-certification, you can omit the certificate and other processing by using a subdomain of sxastarter.localhost as the host.

Then, add the following statement to the docker-compose.override.yml file

YAML

  tailwind:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-tailwind:${VERSION:-latest}
    build:
      context: ./docker/build/rendering
      target: ${BUILD_CONFIGURATION}
      args:
        PARENT_IMAGE: ${REGISTRY}${COMPOSE_PROJECT_NAME}-nodejs:${VERSION:-latest}
    volumes:
      - .\src\xmc-tailwind:C:\app
    environment:
      SITECORE_API_HOST: "http://cm"
      NEXTJS_DIST_DIR: ".next-container"
      PUBLIC_URL: "https://${TAILWIND_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.tailwind-secure.entrypoints=websecure"
      - "traefik.http.routers.tailwind-secure.rule=Host(`${TAILWIND_HOST}`)"
      - "traefik.http.routers.tailwind-secure.tls=true"

The above description is an imitation of the rendering description, but the name of the image is changed to be different, and the host name, label, etc. are also changed.

After making the changes, update the image with docker compose build and start the container with docker compose up -d.

Operation check

First, we will verify that the screen can be displayed on the original site using the Experience Editor. Access a local instance of XM Cloud, right-click on the target page in the Content Editor, and launch the Experience Editor. If the screen appears as shown below, the settings have been made correctly.

As for the site content, since it has not been imported for local, please execute the following command to import it.

PowerShell

dotnet sitecore login
dotnet sitecore ser push -n default

After the import is complete, open the content editor and the site tree is complete.

Create a new item under /sitecore/system/Settings/Services/Rendering Hosts to change the site that renders this site for display. Duplicate the original Rendering item and rename it.

Settings for rendering of the added site can be found in the item /sitecore/content/xmc-tailwind/xmc-tailwind/Settings/Site Grouping/xmc-tailwind, where Rendering host in Settings under the item

After changing the settings and displaying the Home item, the page was displayed as shown below.

You are now ready to set up your local environment.

As for the work, now that you have a new local rendering host, serialize the part and reflect it in the project.

Adding a second Rendering host to XM Cloud

Locally, this can be handled in the form of an additional Docker container as described above, but what if you are deploying in SaaS? This procedure is described in the following page.

Walkthrough: Configuring external editing hosts for XM Cloud instances

Now let's actually configure the settings. First, rewrite the xmcloud.build.json file as follows

JSON

{
  "renderingHosts": {
    "xmcloudpreview": {
      "path": "./src/rendering",
      "nodeVersion": "20.9.0",
      "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
      "enabled": true,
      "type": "sxa",
      "lintCommand": "lint",
      "startCommand": "start:production",
      "buildCommand": "build",
      "runCommand": "next:start"
    },
    "xmc-tailwind": {
      "path": "./src/xmc-tailwind",
      "nodeVersion": "20.9.0",
      "jssDeploymentSecret": "110F1C44A496B45478640DD36F80C18C9",
      "enabled": true,
      "type": "sxa",
      "lintCommand": "lint",
      "startCommand": "start:production",
      "buildCommand": "build",
      "runCommand": "next:start"
    }
  },

After uploading, run Build in XM Cloud Deploy. After execution, you will see that a new Rendering Host has been added.

Summary

If you want to develop as separate projects in Next.js, you can add separate rendering hosts in the Docker environment and in the XM Cloud environment, as in this case. Of course, it is also possible to share the same project across multiple sites, but we have introduced this procedure for those who want to take that one step further.