Standing up a Sitecore 10.1.1 instance with SXA and JSS using Docker

In this blog post, I will demonstrate how you can go about customising the docker examples repository (available using a 10.1 Update 1 release), to allow it to include both SXA and JSS with Headless service v16.0.

The use case: I was keen to get a local development environment which allowed developers to create a SXA JSS Tenant, Tenant Folder, Site and Site Folder, from the get go upon a fresh setup of docker. This case, there is no need to go through the tedious process of installing JSS package modules separately.

Prerequisites

Download the docker examples 10.1.1 release and ensure you are able to successfully run its containers from the default Sitecore runtime images and out of the box example solution image which comes with it.

Current State

The current docker examples 10.1.1 release currently comes with docker compose files override files (for xp0, xm1 and xp1) which installs SXA on top of the base Sitecore runtime image via the modules addition approach.

In my approach, I will choose to use Sitecore community images which includes both the Sitecore runtime image and SXA JSS image in one single image – removing the need of a modules addition approach.

I shall use the “custom image” folder of the docker example repository which includes a solution Dockerfile which will allow developers to deploy code changes as well.

Update environment file

As we are looking to reference the Sitecore community image repository which provides us with the SXA JSS image, we will need to add in two environment variables.

SITECORE_COMMUNITY_REGISTRY=scr.sitecore.com/community/
SITECORE_COMMUNITY_VERSION=10.1.0-ltsc2019

Update base images for CM, CD and MSSQL services

In my case, I chose to use an example of an XM1 topology file. As I am a fan of not reinventing the wheel, I simply made a copy of the docker-compose-xm1.override.yml file and renamed my new file to docker-compose-xm1.sxajss.override.yml.

In the new file, we will need to make a few changes to the following service entries – by updating the BASE_IMAGE url to reference the community base image.

CM service:

CD Service:

MSSQL Service:

Be sure to visit the Sitecore JSS compatibility table and the Sitecore Community Images Listing when choosing the correct image version.

Update Docker Files For CM, CD AND MSSQL Build Service Folders

On the cm service, remove the SXA_IMAGE and SPE_IMAGE arg properties and the lines which reference the addition of both the SXA and SPE modules.

In the Docker file contained within the cm service folder of the root build folder, remove the lines which reference the properties, therefore leaving you with a slimmer Docker file as the below.

On the cd service, remove SXA_IMAGE properties. Repeat the same steps. The result docker file is as below.

On the mssql service, remove the SPE_IMAGE and SXA_IMAGE properties. Repeat the same steps. The result docker file is as below.

Keep the rest of other docker files unchanged as you will require the sxa solr cores to drive the indexes for both SXA JSS and SXA non-JSS sites.

Run Docker Compose

Once all changes are made to the above, we are ready to run our docker compose up command using the new override file – docker-compose-xm1.sxajss.override.yml

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

Once all containers have started and are in a healthy state, you are ready to browse to the Sitecore CMS instance. The default CM domain host being cm.dockerexamples.localhost.

In the Content Editor, we can verify that we are now able to add a JSS tenant and JSS site.

We can then further validate that creation of a JSS tenant and site works successfully as below. SXA features are enabled and SPE runs the tenant and site creation process without any issues.

And voila we are now able to get a docker build that prepares us with an SXA JSS local environment!

However, there is one more issue that remains – when we open a JSS route page in Experience Editor mode we get the following issue surfaces.

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: Failed to start Node process. To resolve this: [1] Ensure that Node.js is installed and can be found in one of the PATH directories. Current PATH environment variable is: C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Windows\system32\config\systemprofile\AppData\Local\Microsoft\WindowsApps Make sure the Node executable is in one of those directories, or update your PATH. [2] See the InnerException for further details of the cause.

In my next blog post, I will aim to work on addressing this issue so that docker is able to start up with Node js pre-installed as part of the overall build and startup process.

One thought on “Standing up a Sitecore 10.1.1 instance with SXA and JSS using Docker

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.