Check rendering settings

As for rendering, as defined in the docker-compose.override.yml file, node.js is installed using the Windows Nano Server image, and rendering runs using that image The nodejs is built. The file that builds nodejs is provided as docker\build\nodejs\Dockerfile.

ARG PARENT_IMAGE
FROM $PARENT_IMAGE

ARG NODEJS_VERSION

USER ContainerAdministrator
WORKDIR c:\build
RUN curl.exe -sS -L -o node.zip https://nodejs.org/dist/v%NODEJS_VERSION%/node-v%NODEJS_VERSION%-win-x64.zip
RUN tar.exe -xf node.zip -C C:\
RUN move C:\node-v%NODEJS_VERSION%-win-x64 c:\node
RUN del node.zip

RUN SETX /M PATH "%PATH%;C:\node\"
RUN icacls.exe C:\node\ /grant "Authenticated Users":(F) /t

USER ContainerUser

Here we see that for the Node.js version, we are looking at the value of the .env file. This time we will change it as follows

NODEJS_VERSION=20.9.0

Next, the xmcloud.build.json file also contains the version. This is the file that is referenced when deploying the SaaS version of XM Cloud. As for the nodeVersion in this file, change it to 20.9.0 as well.

Change the path of Next.js

If you are working with the standard project, the project is deployed in the folder src\sxastarter. We will now change this to src\rendering.

After making the changes, make the following two changes to work in the new directory.

First, change the path listed in xmcloud.build.json, along with the node.js version change.

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

Next, change the rendering build - context setting defined in docker-compose.override.yml as follows

  rendering:
    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-rendering:${VERSION:-latest}
    build:
      context: ./docker/build/rendering

This completes the entire setup.

Build the image

After making the above changes, only the nodejs and rendering images need to be re-built for use.

docker compose build nodejs rendering

After a few moments, the new image should be complete and the whole thing should be up and running. For the new rendering image, check the version and you will see that it is 20.9.0, as shown below.

The Experience Editor also works fine.

Vercel Changes

After making the above changes, change the settings in the linked Vercel before uploading the code to GitHub. Change the root directory settings.

Now that the XM Cloud instance and the public side have been changed, it is time to reflect the code on GitHub. The following screen shot shows the XM Cloud Deploy confirming the switch to the new environment.

After a few moments, the CMS in the new environment will start and you will see that the data is displayed correctly in Pages.

Summary

This time, we introduced the part of the rendering environment in action through configuration changes. Basically, it is a form that works in conjunction with the Next.js project using Node.js images.

Tags

• XM Cloud