allBlogsList

Sitecore XM

Next.js

Author profile image

Meng Hak

Lead Architect, Sitecore Experience

Creating a docker container environment with Sitecore XM and Next.js

With Sitecore’s transformation to composable DXP and their recent release of the Next.js SDK, I thought I would set up a docker container environment with Sitecore XM and Next.js for learning purposes. It turns out, Sitecore’s guide was very straightforward. For the XM topology, we only needed to change the init.ps1 step. For completeness, I've included all the steps here.

Verifying / Installing prerequisites

  1. Powershell 5.1 - comes bundled with Windows 10, but to verify
    1. In cmd, run powershell
    2. Run $PSversionTable
  2. .Net Core 3.1
    1. Download and install .Net 3.1
    2. Verify: In cmd, run dotnet –version
  3. .Net Framework 4.8
    1. Download and install .Net Framework 4.8
    2. Verify: In Powershell run (Get-ItemProperty "HKLM:\SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Full").Release -ge 528040
      If it returns true, that means 4.8 is installed. More info on how to determine .Net Framework version
  4. Download and install docker
    1. Run Docker Desktop
    2. Switch to windows containers
      1. Open the windows system tray, and right click on Docker Desktop
      2. Click "Switch to windows containers…"
  5. Node.js
    1. For node.js, I like to use NVM for windows, which will allow you to easily switch node versions
    2. To use NVM, uninstall any pre-existing node installations
    3. Download NVM for windows
    4. To use node lts
      1. Install lts: nvm install lts
      2. Switch to lts: nvm use lts
  6. Sitecore template
    1. Install Sitecore template: dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json

Stop services

In order to run docker, ports 443 and 8984 must be free.

  1. Stop port 443, stop IIS by running iisreset /stop
  2. Stop any Solr services running on port 8984
    1. In powershell, check what's using the port by running Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess
    2. If you get the error, there's nothing running on port 8984 and you're good to go.
      Get-NetTCPConnection : No MSFT_NetTCPConnection objects found with property 'LocalPort' equal to '8984'. Verify the value of the property and retry.
    3. If you need to stop the service
      1. run Stop-Service -Name "the name of your service"
      2. or if using nssm, run nssm stop "the name of your service"

Installing

  1. In powershell, navigate to a directory e.g. c:\repos
  2. Run dotnet new sitecore.nextjs.gettingstarted -n XmNextJs (replace XmNextJs with your own project name)
  3. Navigate to the directory of your project e.g. XmNextJs
    1. run .\init.ps1 -InitEnv -Topology "xm1" -LicenseXmlPath "path\to\license.xml" -AdminPassword "yourpasswordhere"
    2. The script will prompt you on how you want to configure your solution such as SSG vs SSR. I left most of this as the default
  4. Once the script finishes, run setx NODE_EXTRA_CA_CERTS C:\Users\{yourusername}\AppData\Local\mkcert\rootCA.pem
  5. Restart Powershell (or VSCode if you’re using that)
  6. Run .\up.ps1
  7. The CM server will prompt you to log into sitecore - go ahead and do so using your admin credentials
  8. When the script finishes, you should be able to visit your rendering host e.g. https://www.xmnextjs.localhost/