Zaheer Tariq

Video Tutorial: Setting up Sitecore 10.4.1 with Next.js Helix Examples using Docker for Windows

For many developers, the Sitecore Habitat examples were the easiest way to explore Helix architecture, experiment with real modules, and quickly spin up a working Sitecore environment. However, these examples haven’t been maintained in recent versions of Sitecore. The last available version was built for Sitecore 10.1, and it no longer runs reliably today.

To address this gap, I refreshed the Habitat styled setup and updated it for the Sitecore two releases 10.3 and the latest 10.4.1. These repositories follow the familiar Sitecore Docker Helix Basic Company structure, now combined with scripts and tools to help you get started quickly with fewer steps.

These repositories will offer a modern, automated starting point for learning, experimentation, prototyping, or onboarding. With Docker, Next.js, and an updated Helix architecture, the solution is ready for immediate use in a modern Sitecore environment and/or projects. These can be used for your production projects as they have the complete setup including Headless services, Sitecore Serialization, Backend Projects with Publish Options configured and Next.js running examples.

Video Tutorial

GitHub Repositories

Below are two GitHub repositories for installing Sitecore using Docker with fully automated setup, helix examples with Next.js

  1. Sitecore 10.4.1 Docker Next.js Headless starter kit with Sitecore CLI and Sitecore Content Serialization
    https://github.com/zaheer-tariq/sitecore-10-4-1-docker-nextjs-starter-kit
  2. Sitecore 10.3.0 Docker Next.js Headless starter kit with Sitecore CLI and Sitecore Content Serialization
    https://github.com/zaheer-tariq/sitecore-10-3-0-docker-nextjs-starter-kit

Setup Instructions

Follow the steps below to get Sitecore running on your machine with minimal effort.

1- Make sure IIS is stopped, you can run this in Windows PowerShell after running it as Administrator

iisreset /stop

2- Make sure Virtualization is enabled, Hyper-V and Containers are installed, you can also install Hyper-V and Containers using this command in Windows PowerShell after running it as Administrator

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V-All, Containers -All -NoRestart

3- Install the following Software

4- Open Windows PowerShell as Administrator and run this command, make sure license file exists at the path below

.\init.ps1 -InitEnv -LicenseXmlPath "C:\Projects\license.xml" -AdminPassword "b"

Once the script is completed it will automatically open Sitecore CM and Website in browser. Enjoy!

What’s Include

  • This solution implements Sitecore Helix conventions for the back-end (platform) solution architecture. You can find more details on Helix Architecture at Sitecore Helix and the Sitecore Helix Examples.
  • A docker-compose environment for each Sitecore topology (XPO, XP1, XM1, XM0) with an ASP.NET Core rendering host. However, the default topology is XM0The containers structure is organized by specific topology environment (see run\sitecore-xp0, run\sitecore-xp1, run\sitecore-xm0, run\sitecore-xm1). The included docker-compose.yml is a stock environment from the Sitecore Container Support Package. All changes/additions for this solution are included in the docker-compose.override.yml.
  • Scripted invocation of jss create and jss deploy to initialize a Next.js application.
  • Sitecore Content Serialization configuration.
  • An MSBuild project for deploying configuration and code into the Sitecore Content Management role. (see src\platform).

Using the Solution

  • You can run the solution by running .\up.ps1 in Windows PowerShell after running it as Administrator
  • You can stop the solution by running .\down.ps1 in Windows PowerShell after running it as Administrator
  • A Visual Studio / MSBuild publish of the Platform project will update the running cm service.
  • The running rendering service uses next dev against the mounted Next.js application, and will recompile automatically for any changes you make.
  • You can also run the Next.js application directly using npm commands within src\rendering.
  • Debugging of the Next.js application is possible by using the start:connected or start scripts from the Next.js package.json, and the pre-configured Attach to Process VS Code launch configuration.
  • Review README’s found in the projects and throughout the solution for additional information.

Hashtags

#Sitecore #Sitecore10 #Sitecore1041 #SitecoreHelix #SitecoreDocker #SitecoreHeadless #NextJS #HeadlessCMS #DigitalExperience #DXP #DevOps #DockerContainers #WebDevelopment #SitecoreCommunity

Posted in Sitecore, Sitecore CMSTagged , ,