Installing Node.js for SXA and JSS using Docker

In my previous blog post, I demonstrated how to spin up a local Sitecore 10.1.1 SXA JSS environment using Docker with an XM1 setup and concluded on the last step which did not allow me to open up a JSS route page within Experience Editor. This was due to a missing installation of Node.js.

In this post, I will show you how you can go about setting up a Node.js install within your Sitecore Docker environment that allows Sitecore’s Editing UI controls to be server side rendered via the layout service; in turn enabling the full Experience Editor feature on your CM role.

Update Solution docker build file

I decided to update the Solution docker file as this will allow me to prepare all of the artifact folders (with Nuget libraries and dependencies etc.) together with the NodeJS artifacts (containing the .msi installer file) as part of the solution build image.

On line 39, we will first download the NodeJS installer .msi file and place this in a temporary folder – out\nodejs as part of the builder stage.

On line 51 we then copy the contents of this temporary folder (in this case the .msi file) to a final build artifacts folder called \nodejs.

Add arguments to CM service

Add the NODEJS version argument under the CM service entry. In my case, I have added this onto line 89 of my custom docker override file – docker-compose-xm1.sxajss.override.yml. This argument will be passed onto later to the CM docker build file which will inform docker to pull and install the correct NODEJS version that is compatible with my Sitecore version.

Using the same NODEJS version as the downloaded .msi file, input the same version into the environment configuration file.

NODEJS_VERSION=14.15.1

Update CM docker build file

On the CM docker build file, we will then proceed to parse the NODEJS argument and retrieve the .msi file from the solution stage and pass this onto the CM build image to install Node onto CM.

On line 20, we copy the msi file from the solution stage into the CM build image.

On line 24, we execute the installer file by running a silent install in the background with the /quiet flag.

Run Docker Compose

Once all steps are performed above, we are ready to re-run the docker compose file but this time with a –build flag to allow Docker to rebuild the CM build image and in turn allow NodeJS to be installed onto the CM role.

docker-compose -f .\docker-compose.xm1.yml -f .\docker-compose.xm1.sxajss.override.yml up -d --build

Once all containers are running in healthy state, open up the sample homepage route page in Experience Editor and you should be able to browse the page in full Experience Editor mode!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.