Containerized Sitecore 10.4: Running Headless SXA and MVC Side-by-Side

📘Introduction to Sitecore Headless SXA Containers

Sitecore Headless SXA allows you to separate the front-end from the content management layer, supporting Jamstack-style development with modern frameworks. In a Sitecore 10.x container setup, you can create fully isolated instances of multiple Sitecore topologies (XM0, XM1, XP0, XP1) all ready for Headless SXA development. These container images come with the SXA 10.4 and Headless Services modules, so you can build a Next.js front-end that gets layout data and content through GraphQL or Layout Service. The result is a consistent content tree backing both traditional MVC sites and new headless SXA sites on the same instance.

Sitecore’s support for Headless SXA lets you use familiar SXA features (like page designs, partial designs, and content sharing) with a modern front end. As you know, Sitecore Headless SXA “separates the front-end presentation layer from the content management”. This tutorial-style overview highlights the main features of the headless SXA container setup and shares the code repo that lets you run Sitecore MVC and Sitecore Headless sites at the same time. 🔝

📦 Supported Sitecore Topologies (XM0, XM1, XP0, XP1)

The repository supports the following Sitecore topologies, all pre-configured for Headless SXA:

• XM0 (Experience Manager, no xDB) – a lightweight CMS-only topology.

• XM1 (XM Scaled) – CMS with processing services.

• XP0 (XP Single) – CMS+CD combined (developer mode).

• XP1 (XP Scaled) – CMS+CD+Processing (full scaled).

Each topology comes with its own docker-compose configuration and isolated containers. For example, the repository includes a docker-compose environment for each topology with a Next.js rendering host. In practice, you choose the topology that matches your needs (XM0 for local CMS-only dev, XP1 for full on-prem production) and run the corresponding containers. The included init.ps1 script automates certificate creation and host setup so you can quickly bring up the desired topology.

Because each topology runs in its own set of containers, you can easily switch or combine them. The container images let you spin up a complete Sitecore environment – databases, Solr, identity server, etc. – in one command. This gives developers an agile local dev environment with the same roles and services as production. 🔝

📜Script to Completely Reset and Reinstall a Local Sitecore Docker Environment

In this setup i created the PowerShell script start-clean-install.ps1 which designed to reset and set up a Sitecore environment from scratch. Here’s what it does, step by step:

1️⃣ Prints the purpose and steps of the script to the console.
2️⃣ Stops all running Docker containers and removes them.
3️⃣ Runs Docker system prune to clean up unused Docker resources, and removes Docker images.
4️⃣ Stops IIS (Internet Information Services) and restarts the Host Network Service (HNS) to ensure a clean networking state for containers.
5️⃣ Runs a clean-up script (clean.ps1) in the docker directory to remove previous build artifacts.
6️⃣ Restores the Sitecore CLI tool using dotnet tool restore.
8️⃣ Runs up.ps1 to start the Sitecore environment.
9️⃣ Prints a success message when setup is complete.

This script is useful for developers who need to completely reset their local Sitecore Docker environment and start fresh. 🔝

✨ Key Features of the Headless SXA Container Setup

• Pre-configured Headless SXA: All topologies are ready out of the box for Headless SXA development. SXA site templates and layouts are included so you can add a headless SXA site immediately.

• Multiple Topologies: Choose between XM0, XM1, XP0, and XP1 as needed. The start-clean-install.ps1 script accept a -Topology parameter (default XP0) so you can launch any supported topology.

• Latest Sitecore 10.4 Images: Uses Sitecore 10.4.0 LTSC2022 container images, including SXA 10.4.0 and Headless Services 22.0.7, with Identity Server 8.0 and other modules. All dependencies (Solr, PowerShell Extensions, Traefik, etc.) are likewise version-aligned (SPE 7.0, Traefik v2.9.8).

• Easy Initialization: PowerShell scripts handle certificate generation and Docker orchestration for you. The init.ps1 script can automatically create a wildcard SSL cert and host entries (using mkcert). You only need to provide your Sitecore license and admin password. 🔝

• Next.js SDK Integration: A sample Next.js JSS app is scaffolded and deployed during container startup. This rendering container runs next dev on a mounted Next.js project. You can edit the React code locally and see instant updates. The solution sync content as part of the first run.

• Content Serialization: Out-of-the-box support for Sitecore Content Serialization means all definitions (templates, layout, etc.) are serialized and can be version-controlled. This Sitecore-first JSS workflow lets you design in the CMS and pull changes into code with sitecore ser pull.

Together, these features create a turnkey environment: a full set of Docker images and configs that launch a Sitecore XM or XP environment with headless SXA enabled by default.

💻Repository Components and Images

The setup leverages the following container images for a complete Sitecore environment: 🔝

⚙️ Sitecore Images Version: 10.4.0
⚙️ Sitecore Identity Server: 8.0
⚙️ Sitecore Management Services: 5.2.113
⚙️ Sitecore Docker Tools: 10.4.0
⚙️ Traefik: v2.9.8
⚙️ Sitecore Headless Services: 22.0.7
⚙️ Sitecore PowerShell Extensions (SPE): 7.0
⚙️ Sitecore Experience Accelerator (SXA): 10.4.0

🔐Configuring Encrypted SQL Communication

If you are using Sitecore Identity Server 8.0 and try to log into the Sitecore CMS role, it will redirect you to the Identity Server to enter your credentials. However, you won't be able to log in and will see the error message Sorry, there was an error. 🔝

This error occurred because Sitecore Identity Server 8.0 requires encrypted communication with SQL Server. 🔝

