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.
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.
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.
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.
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.
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.