Many of you who want to start a headless solution come into a situation where there is a lot of information available and it is difficult to identify which approach to take. Sitecore features decent documentation, but it covers only part of a desired solution and is segmented. This post will address the problem and take you through a beautiful starterkit of yours, which you can proudly put as an initial commit into your git repository.
Recently Sitecore has updated their Headless SDK to version 21.1.5 featuring its helpful wizard, that allows you to scaffold your project code for many of the options:
- nextjs
- angular
- node-headless-ssr-experience-edge
- node-headless-ssr-proxy
- react
- react-native
- vue
We’re interested in Next.js option which carries out the maximum potential for us now. And it comes with plenty of handful examples to include, such as:
- components and setup for working disconnected
- a tracking component for Headless XP with CD and xDB
- components and setup for Headless SXA projects
- setup for projects using XM Cloud Embedded Personalization
- setup for hosting multiple sites in a single NextJS application
One can utilize it pretty ease with npx command, as is described at the official documentation:
npx create-sitecore-jss starterkit
Isn’t this awesome?
The issue here is that this scaffolding does not provide Sitecore containers tied to the headless app running at a rendering host container. Let’s create one using Sitecore.DevEx.Templates, for the actual commands please refer to the documentation:
dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json dotnet new sitecore.nextjs.gettingstarted -n StarterKit
Once complete, you’ll get a containerized starterkit, but it won’t have either SXA, or even SPE.
There are no ready-to-use Sitecore images for 10.3 with SXA and Next.js headless SDK, so we’ll have to build one. To start with, we’ll need to pick and reference two images – one for SPE and another for SXA as environmental variables. Once done, update docker-compose.override.yaml file to pass these as ARGS into CM and CD Dockerfiles, as well as initialize containers for SQL Server and Solr. Upon completion, provide build instructions for copying assets, and that’s it.
Once the repository is initialized and run, it will spin up containers with Sitecore 10.3 and operable SXA in it. There will be also a default JSS app you can later move into a headless SXA tenant. Here’s a recording I’ve done for the whole process:
Your starterkit is ready, you may start adding features to it. For example, a final step may be integrating the desired features (like single app multisite support), scaffolding at the first step, into our new containerized environment.