A key part of this setup is its support for encrypted SQL communication with Sitecore Identity Server 8.0. This is important because the newer version of Microsoft.Data.SqlClient requires more security. The repository has all the needed changes to make this secure communication work, and an automated PowerShell script makes the SQL upgrade process for the Sitecore Core Database easier. Connection strings are updated with Encrypt=true;TrustServerCertificate=false; to ensure strong encrypted connections.

🤝 Running MVC and Headless SXA in Parallel

A big advantage of this setup is that you can run both traditional SXA (MVC) sites and Headless SXA sites from the same Sitecore instance. The container images have all SXA modules (10.4) and use a single Sitecore instance, so you can have content tree for an Sitecore MVC, Sitecore MVC SXA site and Sitecore Headless SXA site, sharing content between them. SXA’s design allows this by supporting “cross-site presentation sharing using page designs and partial designs” and “cross-site content sharing”. This means you can reuse the content in both MVC and headless sites. 🔝

For migration or hybrid scenarios, you can keep your current SXA pages (MVC) while slowly creating new pages in Headless SXA. The content and renderings can work together. The SXA FAQs say you can have SXA and non-SXA (or multiple SXA) sites together, as long as they work well together. A useful tip is to use different SXA sites or languages for MVC and headless to prevent conflicts (each can have its own template and rendering group). Since the content tree is shared, editors can manage all content in one place, even as developers create a new Next.js front end.

🚀 Starting Your Headless Journey (GraphQL & Hybrid Strategy)

When starting a headless SXA project, plan how you will get content and gradually move features. As you move to headless development, think about the key points explained here. 🔝

🌐 Migration and Future-Proofing Strategy XM Cloud Preparation

XM Cloud Preparation

This setup offers a smooth migration path to Sitecore XM Cloud: 🔝

• Edge GraphQL compatibility for an easy move to the cloud

• Container-native architecture that follows cloud best practices

• Headless-first approach that fits cloud-native development

• Content serialization prepared for cloud deployment

Hybrid Development Approach

The platform enables strategic migration strategies:

• Gradual feature migration from MVC to headless

• A/B testing between traditional and headless implementations

• Performance monitoring to validate headless benefits

• Risk mitigation through parallel development streams

🛠️ Getting Started Resources

What you need beforehand and how to use this GitHub Repo are explained in detail here.

Do you have any thoughts or suggestions 🔠 on this Sitecore 10.4 Headless SXA Container Setup? Please share your feedback 💬 in the comments or contribute to our GitHub repo! Scan the above QR code to access the full repository. 🔝

If you enjoy this content, consider subscribing 📰 for more updates and insights. Your engagement is very important to me and helps me keep providing valuable resources! 🌟

📈 Business Value and ROI

Accelerated Time-to-Market

The pre-configured setup provides significant development speed: 🔝

• Reduced setup time from weeks to hours

• Parallel development streams speed up delivery

• Consistent environments minimize deployment issues

Cost Optimization

Lower total cost of ownership through:

• Simplified infrastructure using containers

• Better developer productivity with modern tools

• Easier maintenance through automation

🔚Conclusion

This Sitecore 10.4 Headless SXA Container Setup is a complete solution for organizations looking to update their digital platforms. It helps keep things running smoothly while getting ready for future cloud migration. 🔝

🧾Credit/References

Configuring Sitecore Next.js Headless SXA Multisite App	Sitecore SXA Page Design Benefits	Sitecore SXA Partial Design Guide
Streamlining Sitecore XM Development: Exploring Sitecore XM0 Topology Container Images	Managing headless sites with SXA	Sitecore Experience Accelerator (SXA) FAQs
Sitecore Identity Server 8.0	Sitecore 10.4.1 Upgrade Container Guide	Sitecore Identity Server 8.0 Upgrade Guide
The Pros and Cons of Sitecore Headless vs. Traditional Sitecore	Sitecore Experience Platform 10.4.0 Container Setup	Create a headless site collection and site
Recommendations: Structuring pages	The GraphQL content schema	Quick start guide - All about Sitecore Experience Edge
Overview of headless development with Sitecore	Sitecore Edge GraphQL Queries Cheat Sheet	Sitecore GraphQL Queries Cheat Sheet 🔝

🔗Pingback

Sitecore 10.4 Headless SXA Container Setup Guide : Step-by-step instructions for setting up Sitecore 10.4 with Headless SXA using Docker containers for modern web development.	Integrating Next.js with Sitecore Headless SXA : Learn how to connect Next.js applications with Sitecore Headless SXA for seamless headless CMS experiences.	Secure Sitecore Identity Server 8.0 with Encrypted SQL Connections : Best practices for enabling encrypted communication between Sitecore Identity Server 8.0 and SQL Server. 🔝
Sitecore Container Multi-Topology: XM0, XM1, XP0, XP1 : Compare and choose the right Sitecore topology for your project—XM0, XM1, XP0, or XP1—all with headless support.	Setting Up Sitecore Content Serialization : A guide to pre-configuring Sitecore Content Serialization for efficient content management and deployment.	Sitecore XM Cloud Migration Strategy : Prepare your Sitecore solution for XM Cloud migration with headless SXA and GraphQL endpoints.
Benefits of Sitecore SXA Page and Partial Designs : Discover how SXA’s page and partial designs streamline development and ensure consistent site layouts.	Sitecore Docker: Local Development Made Easy : Spin up a lightweight Sitecore environment locally using Docker containers for rapid prototyping and testing.	Sitecore GraphQL: Edge vs On-Premises Understand the differences between Edge GraphQL and on-premises GraphQL for Sitecore content delivery. 🔝