Docker-based Sitecore JSS Setup

Nothing teaches better than experience so, based on one of my experiences with Docker-less Sitecore JSS Setup, decided to setup the Sitecore JSS NextJS Docker Environment

Docker-based setup:

One of the main advantages of Docker-based setup is, most of the file operations are standardized and handled by PowerShell Scripts while in case of non-Docker environment, the setup is left to individual developers.

Here is my other article that deals with setting up the same application without Docker.

A summary of the power of PowerShell and Docker combination:

Note: Not to forget that most of these are possible due to official Sitecore Docker support from v10!

Important JSS Commands ready-reckoner:

So, here are the steps covered in this article:

- Create the NextJS rendering instance (disconnected)

- Ensure that the NextJS instance points to the Sitecore CM hostname

- Setup the Sitecore instance

- Connect the NextJS rendering instance to the Sitecore instance

Setup pre-requisites

dotnet new -i Sitecore.DevEx.Templates --nuget-source https://nuget.sitecore.com/resources/v3/index.json

Create the NextJS Project (disconnected instance)

dotnet new sitecore.nextjs.gettingstarted -n scnextjs

Once you execute the above command, all necessary files for Docker and NextJS project setup  will be present in the file system.

scnextjs is name of the folder and this will be used to name the Sitecore instance too.

If you followed the same structure as me, if you check the file system at this point, the Docker-based setup files will reside in:

C:\jss\scnextjs

While, NextJS related files will reside in:

C:\jss\scnextjs\src\rendering

Next, create the NextJS project (using create-jss-project.ps1) and ensure the Sitecore hostname matches the cm instance as in up.ps1:

End-result:

Setup the Sitecore Docker Instance

.\init.ps1 -initenv -licensexmlpath "c:\license\license.xml" -adminpassword b

Most importantly execute the following line as per the script instruction to forego a lot of errors in the later stage:

setx NODE_EXTRA_CA_CERTS C:\Users\navadmin\AppData\Local\mkcert\rootCA.pem

Restart PowerShell Prompt and execute up.ps1 in the sub-folder that has the file:

up.ps1 end-result:

Connect the NextJS rendering (disconnected instance) to the Sitecore instance

Go to the NextJS rendering folder and execute jss start:connected

End-result:

Any changes in the Sitecore instance publish will reflect in the rendering: