Enlighten with Amit

Boost Sitecore Performance: Vercel Caching Strategies for XM Cloud Rendering Host

2025-11-08T06:20:00.001+05:30

📊 Overview
⚙️ How We Implemented Caching in Components
📋 Key Files Structure
🏗️ Caching Architecture Overview
🧩 Component Details
🎯 Key Behavioral Differences
📈 Benefits of This Caching Approach
🔚 Conclusion
🧾 Credit/References

📊 Overview

This guide describes a hybrid caching plan for Sitecore XM Cloud apps on Vercel, using various caching layers to enhance performance in different environments. In this article, I will explain the caching details using sample components that call external APIs to fetch necessary information and use Vercel's edge network for quick content delivery. Advanced caching methods, such as response headers, ETag checks, and Vercel edge functions, are crucial for speed, scalability, and smooth content delivery in a Next.js or headless Sitecore setup. Effective caching reduces API calls to XM Cloud’s GraphQL endpoint, decreases server load, and improves Core Web Vitals, which boosts SEO rankings.

Key Features
1. Multi-Layer Caching: Edge, HTTP, and In-Memory strategies
2. Environment-Aware: Different behaviors for development vs production
3. Performance Monitoring: Different behaviors for development vs production
4. Error Handling: Graceful fallbacks and resilience
5. SEO Optimization: Proper cache headers for search engines

⚙️ How We Implemented Caching in Components

The sample components, UserDirectory.tsx and UserDirectoryEdge.tsx, demonstrate how to effectively use application caching, Vercel caching, and manual refresh triggers. These enhancements are managed by custom API endpoints and cache-related code in both the component and API files. Located in the src/sxastarter/src/components/UsersDirectory folder, these components showcase two different caching methods for data-heavy applications, helping developers balance freshness and speed.

1️⃣ Standard Server Caching (UserDirectory.tsx) 💾
This component is a standard Next.js client-side React component that retrieves user data through external API calls using the fetch API, combined with browser-based state management.
1. Key Characteristics:
  1. Client-Side Component: Uses React hooks (useState, useEffect) for state management
  2. API Integration: Uses React hooks (useState, useEffect) for state management
  3. Dynamic Loading: Implements pagination with "Load More" functionality for incremental data loading
  4. Browser State: Maintains user data in component state, not utilizing ISR or SSR caching
  5. Error Handling: Includes fallback to mock data when API calls fail
  6. Real-time: Data is fetched on component mount and user interactions (not pre-generated)
2. Technical Implementation:
  1. Not ISR: No static generation or regeneration - data fetched client-side on demand
  2. Not SSR: Component renders on client with loading states during data fetching
  3. Runtime Fetching: Uses standard fetch API with error boundaries and loading states
  4. Caching Strategy: Relies on the backend API proxy (/api/proxy/users) for caching implementation rather than component-level caching
  This is a dynamic client-side component that offers real-time user directory functionality with pagination and error resilience
2️⃣ Edge Network Caching (UserDirectoryEdge.tsx)⚡
This is a client-side React component that uses the Vercel Edge Network and Edge Functions to optimize data fetching, with detailed cache analysis and performance monitoring.
1. Key Characteristics:
  1. Vercel Edge Network Integration: Fetches data from /api/edge/users endpoint optimized for Vercel's global edge infrastructure
  2. Advanced Cache Analytics: Implements detailed cache performance monitoring with real-time metrics dashboard
  3. Edge Cache Analysis: Analyzes Vercel-specific cache headers (X-Vercel-Cache, X-Edge-Cache, X-Edge-TTL) for optimization insights
  4. Performance Monitoring: Tracks request durations, cache hit rates, and API response times with visual performance dashboard
  5. Global Edge Distribution: Utilizes Vercel's CDN for sub-100ms response times worldwide
  6. Debug Capabilities: Includes comprehensive debugging tools with cache bypass options and force refresh functionality
2. Technical Implementation:
  1. Not ISR/SSR: Pure client-side component with sophisticated edge caching strategy
  2. Edge Function Optimized: Designed specifically for Vercel Edge Runtime performance
  3. Cache-Aware: Displays real-time cache status, TTL information, and stale-while-revalidate metrics
  4. Performance Analytics: Built-in performance tracking table showing cache effectiveness and response times
  5. Global Performance: Optimized for worldwide deployment via Vercel's edge network
3. Edge-Specific Features:
  1. Edge Cache Status Display: Shows TTL, stale TTL, cache tags, and bypass status
  2. Real-time Metrics: Performance dashboard tracking last 10 requests with cache analysis
  3. Global Distribution: Leverages Vercel's 40+ edge locations for optimal performance
This is a Vercel Edge Network-optimized component that offers top-level performance monitoring and caching insights for large-scale applications worldwide.

📋 Key Files Structure

📦 Sitecore XM Cloud Application
├── 🎨 Frontend Layer
│   ├── UsersDirectory.tsx          # Main UI component with caching
│   └── UsersDirectoryEdge.tsx      # Edge-optimized version
├── 🔌 API Layer
│   ├── /api/proxy/users.js         # Hybrid caching proxy
│   ├── /api/edge/users.js          # Edge-specific endpoint
├── 🛠️ Utilities
│   └── /lib/api-proxy.js           # Validation & error handling
└── ⚙️ Configuration
    ├── vercel.json                 # Deployment & caching config
    └── .env.local                  # Environment variables

🏗️ Caching Architecture Overview

Caching methods for Sitecore XM Cloud's headless setup on Vercel use Rendering Hosts like Next.js apps on Vercel for the best performance. Caching cuts down on requests to the XM Cloud GraphQL endpoint (like through Experience Edge for preview/live content) or any other external API endpoint.
Here's how we implement it:

🎥 Video Demonstration

💡 Watch how we implemented caching to achieve 94% faster API responses

Cache Setting Headers and Configurations
Explore caching in Vercel/Next.js by examining HTTP headers, ETags, and configuration files. We will give explanations and code examples from our setup to show how these elements handle caching effectively.

Header/Concept	Details	Context in Code
Cache-Control	The primary header defining who can cache the response and for how long.	res.setHeader( 'Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600, max-age=60' );
public	Allows any intermediary cache (Vercel CDN) to store the response.	// Example: Public vs Private caching res.setHeader('Cache-Control', 'public, max-age=300'); // ✅ Cached everywhere res.setHeader('Cache-Control', 'private, max-age=300'); // 🔒 Browser only
s-maxage=X	(Shared max-age) Specifies the cache duration for the Vercel CDN/shared caches. The CDN will treat the content as fresh for X seconds.	Cache-Control: public, s-maxage=300 Purpose: Shared cache (Vercel Edge) expiry time (5 minutes) - How long CDNs/edge servers should cache the error Priority: Overrides max-age for shared caches Benefit: Controls edge cache duration independently Calculation: 300 seconds = 5 minutes
stale-while-revalidate=Z	A powerful Vercel optimization. After s-maxage expires, the CDN can serve the stale content for up to Z seconds while it triggers a background revalidation. Serve stale content while fetching fresh data in background	Cache-Control: s-maxage=1, stale-while-revalidate=600 // 10 minutes of stale serving allowed Purpose: Serve stale content while fetching fresh data in background Duration: 10 minutes of stale serving allowed User Experience: Zero-latency updates Performance: Background refresh without user waiting
max-age=Y	Specifies the cache duration for the browser (client-side). Used less often in favor of ISR/SWR for dynamic content.	Cache-Control: max-age=60 Purpose:Browser cache duration (1 minute) Scope: Client-side only Benefit: Reduces repeated requests from same user Balance: Fresh enough content without excessive requests
ETag (Entity Tag)	A unique hash generated for the content of a resource. Vercel and Next.js handle this automatically for static assets and often for rendered pages.	// ETag generation and validation const etag = "users-${pageNum}-${limitNum}"; res.setHeader('ETag', etag); // When a browser sends an old ETag via If-None-Match, the server responds with 304 Not Modified if the content hasn't changed, saving bandwidth. Method:Hash-based content comparison Accuracy: Byte-level content changes detection Efficiency: No need to download full response for validation
If-None-Match	Sent by the client (browser) to the server containing the ETag of its locally cached copy.	If the ETag matches, the server skips sending the resource body.
Vercel Configuration	Vercel's vercel.json file is essential for implementing project-wide cache rules, allowing developers to define route-level cache behavior, fallbacks, and more. This configuration file manages global headers, redirects, and path-based settings, ensuring consistent application of caching policies. It's particularly beneficial for applying uniform caching rules to specific paths, enhancing performance
Global Header Control	Global Application:Headers applied at CDN level, not runtime Zero Performance Cost: No runtime header calculation overhead Consistency: Same headers across all matching routes Scalability: Works regardless of traffic volume	Runtime vs Build-time Headers ⚖️ javascript ❌ Runtime header setting (slower) export default function handler(req, res) { res.setHeader('Cache-Control', 'public, max-age=300'); // Calculated every request // ... rest of handler } // ✅ Build-time header setting (faster) // vercel.json configuration applies headers at edge level // No JavaScript execution needed for header setting Runtime vs Build-time Headers ❌ Runtime header setting (slower) // ❌ Performance Impact: Headers set on every request export default function handler(req, res) { res.setHeader('Cache-Control', 'public, max-age=300'); // Executes for each request res.setHeader('Vary', 'Accept-Encoding'); // JavaScript overhead res.setHeader('X-Custom-Header', 'value'); // Server processing time // ... rest of handler logic } ✅ Build-time header setting (faster) vercel.json configuration applies headers at edge level No JavaScript execution needed for header setting
Routing and Rewrites	Used to configure Serverless Functions or Edge Functions for specific paths, ensuring the correct runtime is used for performance-critical areas (e.g., forcing a path to use the Edge runtime).
CRON Configuration for Cache Management	Scheduled Execution: Runs automatically via Vercel CRON jobs (vercel.json *schedule: "0 0 "**) to execute daily at midnight, ensuring cache is pre-populated during off-peak hours for optimal user experience Multi-Layer Security: Validates authorization through Vercel-specific headers (x-vercel-cron, user-agent: Vercel-Cron/1.0) and Bearer token authentication (CRON_SECRET) to prevent unauthorized cache manipulation Consistency: Same headers across all matching routes

🧩 Component Details

Below is the component functionality along with the back-end cache control logic and logging details to help you understand the component implementation:

Refresh Action: The Refresh link added to the components are key to managing cache freshness dynamically. They communicate with the back-end cache control logic.

UsersDirectory.tsx (Standard Component)	UsersDirectoryEdge.tsx (Edge Component)
State Reset: Sets page to 1, clears error state, enables fresh mode Cache Clearing: Makes parallel requests to clear cache for pages 1-5 with nocache=true and revalidate parameters Fresh Mode: Enables fresh mode that forces cache bypass for subsequent "Load More" operations User State: Clears current users array and loads fresh page 1 data Auto-Disable: Fresh mode automatically disables after 5 minutes Error Handling: Falls back to basic page 1 refresh if cache clearing fails	Enhanced Reset: Same state reset plus clears performance metrics array Comprehensive Clearing: Clears cache for pages 1-5 using Edge API endpoints Fresh Mode Tracking: Identical fresh mode logic with auto-disable functionality Edge-Specific: Uses /api/edge/users endpoint with Vercel Edge cache headers Performance Reset: Clears accumulated performance metrics on refresh Unified Approach: Single refresh button (removed separate "Force Refresh")

UsersDirectory.tsx (Standard Component)

UsersDirectoryEdge.tsx (Edge Component)

State Reset: Sets page to 1, clears error state, enables fresh mode
Cache Clearing: Makes parallel requests to clear cache for pages 1-5 with nocache=true and revalidate parameters
Fresh Mode: Enables fresh mode that forces cache bypass for subsequent "Load More" operations
User State: Clears current users array and loads fresh page 1 data
Auto-Disable: Fresh mode automatically disables after 5 minutes
Error Handling: Falls back to basic page 1 refresh if cache clearing fails

Enhanced Reset: Same state reset plus clears performance metrics array
Comprehensive Clearing: Clears cache for pages 1-5 using Edge API endpoints
Fresh Mode Tracking: Identical fresh mode logic with auto-disable functionality
Edge-Specific: Uses /api/edge/users endpoint with Vercel Edge cache headers
Performance Reset: Clears accumulated performance metrics on refresh
Unified Approach: Single refresh button (removed separate "Force Refresh")

Log Information Display Differences: This section compares the basic debug panel in UsersDirectory.tsx with the advanced analytics dashboard in UsersDirectoryEdge.tsx, highlighting the enhanced features and performance metrics available in the Edge component.

UsersDirectory.tsx (Basic Debug Panel)	UsersDirectoryEdge.tsx (Advanced Analytics Dashboard)
Users loaded: Current count of loaded users Current page: Active pagination page number Has more: Boolean indicator for additional pages Loading status: Current loading state Error information: Any API errors encountered Fresh Mode status: Whether cache bypass is active (🟢 Active / 🔴 Disabled)	All basic info: Same as UsersDirectory.tsx plus enhanced features Vercel Edge Cache Status Panel: Cache enabled/disabled status TTL (Time To Live) configuration Stale TTL for stale-while-revalidate Cache tags for invalidation Bypass status indicator Performance Metrics Table: Last 10 requests with timestamps Cache hit/miss status per request Data source tracking (cache vs API) Items returned per request Enhanced Console Logging: Grouped cache analysis logs Vercel-specific headers analysis Performance indicators with color coding Request ID tracking for debugging

UsersDirectory.tsx (Basic Debug Panel)

UsersDirectoryEdge.tsx (Advanced Analytics Dashboard)

Users loaded: Current count of loaded users
Current page: Active pagination page number
Has more: Boolean indicator for additional pages
Loading status: Current loading state
Error information: Any API errors encountered
Fresh Mode status: Whether cache bypass is active (🟢 Active / 🔴 Disabled)

All basic info: Same as UsersDirectory.tsx plus enhanced features
Vercel Edge Cache Status Panel:
1. Cache enabled/disabled status
2. TTL (Time To Live) configuration
3. Stale TTL for stale-while-revalidate
4. Cache tags for invalidation
5. Bypass status indicator
Performance Metrics Table:
1. Last 10 requests with timestamps
2. Cache hit/miss status per request
3. Data source tracking (cache vs API)
4. Items returned per request
Enhanced Console Logging:
1. Grouped cache analysis logs
2. Vercel-specific headers analysis
3. Performance indicators with color coding
4. Request ID tracking for debugging

Error Handling: The implementation uses try-catch blocks to handle network failures, timeouts, and connection errors that prevent API communication.
Standard Component (UsersDirectory.tsx):

Edge Component (UsersDirectoryEdge.tsx):

🎯 Key Behavioral Differences

Cache Management
1. Standard: Uses development cache with basic TTL
2. Edge: Leverages Vercel's global edge network with advanced headers
Performance Monitoring
1. Standard: Basic console logging only
2. Edge: Visual performance dashboard with historical metrics
Fresh Mode Implementation
1. Standard: Simple boolean flag for cache bypass
2. Edge: Enhanced with performance tracking and visual indicators
User Experience
1. Standard: Functional refresh with basic feedback
2. Edge: Rich analytics with real-time cache performance insights
Debug Capabilities
1. Standard: Basic state information and API test links
2. Edge: Comprehensive cache analysis, performance metrics, and Vercel-specific monitoring

Both components share the core refresh logic but the Edge version provides enterprise-grade monitoring and analytics capabilities for production deployments on Vercel's edge network.

📈 Benefits of This Caching Approach

By implementing both Standard and Edge Caching, the Sitecore Rendering Host achieves massive performance gains:

Lower Latency (Edge): By caching the UserDirectoryEdge.tsx responses globally, data is served from the closest Vercel Edge node, resulting in near-instantaneous load times for end-users worldwide.
High Availability and Freshness (ISR/SWR): The stale-while-revalidate pattern used by Next.js and Vercel ensures that users always get a fast response, even when the content is being updated in the background. The component is never fully blocked waiting for the XM Cloud API.
Reduced API Load: Aggressive caching means fewer direct calls to the XM Cloud or external APIs, reducing costs, improving API uptime, and ensuring stability under high traffic.
Instant Content Updates (On-Demand Revalidation): The Edge Cache API endpoints allow Sitecore content changes to be reflected on the front-end instantly, solving the traditional problem of cache delay.

🔚Conclusion

This implementation transforms Sitecore XM Cloud Rendering Hosts into high-performance assets on Vercel. Start by cloning the repo, deploying to Vercel, and experimenting with cache durations. For advanced setups, integrate with Sitecore's publishing webhooks for auto-invalidation.Questions? Open an issue on GitHub. Happy caching!
ℹ️ Level up your Sitecore XM Cloud performance! Check out our complete caching implementation (Scan the QR code below 👇) with edge optimization, ETag strategies, and Vercel configs that boosted API speeds by 94%!

If you have any other solutions 🔠 or tips 💬, please share them to help others in the community.

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! 🌟

🧾Credit/References

Vercel and Sitecore XM Cloud Integration	Retrieving Data from 3rd Party Integrations	Using Vercel’s Data Cache With Sitecore XM Cloud and Experience Edge
Use an out-of-process editing data cache with Vercel deployments	Accelerate Cookbook for XM Cloud - Pre-development	Hosting the Web Application \| Accelerate Cookbook for XM Cloud \| Sitecore Developer Portal
How to Configure an External Editing Host for Sitecore XM Cloud	Deploy Sitecore XM Cloud to Vercel	Vercel Cache - Cache caches your content at the edge in order to serve data to your users as fast as possible. Learn how Vercel caches works in this guide
Caching overview Cloud CDN Google Cloud Documentation	Leveraging Edge Caching in Next.js with Vercel for Ultra-Low Latency \| by Melvin Prince	Understanding Stale-While-Revalidate: Serving Cached Content Smartly - DebugBear

🔗Pingback

How to Migrate Your Next.js App from Sitecore JSS to Content SDK	Sitecore Headless Architecture	Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing
Webhooks vs. Pingbacks: The Modern Content Notification System for XM Cloud - Explains why modern architectures replace traditional blog pingbacks with robust webhooks, detailing how the XM Cloud publish webhook is the real-time 'ping' for cache revalidation.	Mastering Cache 'Ping': Using Webhooks for Instant Vercel Edge Revalidation - A practical guide showing developers how to configure Sitecore XM Cloud webhooks to "ping" the Vercel API, triggering instant, on-demand ISR instead of waiting for a time-based refresh.	Beyond Time Limits: Architecting Cache Control with stale-while-revalidate on Vercel - Illustrates how the powerful stale-while-revalidate directive ensures fast user delivery while the CDN silently fetches fresh content in the background, minimizing latency during updates.
From Publish to Purge: How Webhooks Secure Your XM Cloud Cache Invalidator - Focuses on the security and technical process of cache invalidation, emphasizing the use of secret tokens within webhooks to prevent unauthorized cache clearing on the Vercel infrastructure.	Monitoring Cache Freshness: Tracking Hit Rates After a Successful XM Cloud Deployment - Details the process of monitoring Vercel analytics and logs to confirm that the publish webhook successfully triggered revalidation and resulted in a high cache-hit rate post-content update.	FastRefresh Explained: The Client-Side Call That Triggers Immediate Vercel Revalidation - A deep dive into the purpose of the FastRefresh link in the component code, explaining its role as a user-initiated API call to the custom Edge Cache API for immediate data freshness validation.

Sitecore Headless Website Architecture : Sitecore Headless CD, CM, and Headless Frontend Domains

2025-09-15T02:48:00.004+05:30

🏗 Introduction
🌐 Understanding Sitecore Headless Architecture: Separating the Rendering Host from the Data Host
⚙️ Sitecore Headless Domain Configuration Strategy
🧩 Sitecore Headless Service: Where Should It Be Hosted?
📡 Connecting the Frontend to Sitecore's Backend
🐳 Sitecore Container Deployment Best Practices
🖼️ Sitecore Headless Architecture Diagram
💡 Addressing Common Misconceptions
🏁 Summary Table: Domain Usage
🔚 Conclusion
🧾 Credit/References

🏗 Introduction

Setting up a Sitecore Headless SXA site with Next.js needs careful planning for domains, endpoints, and networking. A common challenge is setting up the Layout Service and GraphQL endpoints while keeping a secure and scalable setup. This guide explains best practices for CM/CD roles, container deployments, and frontend access in both local development and higher environments.

🌐 Understanding Sitecore Headless Architecture: Separating the Rendering Host from the Data Host

Sitecore's headless architecture separates the content management system (CMS) from the presentation layer. This lets developers create modern, fast websites using frameworks like Next.js, while still using Sitecore’s powerful content features.

The main idea of headless is separation of concerns: Sitecore manages content creation, and the frontend application handles rendering and user experience. This setup boosts scalability and performance and allows content to be used across websites, apps, and other digital platforms.

The fundamental principle to understand is the separation of concerns:

The Sitecore Content Delivery (CD) Role acts as the data host for end-users. It provides access to the Layout Service and GraphQL endpoints. This serves as your backend Sitecore API for published or approved content if you are using Sitecore XP or Sitecore XM. If you are using Sitecore Experience Edge (SaaS), then use the XE API endpoint.
The Sitecore Content Management (CM) Role is the data host for users who create content. It provides access to the Layout Service and GraphQL endpoints. This is your backend Sitecore API for draft or unpublished content if you are using Sitecore XP or Sitecore XM. It remains the same if you are using Sitecore Experience Edge (SaaS) as the Content Delivery for end-users.
The Rendering Host is the Sitecore Headless Front-End (FE) App (like Next.js) that shows the user interface to the end-user and retrieves data from the data host (Published Content).
The Editing Rendering Host is the Sitecore Headless Front-End (FE) App (like Next.js) that displays the user interface for Content Authoring or Sitecore Experience Editor Support. It gets data from the Sitecore Content Management Role.

⚙️ Sitecore Headless Domain Configuration Strategy

Domain and URL structure follow the separation mentioned above. Usually, Content Management (CM) and Content Delivery (CD) roles have their own subdomains (e.g., cm.contoso.com and cd.contoso.com), while each frontend site has its own domain for users. APIs like Layout Service and GraphQL are accessed through the CD domain or Sitecore Experience Edge (SaaS) API endpoint, ensuring a secure and consistent setup.

For a clean and scalable headless setup, follow this domain pattern:

cm.contoso.com: This is for the Sitecore Content Management (CM) server.
cd.contoso.com: This is for the Sitecore Content Delivery (CD) server. It's the main domain for your Sitecore Headless Service endpoint (e.g., https://cd.contoso.com/sitecore/api/graph/edge).
marketing.contoso.com: This is for the live front-end application (like your Next.js app on Vercel/Netlify/Web App) and uses the Sitecore Content Delivery (CD) server or Sitecore Experience Edge (SaaS) endpoint.
preview.contoso.com: This is for the preview front-end application (like your Next.js app on Vercel/Netlify/Web App) and uses the Sitecore Content Management (CM) server endpoint to check the Sitecore Content before it's published on the live website.

💡 Key Insight: Avoid creating new domains for internal services like CD or CM endpoints. Instead, use the existing CD or CM domain (e.g., CD.Contoso.com or CM.Contoso.com).

🧩 Sitecore Headless Service: Where Should It Be Hosted?

The Sitecore Headless service is used by headless apps to get dynamic site structure data. For security and easy maintenance:

The Sitecore Headless Service endpoint should be exposed only via the CD domain (cd.contoso.com).
Avoid exposing internal Docker service names like https://rendering on public networks; these should remain private within the container network.
New site nodes in Sitecore are configured primarily for routing and data exposure, not for service endpoint hosting.

💡 An important point to remember is that if you are using the Sitecore Headless SXA-based implementation, you don't need to add a new Site Node in Sitecore CM and Sitecore CD, including the JSS App node.

📡 Connecting the Frontend to Sitecore's Backend

Your frontend application doesn't directly access the CM domain unless it's for PREVIEW content. Instead, it makes API calls to the Content Delivery (CD) domain to fetch data. The Sitecore Layout Service and GraphQL endpoint are provided by the CD instance.

For Higher Environments (Production/Staging): The frontend app, hosted on a domain like marketing.contoso.com, will be set up to send API requests to the CD domain, like cd.contoso.com.
For Local Development: Developers don't need to start the whole Sitecore stack unless they can't connect via VPN. They can run their frontend application locally on localhost:3000 (or a similar address) and set it up to connect to the dev CD environment (e.g., dev.contoso.com) through a VPN. This is a common and efficient way to work.
XP0 for Dev Environments: In a single-instance XP0 setup, often used in local development, the CM role can provide the Sitecore Headless Service.

🐳 Sitecore Container Deployment Best Practices

Development Environment Setup
For development environments, you have two main options:
1. Option 1: Full Container Deployment
  1. All Sitecore roles run in containers
  2. Frontend applications also containerized
  3. Internal communication via container network
2. Option 2: Hybrid Development
  1. Sitecore roles in containers (accessible via VPN)
  2. Frontend development on localhost:3000
  3. External API calls to containerized Sitecore services
Production Environment Considerations
Production Setup:
├── CM Server (Content Management)
├── CD Server (Content Delivery + Layout Service)
├── Web Apps (Headless Frontend Applications)
└── Load Balancer (Traffic Distribution)
Sitecore Docker Container Networking Explained
In a local Docker development environment, like using Sitecore Containers, communication switches from public domains to internal Docker service names.
1. Public Domain: dev.contoso.com (loads traditional MVC site)
2. Internal Docker Service: The CD container is recognized by its service name within the Docker network, usually http://cd.
3. The Correct Approach: Your Next.js application, when set up in its own container, should connect to the Sitecore Headless Service using the internal Docker service name of the CD role http://cd. If you are running your Next.js application on localhost:3000, then connect to the Sitecore CM or CD role using their public domain names, like CM.Contoso.com or CD.Contoso.com. This is because using a public domain like marketing.contoso.com inside the container network won't work.
ℹ️ You added a new site node for marketing.contoso.com in Sitecore. This is correct for telling Sitecore which site to resolve. However, the endpoint the FE uses to call Layout Service should be the CD's host (cd.contoso.com or the internal service http://cd).

🖼️ Sitecore Headless Architecture Diagram

The following data flow diagrams give a visual summary of Sitecore Headless architecture. They show how frontend applications link to CD endpoints and layout services in local, higher, and container environments:

Data Flow Diagram for Local Development:
This diagram shows how data flows in a local development setup. The Next.js app runs on localhost:3000 and connects to the Sitecore Layout Service or Sitecore GraphQL endpoint through the CM role (CM.contoso.com), the CD role (CD.contoso.com), or the Sitecore Experience Edge (SaaS) endpoint.
Data Flow Diagram for Containerized Dev Environment:
This diagram shows how data moves in a containerized development environment. The Next.js app talks to the CD role (http://cd) within a Docker network.
Data Flow Diagram for Production Environment:
This diagram shows how data moves in a production setup. The Next.js app (marketing.contoso.com) connects to the Layout Service through the CD role (CD.Contoso.com).

💡 Addressing Common Misconceptions

Sometimes team members get confused about domains and URLs, so let's clarify:

Domain for Sitecore Headless Service: It is incorrect to create a new, separate domain just for the Sitecore layout service (like marketing.contoso.com for the layout service itself). The layout service is just an endpoint on your existing CD domain. Your Sitecore site node for the headless site should be set to use the new domain for your front-end app as marketing.contoso.com and get content from the Sitecore Content Delivery (CD) server or Sitecore Experience Edge (SaaS) endpoint.
Frontend App Domain: A new domain for the frontend application is necessary. This is the domain where users will visit your website. You need to set this up with your hosting provider (like a Web App) and in your Sitecore Site configuration.
Internal Container URLs: The URL https://rendering or https://headless is probably an internal Docker service name. It is not for external or developer use and won't work outside the container network.

🏁 Summary Table: Domain Usage

Purpose	Example Domain	Internal/External	Usage Details
Sitecore CM Role	cm.contoso.com	External	Admin, Content Editing
Sitecore CD Role	cd.contoso.com	External	Sitecore Layout Service, Sitecore GraphQL endpoint
Sitecore Headless Frontend Site	marketing.contoso.com	External	User-facing Headless App
Sitecore Headless Frontend Editing Site	editing.contoso.com	Internal	Editing Rendering Host (use Content from CM and not Publicly exposed) for Content Authors
Sitecore Headless Frontend Preview Site	preview.contoso.com	Internal	To Preview Draft Content (use Content from CM and not Publicly exposed) by Reviewer
Docker Internal Layout/GraphQL	http://cd, http://rendering	Internal	Container network only, not Publicly exposed

🔚Conclusion

Setting up a headless Sitecore website with Sitecore Headless Service and Next.js needs careful planning of domains, container setups, and access. Use the CD role for the Layout Service, give different subdomains for front-end apps, and make sure container networking is set up right to build a scalable and efficient headless system. For development environments, use existing domains and VPN access to make development and testing easier.

If you have any other solutions 🔠 or tips 💬, please share them to help others in the community.

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! 🌟

🧾Credit/References

Architecture overview - Sitecore Documentation: The official documentation providing a conceptual overview of Sitecore's headless architecture, covering data flow and core components like the Layout Service.	JavaScript Services SDK (JSS) for Next.js - Sitecore Documentation: An in-depth guide on using the Sitecore JSS SDK specifically with Next.js, detailing features, supported functionalities, and developer workflows.	Sitecore GraphQL best practices: A guide from Sitecore on the recommended practices for configuring and consuming the GraphQL API, including endpoint setup and security considerations.
Sitecore Headless Development: Official Sitecore documentation covering headless architecture concepts, JSS, Layout Service, and GraphQL endpoints.	Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container	Sitecore Experience Edge GraphQL Queries

🔗Pingback

How to Migrate Your Next.js App from Sitecore JSS to Content SDK	How to Fix Sitecore Content Serialization Errors	Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing
What is Sitecore PowerShell Extensions? A Beginner's Guide: Discover how Sitecore PowerShell Extensions (SPE) integrates powerful scripting into the Sitecore client to automate tasks, manage content, and supercharge productivity for developers and admins.	Getting Started with Sitecore PowerShell: Take your first steps into Sitecore automation with this beginner's guide to writing and executing basic PowerShell scripts directly within the Sitecore Experience Platform.	How to Use Regular Expressions (Regex) in Sitecore PowerShell: Learn how to harness the power of regular expressions in your SPE scripts to efficiently filter, search, and manipulate Sitecore items and data with precision.
Avoiding Sitecore XM Cloud Errors - Enlighten with Amit	🚨 XM Cloud (XMC) Update 🚨 \| Amit Kumar	XM Cloud Changelog \| Sitecore Developer Portal
Sitecore Headless: How to Correctly Set Up Domains for Layout Service: Confused about which domain to use for the Sitecore Layout Service? This guide explains the difference between the front-end domain and the CD API domain in a headless architecture.	How Sitecore Containers Communicate: Internal Docker Service Names Explained: Learn how Sitecore Docker containers use internal service names like http://cd for communication between the front-end and Layout Service, simplifying local development.	Sitecore JSS and Next.js Production Domain Architecture Best Practices: Planning your production domain structure for Sitecore Headless? See the recommended setup with separate domains for CM, CD, and front-end for security and scalability.
How to Fix "Connection Failed" Errors to Sitecore Layout Service: Is your Next.js app failing to connect to the Sitecore Layout Service? Learn common causes and solutions for Docker and remote environment configurations.	What is the Sitecore CD Role in a Headless Setup? A Complete Guide: Understand the critical role of the Sitecore Content Delivery (CD) server as the headless API endpoint for Layout and GraphQL services in JSS.	Sitecore Experience Edge vs. CD: Which Headless API Should You Use?: Compare Sitecore Experience Edge SaaS and the traditional CD server for delivering headless content. Learn the use cases, benefits, and architectural differences.
Configure Sitecore JSS Next.js for Local Development Against a Remote Instance: Learn how to set up your local Next.js development environment to connect to a remote Sitecore CM/CD instance using VPN and environment variables.	How to Configure a Sitecore Headless Site Definition for JSS: A step-by-step guide to adding and configuring a new site definition in Sitecore for a headless application, including hostname and patch file configuration.	How to Access the Sitecore GraphQL Endpoint in a Headless Application: Learn the correct endpoint and authentication methods to query Sitecore data using GraphQL from your Next.js, React, or other headless front-ends.

How to Generate Dynamic Sitecore Packages Using PowerShell Scripts with Regex Filtering

2025-09-02T23:55:00.003+05:30

👋 Introduction to Dynamic Sitecore Package Creation
🗃️ What is Sitecore PowerShell Extension?
✅ Prerequisites and Setup
🧩 Dynamic Sitecore Item Package Generation with Sitecore PowerShell Script
♻️ Extending the Script for Generic Exclusions
🏆 Benefits of This Approach
🔚 Conclusion
🧾 Credit/References

👋 Introduction to Dynamic Sitecore Package Creation

Efficient Sitecore content management often requires creating dynamic packages while excluding irrelevant items. This article introduces a reusable Sitecore PowerShell script that automates package generation and filters out unwanted content, like items under TEST ONLY, using regex-based exclusion. Inspired by a real-world challenge shared in the Sitecore Slack XM-Cloud channel, the script helps developers streamline deployments and maintain clean, accurate packages. It also serves as a practical guide for creating Sitecore packages dynamically, offering flexibility for broader use cases. Ideal for Sitecore developers, this solution enhances productivity and ensures content integrity across environments.

🗃️ What is Sitecore PowerShell Extension?

The Sitecore PowerShell Extensions (SPE) module is a powerful tool that makes Sitecore development easier by allowing automation and scripting right inside the Sitecore environment. It uses the familiar Windows PowerShell syntax and provides both a command line interface (CLI) and an Integrated Scripting Environment (ISE). This lets developers and administrators automate tasks like managing content, deploying updates, creating reports, and maintaining the system. By using Sitecore's built-in APIs, SPE simplifies complex tasks into easy scripts, boosting productivity and speeding up delivery. Its seamless integration with Sitecore lets users perform advanced tasks with accuracy and control, making it a must-have for improving Sitecore workflows.

✅ Prerequisites and Setup

Before implementing the dynamic package generation script, ensure you have:

Sitecore PowerShell Extensions (SPE) installed and configured
Appropriate permissions for package creation and content tree access
Understanding of your content structure and naming conventions
Backup of your Sitecore instance (recommended for safety)

🧩 Dynamic Sitecore Item Package Generation with Sitecore PowerShell Script

The PowerShell script works as follows:

1️⃣ Select Sitecore Content Tree Root Location from which items to be included in the package e.g., /sitecore/content/Verticals/ak-1/Home
2️⃣ Enter one or more exclusion fragments separated by commas e.g., TEST ONLY, first, second, Blog/First Blog, etc.
3️⃣ Regex behavior:
1. The script safely escapes your fragments and creates a combined Regex like: .*(excludestring1|excludestring2).*
2. Any item path that contains any fragment is left out.
3. If you need exact folder names, use more specific fragments e.g., /TEST ONLY/.
4️⃣ Preview + Package:
1. The script shows all included items in a Show-ListView for a quick look.
2. You'll be asked to confirm before the package is created.
3. The package .zip is saved in a temp folder, and the prompt to download.
5️⃣ Validation and Troubleshooting:
1. If nothing appears, check that the root path has items and your fragments aren't excluding everything.
2. Special characters in fragments are automatically escaped.
3. To exclude specific languages or versions, adjust the filter logic as needed (the default language is en).
6️⃣ Safety:
1. This script only reads items and creates a package - it does not change any content.
2. Always check the package in a test environment before using it elsewhere.

Content Tree Structure and Script Execution
Items in Sitecore Package

♻️ Extending the Script for Generic Exclusions

This script uses regex-based filtering, making it very flexible. You can change the regex patterns to:

Exclude items based on their names.
Filter out specific templates.
Leave out whole sections of the content tree that aren't needed for a certain environment.
Adjust package contents for different deployment targets (e.g., UAT vs. Production).

This flexibility makes the script a useful tool for different packaging needs, saving development time and reducing possible deployment mistakes.

🏆 Benefits of This Approach

Efficiency: Automates package creation, saving developers time.
Flexibility: Uses regex filtering to exclude items based on custom patterns.
Community-Driven: Solves real-world issues from the Sitecore Slack XM-Cloud channel.
Reusability: The script can be adjusted for different Sitecore environments.

🔚Conclusion

Using Sitecore PowerShell to create packages with regex-based exclusions is a big improvement for efficient Sitecore development. It helps make clean, customized packages, cuts down on manual work, and makes your deployment process much stronger. You can adapt and extend it to build a cleaner, more automated CI/CD pipeline for your Sitecore projects.

ℹ️ Visit the Smarter Sitecore Packaging Script (Scan the QR code below 👇) to explore the complete codebase.

🧾Credit/References

Sitecore PowerShell New-Package

Sitecore PowerShell Show-ListView

Sitecore create packages using PowerShell

🔗Pingback

How to Migrate Your Next.js App from Sitecore JSS to Content SDK	How to Fix Sitecore Content Serialization Errors	Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing
What is Sitecore PowerShell Extensions? A Beginner's Guide: Discover how Sitecore PowerShell Extensions (SPE) integrates powerful scripting into the Sitecore client to automate tasks, manage content, and supercharge productivity for developers and admins.	Getting Started with Sitecore PowerShell: Take your first steps into Sitecore automation with this beginner's guide to writing and executing basic PowerShell scripts directly within the Sitecore Experience Platform.	How to Use Regular Expressions (Regex) in Sitecore PowerShell: Learn how to harness the power of regular expressions in your SPE scripts to efficiently filter, search, and manipulate Sitecore items and data with precision.
Avoiding Sitecore XM Cloud Errors - Enlighten with Amit	🚨 XM Cloud (XMC) Update 🚨 \| Amit Kumar	XM Cloud Changelog \| Sitecore Developer Portal
Best Practices for Creating Sitecore Deployment Packages: Explore expert tips and strategies for building clean, reliable, and efficient Sitecore packages to ensure smooth and error-free deployments across your environments.	XM Cloud Serialization Best Practices – Sitecore Docs Sitecore’s recommendations for serialization in XM Cloud, including modular architecture tips.	How to Fix Sitecore Content Serialization Errors (SCS) for Duplicate Items with Sitecore PowerShell (SPE)
Automating Sitecore Content Backups with PowerShell Scripts: Follow this step-by-step tutorial to create an automated PowerShell script for backing up your critical Sitecore content items, ensuring data safety and integrity.	A Guide to the Sitecore Package Designer: Manual Packaging: Understand the fundamentals of using the built-in Sitecore Package Designer tool to manually create and install packages for content migration.	Excluding Files and Items in Sitecore Serialization: Learn the techniques for filtering out unnecessary files and items when using Sitecore Serialization, keeping your modules and projects clean and focused.

How to Migrate Your Next.js App from Sitecore JSS to Content SDK

2025-07-30T03:58:00.003+05:30

👋 Introduction
📋 What Is the Sitecore Content SDK for XM Cloud?
⚖ Content SDK vs. Sitecore JSS: Key Differences
🔄 Migrating from JSS Next.js SDK to Content SDK
🌐 Connecting Your Content SDK App Locally or Docker
🔚 Conclusion
🧾 Credit/References

👋 Introduction

The Sitecore Content SDK for XM Cloud is a transformative tool for front-end development. This modern SDK simplifies the complexities of the JSS Next.js SDK, enhancing performance and developer efficiency. It offers seamless integration with XM Cloud’s headless architecture, featuring built-in GraphQL utilities, real-time visual editing, and support for multi-site, personalization, and analytics. Learn how to migrate your existing JSS app to the Content SDK and connect it to a local XM Cloud setup using Docker, optimizing your development process with a streamlined Next.js template.

In this guide, we’ll explore:

What the Content SDK is
Key benefits over JSS
How to migrate from JSS
Connecting to a local XM Cloud Docker setup

📋 What Is the Sitecore Content SDK for XM Cloud?

Overview
The Sitecore Content SDK for XM Cloud is a modern, open-source toolkit for developers creating JavaScript apps that integrate smoothly with Sitecore XM Cloud. This SDK offers APIs and services to easily access, manage, and deliver content, focusing on scalability, speed, and simplicity.
It's a lightweight alternative to the traditional Sitecore JSS framework, optimized for XM Cloud, and provides tools and APIs for high-performance headless apps. The Content SDK removes unnecessary JSS features, speeding up development. It replaces the older JSS Next.js SDK with a streamlined JavaScript SDK for XM Cloud, featuring built-in GraphQL tools, real-time visual editing, multi-site support, personalization, and analytics, all in a simple Next.js template. This toolkit simplifies setup, offering a Next.js starter template with the necessary tools and services for XM Cloud development.
Benefits of Sitecore Content SDK
The Content SDK provides several key benefits for developers using Sitecore XM Cloud. Key features include:
1. Simplified Architecture: Reduced complexity compared to JSS
2. Enhanced Performance: Optimized for XM Cloud-specific scenarios
3. Better TypeScript Support: Improved type definitions and IntelliSense
4. Smaller Bundle Size: Lighter footprint for faster loading times
5. Streamlined Development: Fewer configuration decisions required

⚖ Content SDK vs. Sitecore JSS: Key Differences

Here’s how the Content SDK differs from JSS:

Feature	Sitecore JSS Next.js SDK	Sitecore Content SDK
Bundle Size	Larger, includes unused XP features	Smaller, XM Cloud-optimized
Complexity	High configuration overhead (supports multiple platforms)	Lower (XM Cloud-focused)
TypeScript Support	Basic	Enhanced with better IntelliSense
Performance	Good	Optimized for headless scenarios
Learning Curve	Steep	Easier and more user-friendly
Integration	Requires manual setup	Pre-configured for XM Cloud
Supported Editors	Experience Editor, partial Pages	XM Cloud Pages (metadata)
Personalization & Analytics	Limited, more setup needed	Built-in
Maintenance & Upgrades	Tied to XM/XP releases	Decoupled, independent
Customization Flexibility	Highly extensible, but complex	Enhanced via starter kit
Environment Variables	Uses legacy variable names (e.g., SITECORE_API_KEY)	Uses NEXT_PUBLIC_ prefixes for consistency

Performance Improvements
The Content SDK offers significant performance improvements:
1. Faster Build Times: Fewer dependencies and better bundling
2. Improved Runtime Performance: Lightweight API calls
3. Better Tree Shaking: More effective removal of unused code
4. Enhanced Caching: Better content delivery systems

🔄 Migrating from JSS Next.js SDK to Content SDK

To migrate an existing JSS Next.js app (version 22.5) to the Sitecore Content SDK, it's essential to follow the official guidelines provided by Sitecore. By adhering to these steps, you can ensure a smooth transition from the JSS Next.js SDK to the Content SDK, optimizing your application for enhanced performance and streamlined development.

1️⃣ Update Environment Variables
The Content SDK now uses new environment variable names with the NEXT_PUBLIC_ prefix to match Next.js standards, and some environment variables have been renamed. Update your .env or .env.local file like this:

Old Name (JSS)	New Name (Content SDK)
SITECORE_API_KEY	NEXT_PUBLIC_SITECORE_API_KEY
SITECORE_API_HOST	NEXT_PUBLIC_SITECORE_API_HOST
SITECORE_SITE_NAME	NEXT_PUBLIC_DEFAULT_SITE_NAME
DEFAULT_LANGUAGE	NEXT_PUBLIC_DEFAULT_LANGUAGE
JSS_EDITING_SECRET	SITECORE_EDITING_SECRET

2️⃣ Removal of Unnecessary JSS-Specific Files
Simplify your project by getting rid of old JSS-specific scripts and settings. This will reduce clutter and make things run more smoothly:
1. src/sxastarter/src/lib/layout-service-factory.ts (replaced with Content SDK’s built-in methods)
2. sconfig/index.ts
3. plugins like computed.ts, multisite.ts, etc. inside plugins folder
4. src/temp/config.js (JSS config)
5. src/sxastarter/.graphql-let.yml
6. src/sxastarter/scripts/config/index.ts
7. src/sxastarter/scripts/config/plugins
8. src/sxastarter/scripts/bootstrap.ts
9. src/sxastarter/scripts/generate-component-builder
10. src/sxastarter/scripts/scaffold-component
Check out the detailed change log here.
3️⃣ Refactor Code
1. Replace @sitecore-jss/sitecore-jss-nextjs ➡️ @sitecore-content-sdk/nextjs
2. Replace import { componentBuilder } from '../src/temp/componentBuilder' ➡️ import componentMap from '.sitecore/component-map'
3. Remove refrences of require('./src/temp/config') and require('./src/temp/next-config-plugins')
4. Changes in next.config.js:
  1. Removed JSS-specific webpack configurations
  2. Consolidate all Next.js configuration in next.config.js
  3. Set defaultLocale dynamically.
  4. Migrate all Next config plugin logic (previously located in the src/lib/next-config folder) and all associated custom settings into the next.config.js file, then delete the now-redundant files from the lib folder
  5. Modify next.config.js to integrate Content SDK middleware and services
5. Refactor all middleware to use the defineMiddleware utility in src/sxastarter/src/middleware.ts
6. Added src/lib/sitecore-client.ts
7. Added src/sxastarter/src/components/content-sdk/SitecoreStyles.tsx
4️⃣ Update Pages and Components
1. Replace 'temp/config' ➡️ 'sitecore.config'
2. Replace 'temp/componentBuilder' ➡️ '.sitecore/component-map'
3. Remove obsolete headLinks usages from page files ([[...path]].tsx , 404.tsx , 500.tsx , Layout.tsx )
4. Replace import { SitecorePageProps } from 'lib/page-props' and import { SitecorePageProps } from '@sitecore-content-sdk/nextjs'
5. Remove the usage of WidgetsProvider
6. Replace temp/metadata.json' ➡️ '.sitecore/metadata.json'
7. Replace import type { NextApiRequest, NextApiResponse } from 'next' ➡️ import { RobotsMiddleware } from '@sitecore-content-sdk/nextjs/middleware' in src/sxastarter/src/pages/api/robots.ts
8. Replace import type { NextApiRequest, NextApiResponse } from 'next'; ➡️ import { SitemapMiddleware } from '@sitecore-content-sdk/nextjs/middleware'; in src/sxastarter/src/pages/api/sitemap.ts
9. Add an import for import { JSX } from 'react'; wherever JSX.Element is used in the components
10. Change how you access environment variables from process.env ➡️ config , for example, change process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE to config.personalize?.scope
11. Change how you access nextConfig using 'next.config' from nextConfig() ➡️ nextConfig
12. Update how you check if the page is in EDIT mode from layoutData.sitecore.context.pageEditing / sitecoreContext.pageEditing to span page.mode.isEditing
13. Change how you access styles from the properties parameters. Instead of using props.params.styles.trimEnd(), use styles with the parameter style property (params). Check the example in src/sxastarter/src/components/PageContent/Accordion.tsx
14. Access the field values from the fields object instead of props.fields
15. Replace useSitecoreContext ➡️ useSitecore
16. Replace props.rendering ➡️ rendering
5️⃣ Final Clean-up
Remove all obsolete or replaced code and files according to the documentation, including legacy GraphQL, dictionary, layout, page-props, and middleware utilities now managed by the Content SDK. Ensure you resolve any errors or warnings during migration and enable debug logging for Content SDK issues if needed.

To see the migration process, check the changes in the Sitecore XM Cloud Vertical Demo codebase between the main branch and the feature/XMC-VERTICALS-CONTENT-SDK-V1 branch. You can view the detailed change log at Sitecore XM Cloud Verticals: JSS to Content SDK Migration - Complete Commit Log.

🌐 Connecting Your Content SDK App Locally or Docker

To use the updated Content SDK app after the upgrade, follow these steps:

1️⃣ Go to the src/sxastarter folder and do the following changes in .env file:

The Content SDK uses new environment variable names with the NEXT_PUBLIC_ prefix to match Next.js standards. Update your .env or .env.local file like this:
- XM Cloud Preview Context
  1. Environment variables needed to set up the XM Cloud Preview site locally
    SITECORE_EDITING_SECRET=<ADD THE JSS EDITING SECRET> NEXT_PUBLIC_DEFAULT_SITE_NAME=<ADD THE SITE NAME> SITECORE_EDGE_CONTEXT_ID=<ADD THE PREVIEW CONTEXT ID> NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=<KEEP IT EMPTY>
  2. Environment variables needed to set up the XM Cloud Preview site on Vercel
    SITECORE_EDITING_SECRET=<ADD THE JSS EDITING SECRET> NEXT_PUBLIC_DEFAULT_SITE_NAME=<ADD THE SITE NAME> SITECORE_EDGE_CONTEXT_ID=<ADD THE PREVIEW CONTEXT ID> NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=<KEEP IT EMPTY> FETCH_WITH=GraphQL PUBLIC_URL=<KEEP IT EMPTY>
- XM Cloud Live Context (XM Cloud PROD Site)
  1. Environment variables needed to set up the XM Cloud Live (PROD) site locally
    NEXT_PUBLIC_DEFAULT_SITE_NAME=<ADD THE SITE NAME> SITECORE_EDGE_CONTEXT_ID=<ADD THE PREVIEW CONTEXT ID> NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=<KEEP IT EMPTY>
  2. Environment variables needed to set up the XM Cloud Live (PROD) site on Vercel ℹ️ I'm having trouble setting up the XM Cloud Website on Vercel with XM Cloud LIVE Context. I'm working on fixing these issues and will update the settings once I find a solution. Thank you for your patience and understanding.

2️⃣ In the src/sxastarter folder, run the following commands:

npm install

npm ci --silent

npm run lint

npm prettier --write .

3️⃣ Execute npm run build in your front-end project directory
4️⃣ Execute npm run start:connected or npm run dev in your front-end project directory

5️⃣ Once you see the below logs then access the http://localhost:3000 on your browser:

For help, see: https://nodejs.org/en/docs/inspector
   the --inspect option was detected, the Next.js router server should be inspected at 9230.
   ▲ Next.js 15.4.3
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.155:3000
   - Environments: .env

 ✓ Starting...
 ✓ Ready in 34.5s

Site should load:

🔚Conclusion

The Sitecore Content SDK for XM Cloud significantly advances front-end development by simplifying and optimizing the creation and management of XM Cloud applications. It offers a streamlined, lightweight approach compared to the Sitecore JSS Next.js SDK, tailored for XM Cloud’s headless architecture. By following migration steps and connecting to a local XM Cloud setup, developers can achieve faster development cycles, easier customization, and seamless integration, enhancing the Sitecore XM Cloud experience for modern cloud development.

ℹ️ Visit the XM Cloud Vertical GitHub Repo (Scan the QR code below 👇) to explore the complete codebase and resources. This will help you understand how the project is set up, its structure, and the migration process using the Sitecore Content SDK.

If you've had similar issues with SCS, share your solutions 🔠 or tips 💬 to help others in the community.

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! 🌟

🧾Credit/References

Stripped Down, Amped Up: The New XM Cloud Starter Kit and Content SDK for Developers	Explore the Content SDK on npm	Sitecore Content SDK overview
Migration guide: Migrate JSS 22.5 Next.js apps to Content SDK	Release notes: first beta in April 2025- Introducing Content SDK – a revolution in front-end application development for XM Cloud!	Introducing Content SDK – a revolution in front-end application development for XM Cloud!
XM Cloud Changelog	Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing	Content SDK GitHub repo The Content SDK to support building sites with XM Cloud - Sitecore/content-sdk

🔗Pingback

Connect XM Cloud Pages to your local XM instance: When you use Docker for full-stack development in XM Cloud, and after you set up your local XM Cloud development environment, XM Cloud Pages is not connected to your locally running XM instance.	Set up your full-stack XM Cloud local development environment: When you create an XM Cloud project using the XM Cloud Deploy app and choose the foundation template as the source for the initial deployment, the process adds the foundation template to the source control repository you configured for the initial environment.	XM Cloud dynamic placeholders and Content SDK: Content SDK takes advantage of dynamic placeholders to drive layout and content dynamically in Content SDK applications
Upgrade Your Sitecore XM Cloud Next.js Front-End: Streamline your Sitecore XM Cloud Next.js upgrades with expert tips, tools, and step-by-step guidance for safer, faster front-end updates.	Meet the Sitecore Content SDK for XM Cloud	Upgrade JSS 22.5 Next.js apps to version 22.6
Avoiding Sitecore XM Cloud Errors - Enlighten with Amit	🚨 XM Cloud (XMC) Update 🚨 \| Amit Kumar	XM Cloud Changelog \| Sitecore Developer Portal
Handling Duplicate Content in Sitecore – Strategies to identify and resolve duplicate content problems in large-scale Sitecore implementations.	XM Cloud Serialization Best Practices – Sitecore Docs Sitecore’s recommendations for serialization in XM Cloud, including modular architecture tips.	How to Fix Sitecore Content Serialization Errors (SCS) for Duplicate Items with Sitecore PowerShell (SPE)
Fixing Serialization Conflicts - A community discussion on resolving ‘non-unique path’ errors in Sitecore SCS, with tested solutions.	Sitecore CLI and Serialization How to integrate Sitecore CLI with serialization for DevOps-friendly workflows.	SPE Script Repository – Sitecore Community - A curated collection of PowerShell scripts for Sitecore, including content tree maintenance.

How to Fix Sitecore Content Serialization Errors (SCS) for Duplicate Items with Sitecore PowerShell (SPE)

2025-07-21T03:29:00.002+05:30

🛠Introduction to Sitecore Content Serialization (SCS) and Common Challenges
📋What is Sitecore Content Serialization?
🛑The Problem: Duplicate Item Names Causing Serialization Errors
🧹The Solution: Clean Up Duplicates with a Sitecore PowerShell Script
🔚Conclusion
🧾Credit/References

🛠Introduction to Sitecore Content Serialization (SCS) and Common Challenges

Sitecore Content Serialization (SCS) is a great tool for managing and syncing content in Sitecore projects, especially when dealing with multiple sites and lots of content items. But problems like duplicate item errors can mess up the serialization process, which can be frustrating for developers. This article looks at a real-life situation where duplicate items caused errors during SCS setup and how an automated PowerShell script using Sitecore PowerShell Extension (SPE) quickly fixed the problem.

📋What is Sitecore Content Serialization?

Sitecore Content Serialization (SCS) lets developers turn content items, templates, and settings into JSON files (.yml) for version control and deployment. It makes content management easier by helping teams track changes, work together well, and deploy content consistently across different environments.

Benefits of SCS:
- Version Control: Keep content in Git or other version control systems for easy tracking.
- Team Collaboration: Allow multiple developers to work on the same project
- Automation: Automate content deployment and syncing
- Consistency: Keep content the same across development, staging, and production environments
Best Practices:
To prevent serialization problems, follow these SCS best practices::
1. Use unique item names in the content tree.
2. Set up correct ignore and scope rules in .module.json.
3. Test serialization in a development environment before deploying.
4. Use Sitecore PowerShell scripts for bulk content tasks.

🛑The Problem: Duplicate Item Names Causing Serialization Errors

While setting up Sitecore Content Serialization (SCS) for a project with multiple sites and running the command dotnet sitecore ser pull, I encountered a serialization error: Non-unique paths cannot be serialized. Please choose a different item name.:

attempted to be cached, but the cache already contained [...] with different ID. Non-unique paths cannot be serialized.

This happened even though I set the module.json to ignore certain scopes like /ContosoTenant.

{
  "namespace": "Contoso.Tenants",
  "references": ["Contoso.InIt"],
  "items": {
    "includes": [
      {
        "name": "tenant.Root",
        "path": "/sitecore/content",
        "scope": "descendantsOnly",
        "allowedPushOperations": "createUpdateAndDelete",
        "rules": [
          { "path": "/ContosoTenantFolder", "scope": "SingleItem" },
          { "path": "/ContosoTenantFolder/ContosoTenant", "scope": "SingleItem" },
          { "path": "/ContosoTenant", "scope": "ignored" }
        ]
      }
    ]
  }
}

🔍 How this happens:
- SCS needs unique item paths and IDs to work properly.
- If two items under the same parent path have the same name, SCS will show an error during push or pull operations.
- In big content trees with lots of old data, there can be many duplicates, making manual clean-up difficult

🧹 The Solution: Clean Up Duplicates with a SPE Script

Manually deleting hundreds of duplicate items and updating references would have been a huge hassle. So, I made a custom Sitecore PowerShell Extension (SPE) script that:

Moves through a specific part of the content tree
Finds items with the same name
Keeps the oldest item and removes the others
Updates all links to point to the item that was kept

💻 Sample SPE Script for Duplicate Cleanup

<#
This script goes through a chosen node, finds items with a certain name and template, and deletes all but the oldest one. It also updates all links from the deleted items to point to the oldest item.
#>

$dialogProps = @{
    Title = "Duplicate Item Cleanup"
    Description = "Select the root node and item name to search for duplicates using a specific template."
    Width = 450
    Height = 250
    OkButtonName = "Continue"
    CancelButtonName = "Cancel"
    ShowHints = $true
    Parameters = @(
        @{
            Name = "selectedPath"
            Title = "Root Path"
            Source = "/sitecore/content"
            Editor = "droptree"
            Tooltip = "Choose the root path for duplicate detection."
        },
        @{
            Name = "itemName"
            Title = "Item Name"
            Editor = "text"
            Tooltip = "Enter the name of the item to search for."
        }
    )
}

$result = Read-Variable @dialogProps
if ($result -ne "ok" -or [string]::IsNullOrEmpty($selectedPath) -or [string]::IsNullOrEmpty($itemName)) {
    Write-Host "Path or item name not provided. Exiting."
    Exit
}

$rootPath = $selectedPath.Paths.Path
if ([string]::IsNullOrEmpty($rootPath)) {
    $rootPath = "/sitecore/content"
}
Write-Host "Processing root path: $rootPath"
Write-Host "Searching for item name: $itemName"

$templateId = "{xxx-xxx-xxxx-xxxx-xxxx}"
$matchedItems = Get-ChildItem -Path "master:$rootPath" -Recurse | Where-Object { $_ -ne $null -and $_.TemplateID.ToString() -eq $templateId -and $_.Name -eq $itemName }

if ($matchedItems.Count -le 1) {
    Write-Host "Only one or no matching item found. No action needed."
    Exit
}

$items = $matchedItems | Sort-Object __Created
$oldest = $items[0]
$duplicates = $items | Where-Object { $_.ID -ne $oldest.ID }

$deletedItems = @()
foreach ($dupe in $duplicates) {
    Write-Host "Replacing links from '$($dupe.Paths.Path)' to '$($oldest.Paths.Path)'" -ForegroundColor Cyan

    $referrers = [Sitecore.Globals]::LinkDatabase.GetReferrers($dupe)
    foreach ($link in $referrers) {
        $refItem = Get-Item -Path ("master:" + $link.SourceItemID)
        if ($refItem -ne $null -and $refItem.Fields[$link.SourceFieldID] -ne $null) {
            $field = $refItem.Fields[$link.SourceFieldID]
            $refItem.Editing.BeginEdit()
            $field.Value = $field.Value -replace [Regex]::Escape($dupe.ID.ToString()), $oldest.ID.ToString()
            $refItem.Editing.EndEdit()
            Write-Host "  Updated link in item: $($refItem.Paths.Path)"
        }
    }

    Write-Host "Deleting item: $($dupe.Paths.Path)" -ForegroundColor Red
    $dupe | Remove-Item
    $deletedItems += $dupe
}

$props = @{
    Title = "Duplicate Item Cleanup Report"
    InfoTitle = "Items Deleted and Links Updated"
    InfoDescription = "List of duplicate items named '$itemName' using template ID $templateId that were deleted."
    PageSize = 100
}

$deletedItems | Show-ListView @props -Property @{ Label = "Item Name"; Expression = { $_.Name } },
@{ Label = "Item ID"; Expression = { $_.ID } },
@{ Label = "Item Path"; Expression = { $_.Paths.Path } },
@{ Label = "Created"; Expression = { $_.__Created } },
@{ Label = "Updated"; Expression = { $_.__Updated } }

Close-Window

⚠ Always backup before bulk-deleting and test extensively in non-production environments.

⚡ This script saved hours of manual work and made sure the content structure was clean and consistent for serialization.

✔️ Benefits of Using This Script
1. Efficient Automation: Makes content cleanup easier by cutting down on mistakes and manual work, ensuring it's done right.
2. Versatile Reusability: Can be used for different duplicate-cleaning tasks and content tree navigation, making it flexible.
3. Integrity and Safety: Keeps data intact and updates links automatically to avoid broken references, ensuring safe changes.
4. Scalable Performance: Can manage large content trees with many items, saving time and resources..

🔚Conclusion

Setting up Sitecore Content Serialization can be tough, especially with old content structures and duplicate items. But by using Sitecore PowerShell Extensions, you can automate finding and fixing duplicate item errors, which often happen in big, multi-site projects. This saves time and keeps your content organized and efficient. You can adjust the script to match your Sitecore project needs, making things more efficient and cutting down on manual mistakes.

Scan the QR code below to download the script. It will help you manage your Sitecore content more easily and fix duplicate item issues.

🧾Credit/References

Setup Sitecore Content Serialization	Sitecore Development 101: Optimizing Your Sitecore Serialization	Accelerate Cookbook for XM Cloud - template.module.json
XM Cloud Documentation for Developers - Content modeling and presentation - XM Cloud for developers - Best practices - Recommendations: Extending SXA	The Basic Checklist for Sitecore XM Cloud Content Serialization	Sitecore Headless Container Setup: Your Path to Future-Proof Digital Experiences

🔗Pingback

Automate Sitecore XM Cloud Webhook Registration with Azure DevOps Pipeline and PowerShell	How to Implement Real-Time Updates from XM Cloud to Sitecore Search	How to Create Azure Function Webhooks for Sitecore XM Cloud and Experience Edge Integration
How to Set Up Full-Stack XM Cloud Local Development for Multiple Code Bases	How to Configure an External Editing Host for Sitecore XM Cloud	Deploying Sitecore XM Cloud - JSS Apps to Vercel with Azure DevOps Pipeline: A Step-by-Step Guide
Extract metadata with Sitecore Search JavaScript Document Extractor	Sitecore Official Documentation: Content Serialization	Sitecore PowerShell Extensions (SPE) GitHub - The official repository for Sitecore PowerShell Extensions, a must-have tool for automation in Sitecore.
Handling Duplicate Content in Sitecore – Strategies to identify and resolve duplicate content problems in large-scale Sitecore implementations.	XM Cloud Serialization Best Practices – Sitecore Docs Sitecore’s recommendations for serialization in XM Cloud, including modular architecture tips.	Bulk Editing Sitecore Items with SPE - A deep dive into using PowerShell for bulk operations in Sitecore, including cleanup scripts.
Fixing Serialization Conflicts - A community discussion on resolving ‘non-unique path’ errors in Sitecore SCS, with tested solutions.	Sitecore CLI and Serialization How to integrate Sitecore CLI with serialization for DevOps-friendly workflows.	SPE Script Repository – Sitecore Community - A curated collection of PowerShell scripts for Sitecore, including content tree maintenance.

Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing

2025-07-14T21:52:00.009+05:30

👋Introduction: Solving Modern Web Deployment Challenges
🔍What Are .wpp.targets Files and Why Do They Matter?
💡Real-World Implementation: A Sitecore Success Story
🎯Key Benefits for Enterprise Development Teams
🔧Essential Patterns and Best Practices
⚙️Advanced Scenarios and Customizations
🚨Troubleshooting Common Issues
🔚Conclusion: Transforming Your Deployment Experience
🧾Credit/References

👋Introduction: Solving Modern Web Deployment Challenges

Deploying ASP.NET MVC applications, especially Sitecore-based projects, can be tricky due to dependency conflicts, unwanted assemblies, and missing updates. Traditional deployment methods often lead to bloated packages, version conflicts, and manual steps that slow down delivery.

The .wpp.targets file is a powerful MSBuild tool that can turn the Web Publishing Pipeline (WPP) into a precise deployment tool. This guide shows how development teams use .wpp.targets files to make deployments smooth and efficient.

🔍What Are .wpp.targets Files and Why Do They Matter?

The Web Publishing Pipeline Foundation:
The Web Publishing Pipeline is a part of MSBuild used for packaging and deploying web apps. By default, it includes everything in your project, often more than necessary. This everything included method causes several key problems:
- Deployment Bloat: Unneeded files make packages bigger and slow down deployment
- Version Conflicts: Different versions of the same DLL can cause errors
- Missing Dependencies: Important updates and third-party libraries might be left out
- Security Risks: Development-only files might accidentally be deployed to production
The .wpp.targets Solution:
A .wpp.targets file is an MSBuild project file that connects to the Web Publishing Pipeline at key points, letting you:
- Control which files are included or excluded with detailed patterns
- Use allowlist/blocklist methods for managing DLLs
- Automate hotfix and patch deployment without needing to do it manually
- Reduce package size by taking out unnecessary parts
- Make sure deployments are consistent in all environments

💡Real-World Implementation: A Sitecore Success Story

The Challenge: Hotfix Problems:
Imagine a typical Sitecore setup where important hotfixes like Sitecore.Support.100.dll need to be deployed to fix security issues. Without proper automation:
- Developers manually copy files to deployment folders
- Hotfixes are sometimes forgotten during environment updates
- Inconsistent deployments lead to production problems
- Debugging becomes a long and difficult process

The Solution: Intelligent .wpp.targets Configuration
Here's how a well-designed .wpp.targets file solves these challenges:

<!-- Automated hotfix deployment target -->
<Target Name="CopyHotfixToDeployFolder" AfterTargets="Package;Build;AfterBuild">
  <PropertyGroup>
    <HotfixSourcePath>$(MSBuildProjectDirectory)\..\..\SitecoreHotfixPackages\Sitecore.Support.100.dll</HotfixSourcePath>
    <DeployBinPath>$(MSBuildProjectDirectory)\..\..\docker\deploy\platform\bin</DeployBinPath>
  </PropertyGroup>
  
  <MakeDir Directories="$(DeployBinPath)" Condition="!Exists('$(DeployBinPath)')" />
  
  <Copy SourceFiles="$(HotfixSourcePath)" 
        DestinationFiles="$(DeployBinPath)\Sitecore.Support.100.dll" 
        OverwriteReadOnlyFiles="true"
        ContinueOnError="false" 
        Condition="Exists('$(HotfixSourcePath)')" />
</Target>

This target automatically ensures hotfixes are deployed with every build, eliminating manual steps and preventing oversight.

🎯Key Benefits for Enterprise Development Teams

Elimination of Deployment Inconsistencies
- Problem: Different environments have different assemblies because of manual deployment steps.
- Solution: .wpp.targets files make sure all environments have the same assembly sets by automating which files to include or exclude
Big Package Size Reduction
- Before: 150MB packages with lots of extra DLLs
- After: 45MB packages with only the needed assemblies
This 70% reduction leads to:
- Faster deployment times
- Less bandwidth usage
- Lower storage costs
- Better reliability

Advanced Dependency Management The allowlist approach ensures only required assemblies are deployed:

<ItemGroup>
  <!-- Include only essential third-party libraries -->
  <RequiredDlls Include="bin\Vimeo*.dll" />
  <RequiredDlls Include="bin\Contoso.*.dll" />
  <RequiredDlls Include="bin\Sitecore.Support.*.dll" />
  
  <!-- Exclude problematic assemblies -->
  <UnwantedDlls Include="@(FilesForPackagingFromProject)" 
                Condition="$([System.String]::new('%(DestinationRelativePath)').Contains('Microsoft.')) AND
                          !$([System.String]::new('%(DestinationRelativePath)').EndsWith('Contoso.Feature.dll'))" />
</ItemGroup>

Proactive Conflict Prevention By leaving out assemblies that are already in the Sitecore platform, .wpp.targets files stop version conflicts before they happen

🔧Essential Patterns and Best Practices

The Three-Layer Exclusion Strategy
- Early Deduplication: Remove problematic files before collection
- Pattern-Based Filtering: Use wildcards for bulk exclusions
- Allowlist Validation: Explicitly include only required assemblies

Critical Configuration Elements

Verbose Logging for Debugging

<PropertyGroup>
  <EnablePackageProcessLoggingAndAssert>true</EnablePackageProcessLoggingAndAssert>
</PropertyGroup>

Localization Folder Exclusion

<ExcludeFromPackageFolders Include="bin\roslyn;bin\ja;bin\pt-BR;bin\ru;bin\refbin\zh-Hans;bin\zh-Hant;">
  <FromTarget>Project</FromTarget>
</ExcludeFromPackageFolders>

Build Process Integration

<PropertyGroup>
  <CopyAllFilesToSingleFolderForMsdeployDependsOn>
    CustomCollectFiles;
    CopyHotfixToDeployFolder;
    $(CopyAllFilesToSingleFolderForMsdeployDependsOn);
  </CopyAllFilesToSingleFolderForMsdeployDependsOn>
</PropertyGroup>

⚙️Advanced Scenarios and Customizations

Multi-Environment Configuration
Different environments often require different assembly sets. Use MSBuild conditions to handle this:

<RequiredDlls Include="bin\Debug.*.dll" Condition="'$(Configuration)' == 'Debug'" />
<RequiredDlls Include="bin\Prod.*.dll" Condition="'$(Configuration)' == 'Release'" />

Third-Party Library Management
For complex projects with many third-party dependencies:

<ItemGroup>
  <!-- Vimeo Platform -->
  <VimeoFiles Include="$(MSBuildProjectDirectory)\..\..\ThirdyPartyAssemblies\Vimeo\*.dll" />
  
  <!-- A library for parsing and manipulating XML data-->
  <LibXML Include="$(MSBuildProjectDirectory)\..\..\ThirdyPartyAssemblies\libxml2\*.dll" />
  
  <!-- OpenSSL Dlls -->
  <OpenSSL Include="$(SolutionDir)packages\OpenSSL.*\ThirdyPartyAssemblies\**\OpenSSL.dll" />
</ItemGroup>

Debugging and Validation Targets
Include diagnostic targets for troubleshooting:

<Target Name="DebugShowAvailableDlls" BeforeTargets="FinalAllowlistFilter">
  <ItemGroup>
    <BinDlls Include="bin\*.dll" />
  </ItemGroup>
  
  <Message Text="Available DLLs: @(BinDlls)" Importance="high" />
</Target>

🚨Troubleshooting Common Issues

Missing DLLs in Deployment
- Symptoms: Required assemblies don't appear in published output
- Solution: Verify the DLL is in the RequiredDlls collection and not excluded by UnwantedDlls
Build Performance Issues
- Symptoms: Slow build times after adding .wpp.targets
- Solution: Use specific patterns instead of broad wildcards and add existence conditions
Path Resolution Problems
- Symptoms: Files not found during build
- Solution: Use MSBuild properties like $(MSBuildProjectDirectory) for relative path construction

🔚Conclusion: Transforming Your Deployment Experience

The .wpp.targets file marks a shift from reactive to proactive deployment management. By following the strategies in this guide, development teams can stop dealing with deployment issues and start confidently delivering consistent, optimized applications in all environments.

Grab our reusable .wpp.targets template here!

Do you have any thoughts or suggestions 🔠 on this .wpp.targets template? Please share your feedback 💬 in the comments! Scan the above QR code to access the full template.

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! 🌟

🧾Credit/References

Excluding Files and Folders from Deployment	Sitecore Helix Publishing Pipeline (HPP)	Extend the Visual Studio build process
Customize your build	GitHub - Sitecore Helix Publishing Pipeline (HPP)	Speed Up Sitecore Upgrade with PackageReference

🔗Pingback

Sitecore public NuGet feed FAQ	Nugetify your Sitecore References - Kam Figy	How to reference and deploy Sitecore hotfix DLLs?
Excluding Sitecore assemblies using NuGet	sc-packages - Sitecore.Assemblies.Platform	Issue with Sitecore NuGet Package Install - XCentium
Sitecore How-To: Add Sitecore NuGet Packages to Your Project	Save time updating Sitecore Nuget Packages	Migrate to PackageReference from packages config
NuGet: To Reference, or to NoReference? That is the question	what is sitecore project	sitecore project example
sitecore project in visual studio	sitecore project architecture	sitecore helix project structure
sitecore sample project	create sitecore project	sitecore demo project
NuGet Package	Advanced MSBuild Customization Techniques for Enterprise .NET Projects: Master advanced MSBuild customization beyond .wpp.targets including custom tasks, property functions, and conditional compilation for enterprise-scale .NET applications.	sitecore feature foundation project
sitecore helix project template	sitecore helix project layer	sitecore habitat project
sitecore create helix project	create sitecore mvc project	setup sitecore mvc project
sitecore helix new project	sitecore visual studio project setup	c# project assembly reference
project missing assembly reference	.net project assembly references	project reference vs assembly reference
visual studio project assembly reference	migrate to packagereference asp.net	migrate solution to packagereference
nuget migrate to packagereference asp.net	migrate packages.config to packagereference asp.net	migrate all projects to packagereference
migrate packages.config to packagereference missing	migrate packages.config to packagereference not working	migrate nuget format to packagereference transitive dependencies
migrate nuget format to packagereference	how to migrate to packagereference	migrate to packagereference manually
nuget migrate to packagereference	.net migrate to packagereference	migrate packages.config to packagereference solution
visual studio migrate to packagereference	migrate packages.config to packagereference visual studio 2019	sitecore 10 tutorial
Sitecore Deployment Best Practices: A Complete Guide for Production Environments- Comprehensive guide to Sitecore deployment strategies, environment management, and production-ready configurations for enterprise implementations	Docker Container Deployment Guide for ASP.NET MVC Applications: Learn how to containerize ASP.NET MVC applications with Docker, including multi-stage builds, optimization techniques, and CI/CD pipeline integration.	Sitecore kafka
Sitecore Hardware and software requirements	Sitecore Sitecore Sizing Calculations	Sitecore GraphQL Examples
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
Azure DevOps Pipeline Configuration for ASP.NET MVC Deployment Automation: Step-by-step guide to setting up Azure DevOps pipelines for automated ASP.NET MVC deployments with build optimization and testing integration.	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
DLL Dependency Management: Resolving Version Conflicts in .NET Applications- Complete guide to managing DLL dependencies, resolving version conflicts, and implementing dependency injection patterns in enterprise .NET applications.	Performance Optimization Strategies for Large-Scale Application Deployments: Advanced techniques for optimizing deployment performance including parallel processing, incremental deployments, and bandwidth optimization for enterprise applications.	Sitecore update package

Insights into Sitecore Search: A Definitive Introduction

2024-01-11T12:30:00.005+05:30

A key component of digital experience management is effective information retrieval. A simplified approach is required for websites, applications, and platforms containing a lot of material so that consumers can easily get the data they require. This need is met by Sitecore, a well-known name in the field of digital experience platforms (DXPs), which provides powerful and comprehensive search functionality. We will travel into the realm of Sitecore Search in this article, learning about its capabilities, architecture, and the enormous value it offers both developers and end users.

Introduction to Sitecore Search

A headless content discovery platform powered by AI, Sitecore Search enables you to build predictive and custom search experiences across various content sources. To extract and index your material, the platform offers generic connections that you can configure.

A strong tool like Sitecore Search makes it possible for online platforms to find and retrieve data quickly and effectively. It is essential for improving user experience and improving website performance. Businesses can gain useful insights and enhance their overall online presence by realizing the importance of good data discovery.

Key Features Enabling Effective Searches

Robust Indexing:
Sitecore Search makes use of an effective indexing system where material and related metadata are diligently analyzed and saved in an optimized way. This index guarantees quick and effective searching.
Querying Flexibility:
Simple keyword searches, phrase searches, wildcard searches, and other types of searches are all supported by Sitecore Search. These features enable users to customize their searches for accurate and personalized results.

The Semantic search is used by the Sitecore Search, and it uses machine learning and natural language processing to take query context and word relationships into account.

Note: When there are multiple words in a keyphrase, semantic search is useful.
Faceted Search:
Using filters based on multiple metadata or factors related to the content, faceted search is an essential feature that enables users to focus their queries. As a result, search results' relevance is improved.
Multilingual Support:
Users may search for and find content in their favorite language thanks to Sitecore Search's multilingual support.
Relevancy Tuning:
Sitecore Search provides a facility to configure the textual relevance which helps in finding the results closer to the visitor's search query. When you set up textual relevance, you instruct Sitecore Search where to seek for matching phrases within the material as well as the proportional weight to be given to certain content regions.

The Fundamentals of Sitecore Search

Data may be retrieved quickly and accurately because of the complex architecture used by Sitecore Search. It is made up of a number of essential elements, such as relevance modelling, indexing, and searching. These elements cooperate to provide users with accurate search results and a seamless experience. Businesses may better understand how Sitecore Search affects search results by exploring the architecture behind it.

The Sitecore Search is based on the Federated Search Model. The Federated search is a method for simultaneously searching several data sources. Federated search enables you to use a single query and a single search interface to access data from numerous content locations.

If we search all the content sources in real-time then it will be slow, and it wouldn't give good user exp. to end-user. The Sitecore Search scans the different sources and indexes the content and stores them into the Sitecore Search Platform, and when user perform the Search from the UI then it will perform following operations:

For example, if you access the Sitecore developer portal then you will get combined results from following sources with the help of Sitecore Search:

The Architecture of Sitecore Search

The following key elements are included in the architecture of Sitecore Search and guarantee its efficacy:

Crawling:
Gathering content from the website or application and getting it ready for indexing are the first steps in this process. The crawling process in Sitecore is adaptable to many data sources and formats.
Indexing:
After being crawled, the content goes through an indexing process where it is converted into a format that is search engine friendly.

The Semantic search is used by the Sitecore Search, and it uses machine learning and natural language processing to take query context and word relationships into account.
Querying:
The search engine obtains the pertinent results depending on the user's query after receiving the search query from the user and sending it to the index.
Presentation:
The user is given access to the search results in an intuitive manner, frequently with features like faceted search, result highlighting, and others.

The Sitecore Search building blocks

To use the Sitecore Search, you need to configure following elements in the Sitecore Search Platform to index the data from content source:

Sitecore Search Connector:
The Sitecore Search Connector provides the mechanism or say starting point used by the Sitecore Search platform to connect with external source, and provides following connectors
- API Crawler: If your content can only be accessed by an API endpoint, and the API returns JSON
- API Push: Add, update, or delete individual documents in new or existing indexes
- Feed Crawler: Crawls feed files (CSV or JSON)
- Web Crawler: If you have content in one locale, and all the content is accessible through a webpage
- Web Crawler (Advanced): If you need to index content in multiple languages or want to use JavaScript to extract attributes
You also need to define the scope of the source which is used by the crawler and for this need to define the domains which the crawler is allowed to access, the URLs it must avoid, the deepest URL the crawler should go, and more.
Sitecore Search Trigger:
The crawler's initial point of search for content to index is known as a trigger. Sitecore Search starts its data scans and rescans from the triggers that you have set up.

More than one trigger may be set up. If there are multiple triggers, Search begins with the first one, finishes the scan, and then moves on to the next trigger.

You can create following type of Sitecore Search Triggers:
- Sitemap: use a sitemap as the trigger. This is the easiest way to configure a trigger because most public websites have a sitemap.
- Sitemap index: use a sitemap index as the trigger.
- Request: use this when your source is a REST API endpoint or if you want the crawler to start from one URL.
- RSS: use an RSS feed as the trigger.
- JavaScript (JS): use a JavaScript (JS) function as the trigger.
Sitecore Search Document Extractor:
Out of the URLs or documents in your original material, the document extractor creates an index document. These index documents are then added to the source's index by Sitecore Search. Search searches the index of documents at runtime to produce results.

Each index document is added to by the document extractor with attributes and attribute values in the form of key:value pairs. You can specify how Sitecore Search should extract values for each attribute when configuring a document extractor. The key:value pair for that content item's index document is not added if the document extractor is unable to locate an attribute value. Sitecore Search does not index a content item if the document extractor is unable to locate the value for a required attribute.

Following types of extractors present:
- CSS
- Xpath
- JS

Leveraging Sitecore Search Capabilities

Businesses can adapt Sitecore's search capability to suit unique requirements by customizing it. This enables them to satisfy the particular needs of their online platform and offer a personalized user experience. Utilizing relevance modeling's full potential also improves search accuracy by considering user preferences and intents. By enabling users to filter search results based on particular criteria, the use of search facets significantly improves the user experience.

Implementing Sitecore Search

Several important factors need to be taken into account while configuring Sitecore Search in an environment. Businesses can improve search results and assure effective data retrieval by investigating indexing options. In order to achieve seamless functionality, it is also necessary to integrate Sitecore Search with a website using best practices. Sitecore Search may be used to its fullest capacity by enterprises when implemented appropriately.

Sitecore Search vs. External Search Engines

It's helpful to weigh the benefits and drawbacks of Sitecore Search with well-known external search engines side by side. Although they might have certain advantages, there are some situations where Sitecore Search performs better than external search engines. Businesses can choose the best strategy for their data discovery requirements by weighing these benefits and drawbacks.

Best Practices for Optimizing Sitecore Search

Organizing content in a way that makes it more searchable is a key component of optimizing Sitecore Search. To further improve data organization, this includes the use of metadata and tagging techniques. Businesses can continuously improve search performance by implementing A/B testing. Organizations may increase the effectiveness and efficiency of their Sitecore Search deployment by implementing these best practices.

Evaluating the ROI of Sitecore Search Implementation

Businesses can gain useful information by measuring the effect of Sitecore Search on user engagement and website performance. Organizations can evaluate their return on investment by calculating the cost-effectiveness of their search implementation. A thorough assessment of the Sitecore Search integration is possible with the identification of important success metrics and benchmarks.

Future Trends and Innovations in Sitecore Search

Sitecore Search also advances with technology. Future trends can be gleaned from examining how artificial intelligence is being used in search algorithms. Similar chances for more intuitive and user-friendly experiences are provided by Sitecore's natural language processing. Furthermore, Sitecore Search is significantly impacted by predictive search patterns, which encourage ongoing innovation and development.

Conclusion

To sum up, Sitecore Search gives companies the tools they need to harness the potential of data discovery and offer top-notch user experiences. Organizations can improve the functionality of their websites, get insightful data, and increase conversion rates by comprehending its underlying concepts, utilizing its possibilities, and putting it into practice successfully. For businesses trying to stay on top of the ever-changing digital experience landscape, integrating Sitecore Search is crucial.

Sitecore Search FAQs

How long does it take to configure Sitecore Search?
Configuring Sitecore Search varies depending on the complexity of the specific requirements.
Can Sitecore Search be integrated with third-party analytics tools?
Yes, Sitecore Search can be seamlessly integrated with Sitecore CDP to track the events to enhance data analysis capabilities.
Is Sitecore Search suitable for e-commerce websites?
For e-commerce websites it’s recommended to use Sitecore Discover: the powerful AI-driven product search and merchandizing solution, which enables businesses to deliver personalized commerce experiences. This search platform is also built on the same mechanism as Sitecore Search.
Can Sitecore Search handle multilingual websites?
Yes, Sitecore Search is designed to handle multilingual websites, ensuring accurate search results across different languages.
What are the hardware requirements for efficient Sitecore Search implementation?
The Sitecore Search is SaaS based offering from Sitecore, which can predict search intent and display individualized results with a personalized search experience based on AI.

Credit/References

What is Federated Search? - YouTube	Sitecore Search - Adding an Index Source - YouTube	Open AI
Getting onboard with Sitecore Search - YouTube	Introduction to Sitecore Search \| Sitecore Documentation	Overview of Search features \| Sitecore Documentation

Pingback

SearchStax-Sitecore SiteSearch - Intuitive Sitecore Site Search	Surface hyper-relevant content through AI-powered search	Sitecore Search
Sitecore Search Documentation	Searching	Find the most relevant content throughout our site
Sitecore Discover - AI-Powered Search & Merchandizing	What is AI-powered search?	Getting started with Sitecore Search
Search and indexing overview	Search for an item	Sitecore search google
Sitecore search app	sitecore search product	sitecore search api
sitecore search ai	sitecore discover	sitecore connect
Sitecore Search insights	Optimizing Sitecore Search	Sitecore search engine
Advanced search capabilities	Sitecore search architecture	Enhancing user experience with Sitecore Search
Sitecore indexing process	Understanding search in Sitecore	Sitecore search features
Leveraging Sitecore for efficient search	Sitecore search best practices	Sitecore search strategies
User-centric Sitecore Search	Boosting engagement with Sitecore Search	Sitecore content discovery through search
Sitecore Search for developers	Customizing Sitecore search	Sitecore Search and SEO
Sitecore Search and content relevance	Sitecore Search implementation tips	search engines
drupal search	kentico search	umbraco search
liferay search	sitecore support	coveo for sitecore
sitecore search engine	solr sitecore	failed to start service sitecore xconnect search indexer
sitecore solr search	sitecore content search	solr search in sitecore
sitecore solr search example c#	sitecore azure search	sitecore search by field value
sitecore contentsearch	solr in sitecore	sitecore site search
sitecore elasticsearch	coveo search sitecore	sitecore lucene
sitecore acquires reflektion	azure search sitecore	sitecore 9 solr search example
sitecore solr search example	search in sitecore	sitecore contentsearchmanager
coveo sitecore integration	sitecore solr computed field	site search sitecore
coveo search for sitecore	sitecore faceted search	what is sitecore search
what is solr search in sitecore	what is sitecore	sitecore searchstax
what is xm cloud	Sitecore XM Cloud Architecture overview	what is sitecore xm cloud
Sitecore Experience Manager Cloud (XM Cloud) Building blocks	Deploying XM Cloud	Sitecore Headless SXA
Sitecore Headless SXA	sitecore jss nextjs	sitecore jamstack
The architecture of Sitecore Experience Edge for XM	sitecore toplogies	Elevating Your Sitecore Next.js App with Tailwind CSS: A Perfect Union of Design and Performance
Default topologies \| Sitecore Documentation	Solutions for your digital experiences	XM topology for on-premises
XM Cloud Recommended Practices - Sitecore	XM Cloud FAQ	If XM Cloud Is A Headless CMS, What Does That Mean?
What Problems Does XM Cloud solve?	What’s the difference between Experience Manager, Experience Platform, and XM Cloud?	Sitecore XM Cloud Limitations and restrictions
Limitations and restrictions of Experience Edge for XM	Sitecore Experience Manager (XM) Build Experiences That Connect	Sitecore Experience Edge GraphQL Queries
what is sitecore experience edge and what is Sitecore XM Cloud?	Sitecore XM Cloud: The Modern SaaS CMS	sitecore experience edge connector
What is the difference between Sitecore XM and XM cloud?	Which is better content hub one or XM cloud?	sitecore experience edge architecture
XM Cloud Introduction	sitecore XM Cloud Components in Action	Sitecore XM Cloud: Getting Started with Personalization and ...
Sitecore Experience Manager Cloud	Sitecore Experience Manager Cloud (XM Cloud)	Sitecore/XM-Cloud-Introduction: A XM Cloud repository containing
A Complete Guide to Upgrade to Sitecore XM Cloud	Sitecore XM Cloud. Sitecore Composable DXP	sitecore experience editor
sitecore xm cloud	sitecore xm cloud components	sitecore xm architectur
sitecore xm cloud architecture	sitecore xm documentation	sitecore xm cloud login
sitecore xm cloud vercel	sitecore xm cloud vs xp	sitecore xm cloud local setup
sitecore edge

Sitecore Experience Manager Cloud (XM Cloud) Building blocks

2023-08-22T01:44:00.003+05:30

Sitecore Experience Manager Cloud, or XM Cloud is a game-changing force in the field of digital experience management in the age of cloud computing. We must identify the fundamental components that make up this cutting-edge platform in order to fully appreciate its capabilities. Join us as we dissect the fundamental elements that make up the Sitecore Experience Manager Cloud (or XM Cloud) architecture and investigate how they work together to produce a dynamic, scalable, and customized digital experience environment.

Sitecore XM Cloud Overview

The SaaS enterprise-ready, cloud-native CMS from Sitecore called the Experience Manager Cloud (XM Cloud) allows for the creation of content only once and delivers it to every channel for exceptional client experiences.

Developers and marketers can quickly and effectively deliver compelling omnichannel experiences in the Cloud using Sitecore's headless CMS utilising the Sitecore Experience Manager Cloud (XM Cloud), a fully managed self-service deployment platform. The most recent versions of Experience Manager, Pages editor, Sitecore Headless Experience Accelerator (SXA), Headless Services, Sitecore Next.js SDK (and other Heads), and Experience Edge are all included in Experience Manager Cloud.

With XM Cloud, you can quickly produce attractive experiences, develop websites, and create content that enhances the client experience. Infrastructure, scalability, customization, and seamless content delivery are just a few of the unmatched features that the Sitecore XM Cloud offers, making it a real Headless Content-As-A-Service platform for creating rich digital experiences.

Sitecore Experience Manager Cloud (or XM Cloud) Architecture Overview

The person in charge of designing, creating, deploying, configuring, managing, and/or customising an XM Cloud project must be aware of the architecture of Sitecore XM Cloud.

Note: XM Cloud comes with a Content Management application based on Sitecore XM including known but also new editing tools. You will be able to use classic tools such as Content Editor as well as Experience Editor. However, XM Cloud introduces new powerful tools for content design and editing through Sitecore Pages, Content manager, and many other tools.

The content delivery is provided by publishing to Edge. That can be Sitecore Edge (configured as default) but also other edge vendors. v Edge delivers content and design information headlessly through the GraphQL endpoint and can be consumed by any head technology such as Next.js, ASP.NET core, Angular, Vue or React.

Developers and System Administrators can manage the XM Cloud instances and deploy the custom CM (Content Management) customizations using the “build and deployment services” as well as the Deploy App that provides the functionalities via UI.

Crdit: Sitecore

Sitecore XM Cloud Projects, Environments and Sites

In order to provide your customers with rich and relevant experiences, Sitecore Experience Manager Cloud (XM Cloud) provides a unified platform for website development and updating the content from both developers and marketers point of view.

You can create, update, and share content using the out-of-the-box tools provided by Sitecore XM Cloud Portal. You can deliver the website faster because Front-end designers, creative designers, content authors, and developers can all work together and contribute.

You can access XM Cloud from the Sitecore Cloud Portal using your organization's credentials and should have proper access.

The Sitecore XM Cloud provides the Sitecore Headless SXA based Content Tree so that you can build and deploy multiple sites.

In Sitecore XM Cloud, to develop the website you have to follow some process and steps, and i will be explaining high-level details about How to create the Sitecore XM Cloud Site / Website below.

Relationship between GitHub and Sitecore XM Cloud Projects, Environments and Sites

Sitecore XM Cloud Organization:
In XM Cloud, Sitecore will create the Sitecore Cloud Portal Organization for your Client/Organization, and generally your organization admin have full access to Sitecore XM Cloud organization who manages the access for others.

Within each organization, you can create many projects/environments/sites.
Sitecore XM Cloud Project:
In XM Cloud, you can have multiple projects based on you XM Cloud subscription, and a project is a collection of environments.

Think of XM Cloud Project as a brand website or your organization's department, which has its own brand identity or branding and functionalities.

In the XM Cloud Deploy app, you can create a project using a starter template or using existing source code.

In XM Cloud, you can have both PUBLIC and PRIVATE GitHub repository.

To create a new project from existing code, you must have an administrator or owner role in an XM Cloud organization, and you must host your existing source code on a version control platform supported by the XM Cloud Deploy app and you should also have owner access on your source code repository.

When creating a new XM Cloud project, you can perform the initial deployment using your existing source code.

During GitHub integration you should provide access to all the code repositories so that during environment creation you can map specific repository's branch with your environment.

Note: In the above diagarm, if you will check then found, each GitHub repository attached with the Sitecore XM Cloud Projects.

It means, you can re-use GitHub Repository in any Sitecore XM Cloud projects and currently support for GitHub integration present. Once repository mapped with Sitecore XM Cloud Project then it can't be changed.

You can check more details at Manage a Sitecore XM Cloud Project.
Sitecore XM Cloud Environment:
In XM Cloud, you can have multiple non-prod and one prod environments based on subscription within Sitecore XM Cloud Project.

An environment represents a single Sitecore Content Management (CM) instance along with all the services and supporting tenants for hosting a Sitecore solution. Every environment belongs to a project.

Note: In the above diagarm, if you will check then found, each GitHub branch attached with the specific Sitecore XM Cloud Environment.

As explained above, an environment represents a single Sitecore Content Management (CM), it means, code from single branch would be deployed to specific environment and used by all sites within that environment. You can also link your environment to another GitHub branch once created.

If you will not select the code branch name, then your default code repo branch would be used, so it’s always best practice to select the code branch from your code repository.

Consider the case of different environments like DEV, QA, UAT and PROD, and each environment linked with specific branch from your code repository.

You can check more details at Manage a Sitecore XM Cloud Environment.
Sitecore XM Cloud Site:
In XM Cloud, you can have multiple sites (websites) within your Sitecore XM Cloud Environment.

An site represents a single Sitecore Headless SXA Site within Content Management (CM) instance which will be using the code base linked with the Sitecore XM Cloud Environment.

Note: In the above diagarm, if you will check then found, each environment is a collection of sites and using the same code base as per the specific Sitecore XM Cloud Environment.

You can create XM Cloud site in two ways, one using XM Cloud Site creation and other using Sitecore CMS Content Tree.

In the XM Cloud site creation option, new Headless SXA Site would be created within new Headless Tenant with same name as Headless SXA Site, so whenever you have to create the new Headless SXA Site within existing Headless SXA Tenant then always use the Sitecore Content Editor option for new Headless SXA Site creation.

You can check more details at Manage a Sitecore XM Cloud Site.
Sitecore XM Cloud Hosting Connection:
In XM Cloud Deploy app, you Connections page which allow you to view, create, and delete your source control connections and hosting provider connections.

The XM Cloud Hosting represent a location/web app (with PUBLIC url) where you can deploy your website/site and code base, and currently it’s Vercel (which currently supported from the XM Cloud).

Note: As explained in Sitecore XM Cloud Project section, you can have both PUBLIC and PRIVATE GitHub repository, and if you are not the OWNER of GitHub repository then you can't create connection between Sitecore XM Cloud and Vercel and will be getting error: Vercel doesn't have access to the GitHub account. Please check the Vercel installation

You can check more details at Manage connections for source control and hosting providers.

Please find below steps to create Sitecore Hosting Connection with Vercel with Private GitHub Repository (How do I integrate a GitHub repository with Vercel from Sitecore XM Cloud?):
- Your organization team member, who have the Admin access on XM Cloud and Admin or Owner access on the GitHub Repo, should open the Vercel.com and do the sign-up first
- Login with GitHub credentials who have Owner access on the GitHub repo
- Now, go to the Overview tab and click on the Create a New Project
- Sign-in using your GitHub account (which have Owner access) if not sign-in
- Once, you have sign-in, please provide access of all the repositories so that we can select specific repo from XM Cloud
  
  Error: If you have contributor access to GitHub Repo then you wouldn’t be able to see any repository in the Vercel website
  
  So to make connection between Vercel and GitHub, you should be Owner of GitHub repo.
- Once, connection of Vercel with GitHub completed at Vercel.com then again come back to your XM Cloud sites listing in XM Cloud Environment
- From specific site, select the Set up hosting
- Currently, you have created a connection at Vercel and for XM Cloud, now click on Create a new Vercel installation at XM Cloud if your Vercel installation not visible in the list
- After Signup to Vercel and Login using GitHub, click on Add Integration
- Select the Vercel account which you wanted to connect with XM Cloud
- Select the Vercel account which not Installed on XM Cloud and click on Continue
- You can go back to Connections and check the Hosting connection also
- Once Vercel integration installation done with required GitHub account then you can come back to Same screen of Hosting setup and select the Vercel integration (which have Owner access to GitHub code repository)
- Click on the Create and Link, it will create the Vercel endpoint for your site
- If you will browse this url, it will show below error
  
  Error: This Serverless Function has crashed.
  Your connection is working correctly.
  Vercel is working correctly.
  500: INTERNAL_SERVER_ERRORCode: FUNCTION_INVOCATION_FAILEDID: lhr1::cgktl- 1. If you are a visitor, contact the website owner or try again later.
  2. If you are the owner, learn how to fix the error and check the logs.
  
  This error will come, if you will not publish the website and try to access the Vercel hosting url https://----.vercel.app/
  
  Once you publish your site from Sitecore Content Editor or Sitecore Pages and after successfully publishing task, again you will try to access the hosting url https://----.vercel.app/
With the help of the above steps, you can successfully create and deploy your first website to Sitecore XM Cloud.

Conclusion

We have discovered a dynamic ecosystem that will revolutionise digital experience management by dissecting the many parts that make up the Sitecore XM Cloud. Each component plays a crucial part in determining the possibilities of this platform, enabling companies to design experiences that go above and beyond expectations.

It becomes clear that Sitecore XM Cloud is more than simply a platform when we consider the route through infrastructure, content management, customization, scalability, security, and integration. Organisations may reinvent their digital presence, engage users more deeply, and create meaningful interactions that promote loyalty and growth by utilising the potential of these building blocks.

These elements connections highlight how Sitecore XM Cloud is greater than the sum of its parts. Technology, creativity, and innovation are playing a beautiful symphony that allows organisations to advance their digital strategy to new heights. With Sitecore XM Cloud, you have the means to create engaging digital experiences that have a long-lasting effect on your audience.

As you begin your journey with Sitecore XM Cloud, keep in mind that these building blocks are dynamic tools that change to meet your company's needs rather than static entities. Continue to be inquisitive, investigate the options, and take advantage of the architecture's advantages. Your digital experiences will be able to transcend limitations and establish new benchmarks in the constantly changing world of digital engagement thanks to the strong foundation provided by Sitecore XM Cloud.

Credit/References:

Sitecore XM Cloud Architecture overview

Deploying XM Cloud

Open AI

Pingback:

Sitecore Headless SXA	sitecore jss nextjs	sitecore jamstack
The architecture of Sitecore Experience Edge for XM	sitecore toplogies	Elevating Your Sitecore Next.js App with Tailwind CSS: A Perfect Union of Design and Performance
Default topologies \| Sitecore Documentation	Solutions for your digital experiences	XM topology for on-premises
XM Cloud Recommended Practices - Sitecore	XM Cloud FAQ	If XM Cloud Is A Headless CMS, What Does That Mean?
What Problems Does XM Cloud solve?	What’s the difference between Experience Manager, Experience Platform, and XM Cloud?	Sitecore XM Cloud Limitations and restrictions
Limitations and restrictions of Experience Edge for XM	Sitecore Experience Manager (XM) Build Experiences That Connect	Sitecore Experience Edge GraphQL Queries
what is sitecore experience edge and what is Sitecore XM Cloud?	Sitecore XM Cloud: The Modern SaaS CMS	sitecore experience edge connector
What is the difference between Sitecore XM and XM cloud?	Which is better content hub one or XM cloud?	sitecore experience edge architecture
XM Cloud Introduction	sitecore XM Cloud Components in Action	Sitecore XM Cloud: Getting Started with Personalization and ...
Sitecore Experience Manager Cloud	Sitecore Experience Manager Cloud (XM Cloud)	Sitecore/XM-Cloud-Introduction: A XM Cloud repository containing
A Complete Guide to Upgrade to Sitecore XM Cloud	Sitecore XM Cloud. Sitecore Composable DXP	sitecore experience editor
sitecore xm cloud	sitecore xm cloud components	sitecore xm architectur
sitecore xm cloud architecture	sitecore xm documentation	sitecore xm cloud login
sitecore xm cloud vercel	sitecore xm cloud vs xp	sitecore xm cloud local setup
sitecore xm cloud sla	sitecore xm cloud demo	sitecore xm
sitecore xm cloud	sitecore xm cloud angular	sitecore xm cloud sitemap
sitecore xm cloud pages	sitecore xm cloud analytics	sitecore xm scaled topology
sitecore xm cloud api	sitecore xm cloud architecture diagram	sitecore xm cloud azure devops
sitecore xm cloud deploy app	sitecore xm cloud benefits	what is sitecore xm
sitecore xm cloud certification	sitecore xm cloud cli	sitecore xm cloud custom code
Csitecore managed cloud vs xm cloud	sitecore xm cloud deploy	sitecore xm cloud development
sitecore xm cloud download	sitecore xm cloud docker	sitecore xm cloud release datet
sitecore xm cloud developer	sitecore xm cloud edge	sitecore xm cloud environment variables
sitecore xm cloud forms	sitecore xm cloud features	sitecore xm cloud faq
sitecore xm cloud github	sitecore xm cloud graphql	sitecore xm cloud getting started
sitecore cloud hosting	sitecore xm architecture	sitecore xm cloud infrastructure
sitecore xm cloud jss	sitecore xm cloud starter kit	sitecore next.js sxa
sitecore jss sxa	sitecore next.js	next.js sitecore
sitecore xm cloud logo	Guide To Fixing Setup Errors: Sitecore Headless SXA, Next.js, XM Cloud Dev \| Fishtank Consulting (getfishtank.com)	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
How to use a API proxy in Sitecore JSS NextJS Application	How to use a proxy in Next.js	Next.JS — How To Proxy To Backend Server
How To Protect Your API Key In Production With Next.js API Route	Next.JS — How To Proxy To Backend Server	Building a Reverse Proxy Server with Node.js
How to GET request data using proxy for API in NextJS	Next Js does not proxying API requests	Setting up proxy in Next.js for DEV environment
Proxy api requests w/o a custom server	Next.js: The Easiest Way to Create an API Proxy	The Easiest Way to Create an API Proxy in NextJS
API proxies Next.js	Next.js API proxy benefits	Secure API communication Next.js
CORS handling Next.js	Server-side authorization Next.js	API rate limiting Next.js
Response manipulation Next.js	Next.js microservices integration	Backend integration Next.js
API proxy security Next.js	api next.js	next.js proxy api
proxy api calls	js proxy api	api proxies meaning
proxy api next js	next js api example	next js context api example
next js auth example	next js authentication example	sitecore jss
next api proxy	next js api proxy	nextjs api proxy
nextjs proxy api requests	sitecore github	sitecore nextjs getting started
nextjs http proxy	sitecore nextjs graphql	sitecore jss getstaticprops
difference between proxy and api	what is a proxy in api	api proxy example
sitecore jss tutorial	sitecore jss api	what is proxy in rest api
sitecore jss routing	sitecore jss topology	next js api as proxy
sitecore jss example	sapi proxy vs gateway	sitecore jss architecture
next.js api proxy	next js proxy api requests	next js proxy api route
next js api best practices	npm sitecore jss	sitecore jss license
next js proxy api call	sitecore jss nextjs	sitecore-jss
next api example	why sitecore jss	sitecore jss proxy
sitecore jss site	sitecore jss nextjs page	sitecore nextjs
sitecore jss getting started	sitecore next.js	sitecore jss docs
jss sitecore github	sitecore jss headless	sitecore jss placeholder
jss next js	sitecore jss sxa	jss setup sitecore
sitecore jss node version	sitecore nextjs page	Walkthrough: Connecting a Next.js JSS app to Sitecore editors
next js sitecore	gitignore next js	pages next js
Architecture and APIs for integrating JSS Next.js apps	sitecore-jss-nextjs github	sitecore javascript rendering
next.js 404 page	next.js custom 404 page	next.js 404
Next.js API routes	Sitecore Headless SXA	Sitecore Headless NextJS SXA
Component-level data fetching in Sitecore JSS with Next.js	Sitecore NextJS Component Refactoring and Reusability	How to setup Secure Sitecore JSS Site
Getting Started Sitecore JSS with NextJS	How to setup JavaScript Services (JSS) for Sitecore 9	Deploying a Sitecore JSS-Next.js App with SSG & ISR to Vercel
Walkthrough: Creating a JSS Next.js application with the JSS	Sitecore JavaScript Rendering SDK (JSS) for Next.js	Sitecore JSS for Next.js differences from JSS for React
sitecore edge

Streamlining Sitecore XM Development: Exploring Sitecore XM0 Topology Container Images

2023-08-17T01:59:00.001+05:30

Efficiency and flexibility are essential in the rapidly evolving field of web development. The Sitecore CMS is true headless CMS and provides many products offerings to build the Headless applications. Without content, an experience cannot exist. A strong and user-friendly content management system (CMS) called Sitecore Experience Manager (XM) makes it simple to create and manage experiences across channels and devices.

To use Sitecore XM, Sitecore XM Scaled (XM1) Topology based installation required for the PROD environments, and for development phase, team generally uses Sitecore XP Single Developer (XP0) topology which is not providing the near replica of PROD installation.

You can check following diagrams to get more details about different Sitecore Topologies:

With the help of the above Sitecore topologies, you can easily identify the difference of services/roles between Sitecore XP0, XM1 and XM0 topologies.

Note: The Sitecore XP based installation provides the analytics and marketing features whereas Sitecore XM based installation does not.

When you don't intend to employ the analytics and marketing elements of the Sitecore Experience Platform then you can use the Sitecore XM environment (i.e., in CMS-only mode).

If your project does not have the requirement for analytics and digital marketing capabilities, then you can start with Sitecore Experience Manager (XM) and later when needs arise then the customer benefits from Sitecore's integrated, composable solutions. From content to commerce, Sitecore enables unforgettable experiences at every stage of the customer journey.

In this case for a local development environment if you are using Sitecore XP0 then you would be not near to your PROD environment Sitecore XM1, and if you are using Sitecore XM1 for your local development then it's required more hardware/infrastructure resources which not possible (time and cost involves).

Currently, there is no readymade Sitecore Container setup available for Sitecore XM0 topology to start with Sitecore XM based development.

In this blog post, we'll delve into the world of containerization and explore how quickly we can build Sitecore XM0 Topology Container Images to start with quick development process.

Getting Started: Setting Up Sitecore XM0 Topology Container Images:

Create the development environment with the Sitecore Containers template for Next.js by executing the command (I assume that all prerequisites are present on your system)
```
dotnet new sitecore.nextjs.gettingstarted -n ContosoProject 
```
Above command will create the Sitecore Next.js application with provision to run Sitecore instance XP0/XM1/XP1 topologies
To create the Sitecore setup for XM0 topology. create the copy of sitecore-xm1 folder and rename as sitecore-xm0
Open the ContosoProject\run\sitecore-xm0\docker-compose.yml file and add scale: 0 for cd and redis services:
Now comment out the dependency services on CD service in ContosoProject\run\sitecore-xm0\docker-compose.yml
After above changes, change role of CM service to standalone mode using environment variable Sitecore_AppSettings_role:define:
Update the init.ps1 (ContosoProject\init.ps1) to include the XM0 topology

The complete code base with Sitecore Next.JS and Sitecore XM0 topology present at

Sitecore XM1 vs Sitecore XM0 Topology

Please find below some useful information about differences between Sitecore XM1 and Sitecore XM0 topology

Conclusion

With the help of Sitecore XM0 Topology Container Images you can quickly setup the system for Sitecore XM development, this setup provides an optimization for the local development machine setup time and enhance collaboration. By embracing containerization, developers can streamline setup, increase consistency, and achieve a more efficient and reliable development process. Whether you're a Sitecore veteran or just starting out, exploring Sitecore XM0 Topology Container Images can pave the way for a future of faster, more agile, and seamless Sitecore XM development.

Note: If you are planning to migrate to Sitecore XM Cloud or starting a new project on Sitecore XM Cloud, in this case you can setup a Sitecore Headless SXA Multisite Next.js app by taking reference of Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container and use Sitecore XM0 topology to develop the application on local systems or provision XM scaled environment in your infrastructure. Once you are ready for QA or UAT then you can move your Content/Code into Sitecore XM Cloud.

The Sitecore 10 onwards by default Edge GraphQL end-points are enabled with similar Edge GQL schema available at Sitecore Experience Edge for XM, content in Sitecore XM Cloud delivered via Sitecore Experience Edge. In this case, code developed in the Sitecore XM (local environment) will work in Sitecore XM Cloud environment.

With this you can save the infrastructure cost during the development phase.

Always good to go through the Sitecore XM Cloud FAQs to get more details about the platform in your requirement analysis phase.

Credit/References:

Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js | Sitecore Documentation

Troubleshooting Docker | Sitecore Documentation

Open AI

Pingback:

Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container	sitecore jss nextjs	sitecore jamstack
Default topologies \| Sitecore Documentation	Solutions for your digital experiences	XM topology for on-premises
Installation Guide for the XM Scaled Topology	Container tips and improvements for Sitecore Developers	What is Sitecore Experience Manager?
Sitecore configurations and topology for Azure	Using CMS-only mode to run Sitecore without the xDBThe xDB and tracker configuration settings	Sitecore Experience Platform - Content Management System
Quickstart guide - All about Sitecore Experience Edge	Sitecore Experience Manager (XM) Build Experiences That Connect	Sitecore Experience Edge GraphQL Queries
sitecore graphql query examples	sitecore experience edge limitations	sitecore experience edge connector
sitecore experience edge preview	sitecore graphql playground	sitecore experience edge architecture
sitecore jss graphql	sitecore graphql custom schema	What is Sitecore experience manager?
What is the difference between Sitecore experience manager and experience platform?	What is Sitecore experience platform?	How much does Sitecore XP license cost?
sitecore xm vs xp	sitecore xm features	sitecore experience editor
sitecore xm cloud	sitecore xm personalization	sitecore xm architectur
sitecore architecture	sitecore xm documentation	sitecore xm scaled topology
what is sitecore xm	sitecore 10 topology	sitecore xm architecture
sitecore topologies and tiers	sitecore 10.2 topology	sitecore xm
sitecore xm cloud	sitecore xm vs xp	sitecore xm features
sitecore xp0 vs xp1	sitecore xp0 topolog	sitecore xm scaled topology
sitecore 10 topology	sitecore xp0 vs xp1	sitecore 10.2 topology
sitecore topologies and tiers	sitecore xp0 topology	sitecore xm
Sitecore XM0 development	Sitecore XM containerization	Sitecore XM0 topology
Container images for Sitecore XM	Sitecore XM0 environment setup	Streamlining Sitecore development
Docker for Sitecore XM	Sitecore XM0 deployment	Efficient Sitecore development
Sitecore containerization benefits	Docker images for Sitecore XM	Sitecore development best practices
Sitecore XM environment consistency	Sitecore XM0 development workflow	Accelerating Sitecore XM development
Sitecore XM0 deployment process	Benefits of containerization for Sitecore	Sitecore development using Docker
Elevating Your Sitecore Next.js App with Tailwind CSS: A Perfect Union of Design and Performance	create-next-app typescript tailwind	integrate tailwind with react
add tailwind to next js	sitecore jss next.js	sitecore next.js sxa
sitecore jss sxa	sitecore next.js	next.js sitecore
sitecore nextjs sample website	Guide To Fixing Setup Errors: Sitecore Headless SXA, Next.js, XM Cloud Dev \| Fishtank Consulting (getfishtank.com)	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
How to use a API proxy in Sitecore JSS NextJS Application	How to use a proxy in Next.js	Next.JS — How To Proxy To Backend Server
How To Protect Your API Key In Production With Next.js API Route	Next.JS — How To Proxy To Backend Server	Building a Reverse Proxy Server with Node.js
How to GET request data using proxy for API in NextJS	Next Js does not proxying API requests	Setting up proxy in Next.js for DEV environment
Proxy api requests w/o a custom server	Next.js: The Easiest Way to Create an API Proxy	The Easiest Way to Create an API Proxy in NextJS
API proxies Next.js	Next.js API proxy benefits	Secure API communication Next.js
CORS handling Next.js	Server-side authorization Next.js	API rate limiting Next.js
Response manipulation Next.js	Next.js microservices integration	Backend integration Next.js
API proxy security Next.js	api next.js	next.js proxy api
proxy api calls	js proxy api	api proxies meaning
proxy api next js	next js api example	next js context api example
next js auth example	next js authentication example	sitecore jss
next api proxy	next js api proxy	nextjs api proxy
nextjs proxy api requests	sitecore github	sitecore nextjs getting started
nextjs http proxy	sitecore nextjs graphql	sitecore jss getstaticprops
difference between proxy and api	what is a proxy in api	api proxy example
sitecore jss tutorial	sitecore jss api	what is proxy in rest api
sitecore jss routing	sitecore jss topology	next js api as proxy
sitecore jss example	sapi proxy vs gateway	sitecore jss architecture
next.js api proxy	next js proxy api requests	next js proxy api route
next js api best practices	npm sitecore jss	sitecore jss license
next js proxy api call	sitecore jss nextjs	sitecore-jss
next api example	why sitecore jss	sitecore jss proxy
sitecore jss site	sitecore jss nextjs page	sitecore nextjs
sitecore jss getting started	sitecore next.js	sitecore jss docs
jss sitecore github	sitecore jss headless	sitecore jss placeholder
jss next js	sitecore jss sxa	jss setup sitecore
sitecore jss node version	sitecore nextjs page	Walkthrough: Connecting a Next.js JSS app to Sitecore editors
next js sitecore	gitignore next js	pages next js
Architecture and APIs for integrating JSS Next.js apps	sitecore-jss-nextjs github	sitecore javascript rendering
next.js 404 page	next.js custom 404 page	next.js 404
Next.js API routes	Sitecore Headless SXA	Sitecore Headless NextJS SXA
Component-level data fetching in Sitecore JSS with Next.js	Sitecore NextJS Component Refactoring and Reusability	How to setup Secure Sitecore JSS Site
Getting Started Sitecore JSS with NextJS	How to setup JavaScript Services (JSS) for Sitecore 9	Deploying a Sitecore JSS-Next.js App with SSG & ISR to Vercel
Walkthrough: Creating a JSS Next.js application with the JSS	Sitecore JavaScript Rendering SDK (JSS) for Next.js	Sitecore JSS for Next.js differences from JSS for React
sitecore edge

Elevating Your Sitecore Next.js App with Tailwind CSS: A Perfect Union of Design and Performance

2023-08-09T20:01:00.000+05:30

In this article we will uncover the step-by-step process of integrating Tailwind CSS into your Sitecore Next.js application, and witness how this dynamic duo empowers developers to craft stunning user interfaces without compromising on loading speeds.

Learn from real-world examples, best practices, and unleash the true potential of your web development endeavors. Join us on this journey where design meets efficiency, and aesthetics merge with functionality.

Introduction

In the world of web development, finding the perfect balance between design flexibility and performance optimization is a perpetual challenge. Enter the dynamic pairing of Tailwind CSS and Sitecore Next.js – a match made in developer heaven. In this guide, we'll walk you through the process of integrating Tailwind CSS into your Sitecore Next.js application, showcasing how this combination can revolutionize your web development workflow.

Why Tailwind CSS and Sitecore Next.js?

Tailwind CSS is a utility-first CSS framework that offers a rapid and structured approach to designing user interfaces. On the other hand, Sitecore Next.js SDK is a powerful offering from true Headless CMS Sitecore to build the future ready Jamstack application using Next.js modern client-side scripting framework. By combining these two technologies, you're set to experience the best of both worlds: Tailwind's design prowess and Next.js's performance benefits.

Instead of just giving you styling systems or component libraries with pre-defined styles like prebuild component designs the JavaScript based CSS solutions do, Tailwind CSS gives you access to a variety of useful, neutral CSS classes. Your components can use these classes to create your user experience, and you have the option to build on them using configuration files.

The Operation of Utility Classes and Tailwind CSS

A utility-first approach to styling is used in Tailwind CSS. It offers a huge selection of tiny, specialised utility classes that you can immediately apply to your HTML components.

By combining these classes, it is simple to create sophisticated UI components because each utility class represents a particular CSS value or set of properties.

For instance, to change the colour of a button without having to define a custom CSS class, you can just use the text-red-400 utility class.

Tailwind CSS's utility classes are created with extreme flexibility and customizability in mind. By utilizing the logical naming conventions offered by Tailwind, you can quickly change parameters such as margin, padding, font size, colors and more.

Step-by-Step Integration

Setting Up the Project:

Begin by creating a new Sitecore Next.js project or using an existing one. Install the necessary dependencies, including Tailwind CSS and any other required packages.

You can follow the steps mentioned at Set Up the Sitecore Container in Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container article.

After all the setup/configuration steps, start the front-end application in connected mode with the command: jss start:connected to validate that Next.js app working fine or not.
Configuring Tailwind CSS:
Dive into Tailwind's configuration to customize the design system according to your project's needs. Modify color schemes, typography settings, and more to align with your brand identity.

To build tailwind.config.js and postcss.config.js, run the init command after installing tailwindcss and adding its peer dependencies via npm.
```
npm install -D tailwindcss postcss autoprefixer 

npx tailwindcss init -p 
```

Set up the template routes:

The default tailwind.config.js file is:

/** @type {import('tailwindcss').Config} */ 

module.exports = { 

  content: [], 

  theme: { 

    extend: {}, 

  }, 

  plugins: [], 

}

Now, place the locations to the files that will utilize Tailwind CSS class names within tailwind.config.js

/** @type {import('tailwindcss').Config} */ 

module.exports = { 

  content: [ 

    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory. 

    './pages/**/*.{js,ts,jsx,tsx,mdx}', 

    './components/**/*.{js,ts,jsx,tsx,mdx}', 

  

    // Or if using `src` directory: 

    './src/**/*.{js,ts,jsx,tsx,mdx}', 

  ], 

  theme: { 

    extend: {}, 

  }, 

  plugins: [], 

}

You do not need to modify postcss.config.js.

Integrate Tailwind styles into your Sitecore Next.js app:
In your application, include the Tailwind CSS directives into your application’s Global Stylesheet which generally present at app/globals.css or src\assets\globals.css and Tailwind will utilize this file to inject its created styles.

If Global stylesheet file does not present then create at src\assets\globals.css and include following Tailwind CSS directives:
```
@tailwind base; 

@tailwind components; 

@tailwind utilities; 
```
Our application will load without styles if we verify it right now.

Load Global Stylesheet into your Sitecore Next.js app:

In the previous step you have created the css file but not included in your application so that it will be available to all routes. For this go to your src\pages\_app.tsx file and import css file updated in previous step

import type { AppProps } from 'next/app'; 

import { I18nProvider } from 'next-localization'; 

import { SitecorePageProps } from 'lib/page-props'; 

  

import 'assets/main.scss'; 

import 'assets/globals.css'; 

  

function App({ Component, pageProps }: AppProps<SitecorePageProps>): JSX.Element { 

  const { dictionary, ...rest } = pageProps; 

  

  return ( 

    // Use the next-localization (w/ rosetta) library to provide our translation dictionary to the app. 

    // Note Next.js does not (currently) provide anything for translation, only i18n routing. 

    // If your app is not multilingual, next-localization and references to it can be removed. 

    <I18nProvider lngDict={dictionary} locale={pageProps.locale}> 

      <Component {...rest} /> 

    </I18nProvider> 

  ); 

} 

  

export default App;

You can utilise Tailwind's utility classes in your application after installing Tailwind CSS and setting the global styles. For this test following HTML into your existing component:

<h1 className="text-3xl font-bold underline">Hello, <span class="text-red-400">Sitecore Next.js</span> and <span class="text-sky-500 dark:text-sky-400">Tailwind CSS</span>  !</h1>

And the output would be:

Creating Component with Tailwind:

Learn how to harness Tailwind's utility classes to swiftly build UI components. From buttons to grids, discover how easy it is to style your application using concise class names.

Lets create the responsive Global Navbar in Next.js with tailwindcss

The JSON response from Sitecore CMS for Navigation bar component is

{ 

    "data": { 

      "item": { 

        "rendered": { 

          "sitecore": { 

            "context": { 

              "pageEditing": false, 

              "site": { 

                "name": "MyProject" 

              }, 

              "pageState": "normal", 

              "language": "en", 

              "itemPath": "/" 

            }, 

            "route": { 

              "name": "Home", 

              "displayName": "Home", 

              "fields": { 

                "Title": { 

                  "value": "MyProject Site - Home" 

                }, 

                "Content": { 

                  "value": "" 

                }, 

                "NavigationTitle": { 

                  "value": "Home" 

                }, 

                "Page Design": { 

                  "id": "90e9ca30-b7e9-43d4-a826-98377b0e1ff2", 

                  "url": "/Presentation/Page-Designs/Home", 

                  "name": "Home", 

                  "displayName": "Home Page Design", 

                  "fields": { 

                    "PartialDesigns": { 

                      "value": "{xxxx}|{xx}" 

                    } 

                  } 

                } 

              }, 

              "databaseName": "web", 

              "deviceId": "xxxxx", 

              "itemId": "xxxxx", 

              "itemLanguage": "en", 

              "itemVersion": 1, 

              "layoutId": "xxxx", 

              "templateId": "xxx", 

              "templateName": "Page", 

              "placeholders": { 

                "headless-header": [ 

                  { 

                    "uid": "5xx", 

                    "componentName": "PartialDesignDynamicPlaceholder", 

                    "dataSource": "", 

                    "params": { 

                      "sid": "{bf277516-0232-44d6-88ca-ebcc4e2d3cb0}", 

                      "ph": "headless-header", 

                      "sig": "sxa-homepage" 

                    }, 

                    "placeholders": { 

                      "sxa-homepage": [ 

                        { 

                            "uid": "8380d3f5-c272-4f7f-b204-01033f6cb9a7", 

                            "componentName": "NavigationList", 

                            "dataSource": "{xxxxxx}", 

                            "fields": { 

                              "NavList": [ 

                                { 

                                  "id": "xxxx", 

                                  "url": "/Data/Navigations/NavigationLists/Mainsite/aboutus", 

                                  "name": "aboutus", 

                                  "displayName": "About Us", 

                                  "fields": { 

                                    "LinkText": { 

                                      "value": "About Us" 

                                    }, 

                                    "Link": { 

                                      "value": { 

                                        "href": "/aboutus", 

                                        "text": "About Us", 

                                        "linktype": "external", 

                                        "url": "/aboutus", 

                                        "anchor": "", 

                                        "target": "" 

                                      } 

                                    } 

                                  } 

                                }, 

                                { 

                                    "id": "xxxx", 

                                    "url": "/Data/Navigations/NavigationLists/Mainsite/products", 

                                    "name": "products", 

                                    "displayName": "Products", 

                                    "fields": { 

                                      "LinkText": { 

                                        "value": "Products" 

                                      }, 

                                      "Link": { 

                                        "value": { 

                                          "href": "/products", 

                                          "text": "Products", 

                                          "linktype": "external", 

                                          "url": "/products", 

                                          "anchor": "", 

                                          "target": "" 

                                        } 

                                      } 

                                    } 

                                  }, 

                                  { 

                                    "id": "xxxx", 

                                    "url": "/Data/Navigations/NavigationLists/Mainsite/privacypolicy", 

                                    "name": "privacypolicy", 

                                    "displayName": "Privacy Policy", 

                                    "fields": { 

                                      "LinkText": { 

                                        "value": "Privacy Policy" 

                                      }, 

                                      "Link": { 

                                        "value": { 

                                          "href": "/privacypolicy", 

                                          "text": "Privacy Policy", 

                                          "linktype": "external", 

                                          "url": "/privacypolicy", 

                                          "anchor": "", 

                                          "target": "" 

                                        } 

                                      } 

                                    } 

                                  }, 

                                  { 

                                    "id": "xxxx", 

                                    "url": "/Data/Navigations/NavigationLists/Mainsite/contactus", 

                                    "name": "contactus", 

                                    "displayName": "Contact Us", 

                                    "fields": { 

                                      "LinkText": { 

                                        "value": "Contact Us" 

                                      }, 

                                      "Link": { 

                                        "value": { 

                                          "href": "/contactus", 

                                          "text": "Contact Us", 

                                          "linktype": "external", 

                                          "url": "/contactus", 

                                          "anchor": "", 

                                          "target": "" 

                                        } 

                                      } 

                                    } 

                                  }                                                                       

                              ] 

                            } 

                          } 

                      ] 

                    } 

                  } 

                ], 

                "headless-main": [], 

                "headless-footer": [] 

              } 

            } 

          } 

        } 

      } 

    } 

  }

Here the values of SITECORE_MODULE_REGISTRY and SPE_VERSION defined in the environment (.env) file as

Now, go to the src\components\Navigation\ and create the file NavBar.tsx and below code:

import Link from 'next/link'; 

import { useState } from 'react'; 

import { Field } from '@sitecore-jss/sitecore-jss-nextjs'; 

  

export type NavItemFields = { 

  LinkText: { 

    value: string; 

  };   

  Link: { 

    value: { 

      href: string; 

      text: string; 

      linktype: string; 

      url: string; 

      anchor: string; 

      target: string; 

    };  

  };  

}; 

  

type NavList = { 

  name: Field<string>; 

  displayName: Field<string>; 

  fields:NavItemFields ; 

}; 

  

type NavigationList = { 

  NavigationBarList: NavList[]; 

}; 

  

function NavBar(props: NavigationList) { 

  const [navbar, setNavbar] = useState(false); 

  const navListItems = 

  props.NavigationBarList && 

  props.NavigationBarList.map((navItem, index) => ( 

    <li key={index}  className="pb-6 text-xl text-white py-2 md:px-6 text-center border-b-2 md:border-b-0  hover:bg-purple-900  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent"> 

      <Link href={navItem.fields.Link.value.href} onClick={() => setNavbar(!navbar)}> 

        {navItem.fields.Link.value.text} 

      </Link> 

    </li>               

  )); 

  

  return ( 

  

    <div> 

      <nav className="w-full bg-black fixed top-0 left-0 right-0 z-10"> 

        <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8"> 

          <div> 

            <div className="flex items-center justify-between py-3 md:py-5 md:block"> 

              {/* LOGO */} 

              <Link href="/"> 

                <h2 className="text-2xl text-cyan-600 font-bold ">LOGO</h2> 

              </Link> 

              {/* HAMBURGER BUTTON FOR MOBILE */} 

              <div className="md:hidden"> 

                <button 

                  className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border" 

                  onClick={() => setNavbar(!navbar)} 

                > 

{navbar ? ( 

                    <svg 

                      xmlns="http://www.w3.org/2000/svg" 

                      className="w-6 h-6 text-white" 

                      viewBox="0 0 20 20" 

                      fill="currentColor" 

                    > 

                      <path 

                        fillRule="evenodd" 

                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" 

                        clipRule="evenodd" 

                      /> 

                    </svg> 

                  ) : ( 

                    <svg 

                      xmlns="http://www.w3.org/2000/svg" 

                      className="w-6 h-6 text-white" 

                      fill="none" 

                      viewBox="0 0 24 24" 

                      stroke="currentColor" 

                      strokeWidth={2} 

                    > 

                      <path 

                        strokeLinecap="round" 

                        strokeLinejoin="round" 

                        d="M4 6h16M4 12h16M4 18h16" 

                      /> 

                    </svg> 

                  )} 

                </button> 

              </div> 

            </div> 

          </div> 

          <div> 

            <div 

              className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${ 

                navbar ? 'p-12 md:p-0 block' : 'hidden' 

              }`} 

            > 

              <ul className="h-screen md:h-auto items-center justify-center md:flex "> 

                {navListItems} 

              </ul> 

            </div> 

          </div> 

        </div> 

      </nav> 

    </div> 

  ); 

} 

  

export default NavBar;

In the above code, we are receiving the properties from main component and using loop to render the list of the Link items.

Go the parent component called NavigationList (src\components\Navigation\NavigationList\NavigationList.tsx) which received the JSON data from Sitecore CMS and import the NavBar component like this:

import Link from 'next/link'; 

import { useState } from 'react'; 

import { Field } from '@sitecore-jss/sitecore-jss-nextjs'; 

  

export type NavItemFields = { 

  LinkText: { 

    value: string; 

  };   

  Link: { 

    value: { 

      href: string; 

      text: string; 

      linktype: string; 

      url: string; 

      anchor: string; 

      target: string; 

    };  

  };  

}; 

  

type NavList = { 

  name: Field<string>; 

  displayName: Field<string>; 

  fields:NavItemFields ; 

}; 

  

type NavigationList = { 

  NavigationList: NavList[]; 

}; 

  

function NavBar(props: NavigationList) { 

  const [navbar, setNavbar] = useState(false); 

  const navListItems = 

  props.NavigationList && 

  props.NavigationList.map((navItem, index) => ( 

    <li key={index}  className="pb-6 text-xl text-white py-2 md:px-6 text-center border-b-2 md:border-b-0  hover:bg-purple-900  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent"> 

      <Link href={navItem.fields.Link.value.href} onClick={() => setNavbar(!navbar)}> 

        {navItem.fields.Link.value.text} 

      </Link> 

    </li>               

  )); 

  

  return ( 

  

    <div> 

      <nav className="w-full bg-black fixed top-0 left-0 right-0 z-10"> 

        <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8"> 

          <div> 

            <div className="flex items-center justify-between py-3 md:py-5 md:block"> 

              {/* LOGO */} 

              <Link href="/"> 

                <h2 className="text-2xl text-cyan-600 font-bold ">LOGO</h2> 

              </Link> 

              {/* HAMBURGER BUTTON FOR MOBILE */} 

              <div className="md:hidden"> 

                <button 

                  className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border" 

                  onClick={() => setNavbar(!navbar)} 

                > 

{navbar ? ( 

                    <svg 

                      xmlns="http://www.w3.org/2000/svg" 

                      className="w-6 h-6 text-white" 

                      viewBox="0 0 20 20" 

                      fill="currentColor" 

                    > 

                      <path 

                        fillRule="evenodd" 

                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" 

                        clipRule="evenodd" 

                      /> 

                    </svg> 

                  ) : ( 

                    <svg 

                      xmlns="http://www.w3.org/2000/svg" 

                      className="w-6 h-6 text-white" 

                      fill="none" 

                      viewBox="0 0 24 24" 

                      stroke="currentColor" 

                      strokeWidth={2} 

                    > 

                      <path 

                        strokeLinecap="round" 

                        strokeLinejoin="round" 

                        d="M4 6h16M4 12h16M4 18h16" 

                      /> 

                    </svg> 

                  )} 

                </button> 

              </div> 

            </div> 

          </div> 

          <div> 

            <div 

              className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${ 

                navbar ? 'p-12 md:p-0 block' : 'hidden' 

              }`} 

            > 

              <ul className="h-screen md:h-auto items-center justify-center md:flex "> 

                {navListItems} 

              </ul> 

            </div> 

          </div> 

        </div> 

      </nav> 

    </div> 

  ); 

} 

  

export default NavBar;

In the above code, we are receiving the properties from main component and using loop to render the list of the Link items.

The above component will render the responsive Navigation bar into the Sitecore Next.Js page:

Optimizing for Production:

Explore techniques to optimize the production build of your Sitecore Next.js app. Minify and purge unused CSS classes to ensure a streamlined and efficient final output.
Responsive Design with Ease:
Embrace Tailwind's responsive design capabilities by crafting layouts that adapt seamlessly across various screen sizes. Say goodbye to complex media queries and embrace intuitive responsive classes.

You can learn more at:
Animations and Transitions:
You can elevate user experience by adding subtle animations and transitions using Tailwind CSS. Discover how to animate elements on hover or during page transitions without compromising on performance.

For example, if you add below HTML into your component
```
      <h3 class="animate-ping m-auto bg-blue text-center text-red-400"> 

              Article From Amit Kumar 

      </h3> 
```
And effect would be like this:

You can see that how easy to implement animations in your website.

You can learn more at:
- How to animate a button on click with TailwindCSS in Next.js or React.js
- Animations And Transitions With Tailwind CSS
Theming and Dark Mode:

You can uncover the potential of theming and dark mode implementation with Tailwind CSS. Allow users to switch between light and dark themes effortlessly, enhancing accessibility and user preference.

Performance Benefits

By using Tailwind CSS with Sitecore Next.js you can enhance your application's performance. Thanks to optimized production builds and efficient CSS handling, your users will enjoy faster loading times and smoother interactions.

Conclusion

The integration of Tailwind CSS into your Sitecore Next.js application opens up a realm of possibilities for designing and building exceptional web interfaces. By leveraging Tailwind's utility classes and Sitecore Next.js's performance advantages, you can create visually stunning, lightning-fast web applications that truly stand out in today's competitive digital landscape. So, why wait? Start your journey to a more efficient and stylish web development workflow today!

Credit/References:

Next.js Tailwind CSS Navbar	Using Tailwind with Next.js by sergiodxa	Styling: Tailwind CSS \| Next.js (nextjs.org)
How to animate a button on click with TailwindCSS in Next.js or React.js	Animations And Transitions With Tailwind CSS	How to Set Up Tailwind CSS with NextJS

Pingback:

Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container	sitecore jss nextjs	sitecore jamstack
tailwind css next.js	next js tailwind css template	next js tailwind not working
next js tailwind tutorial	next js tailwind example	next.js tailwind css
tailwind css install next js	tailwind next.js	use tailwind with next js
next js tailwind typescript	next js tailwind styled components	next js tailwind css not working
install tailwind css with next.js	install tailwindcss nextjs	add tailwind css to next js
install tailwind nextjs	create-next-app typescript tailwind	integrate tailwind with react
add tailwind to next js	sitecore jss next.js	sitecore next.js sxa
sitecore jss sxa	sitecore next.js	next.js sitecore
sitecore nextjs sample website	Guide To Fixing Setup Errors: Sitecore Headless SXA, Next.js, XM Cloud Dev \| Fishtank Consulting (getfishtank.com)	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
How to use a API proxy in Sitecore JSS NextJS Application	How to use a proxy in Next.js	Next.JS — How To Proxy To Backend Server
How To Protect Your API Key In Production With Next.js API Route	Next.JS — How To Proxy To Backend Server	Building a Reverse Proxy Server with Node.js
How to GET request data using proxy for API in NextJS	Next Js does not proxying API requests	Setting up proxy in Next.js for DEV environment
Proxy api requests w/o a custom server	Next.js: The Easiest Way to Create an API Proxy	The Easiest Way to Create an API Proxy in NextJS
API proxies Next.js	Next.js API proxy benefits	Secure API communication Next.js
CORS handling Next.js	Server-side authorization Next.js	API rate limiting Next.js
Response manipulation Next.js	Next.js microservices integration	Backend integration Next.js
API proxy security Next.js	api next.js	next.js proxy api
proxy api calls	js proxy api	api proxies meaning
proxy api next js	next js api example	next js context api example
next js auth example	next js authentication example	sitecore jss
next api proxy	next js api proxy	nextjs api proxy
nextjs proxy api requests	sitecore github	sitecore nextjs getting started
nextjs http proxy	sitecore nextjs graphql	sitecore jss getstaticprops
difference between proxy and api	what is a proxy in api	api proxy example
sitecore jss tutorial	sitecore jss api	what is proxy in rest api
sitecore jss routing	sitecore jss topology	next js api as proxy
sitecore jss example	sapi proxy vs gateway	sitecore jss architecture
next.js api proxy	next js proxy api requests	next js proxy api route
next js api best practices	npm sitecore jss	sitecore jss license
next js proxy api call	sitecore jss nextjs	sitecore-jss
next api example	why sitecore jss	sitecore jss proxy
sitecore jss site	sitecore jss nextjs page	sitecore nextjs
sitecore jss getting started	sitecore next.js	sitecore jss docs
jss sitecore github	sitecore jss headless	sitecore jss placeholder
jss next js	sitecore jss sxa	jss setup sitecore
sitecore jss node version	sitecore nextjs page	Walkthrough: Connecting a Next.js JSS app to Sitecore editors
next js sitecore	gitignore next js	pages next js
Architecture and APIs for integrating JSS Next.js apps	sitecore-jss-nextjs github	sitecore javascript rendering
next.js 404 page	next.js custom 404 page	next.js 404
Next.js API routes	Sitecore Headless SXA	Sitecore Headless NextJS SXA
Component-level data fetching in Sitecore JSS with Next.js	Sitecore NextJS Component Refactoring and Reusability	How to setup Secure Sitecore JSS Site
Getting Started Sitecore JSS with NextJS	How to setup JavaScript Services (JSS) for Sitecore 9	Deploying a Sitecore JSS-Next.js App with SSG & ISR to Vercel
Walkthrough: Creating a JSS Next.js application with the JSS	Sitecore JavaScript Rendering SDK (JSS) for Next.js	Sitecore JSS for Next.js differences from JSS for React
sitecore edge

Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container

2023-08-04T23:43:00.000+05:30

Leading digital experience platform Sitecore offers strong capabilities for developing reliable websites and applications. The headless CMS and Jamstack architecture trends have been very popular in recent years. Sitecore provides Headless SXA (Sitecore Experience Accelerator) as a solution to decouple the front-end presentation layer from the content management capabilities since it recognizes the value of headless capabilities.

In this article, we will guide you through the process of configuring a Sitecore Next.js multisite app and integrating it with Headless SXA in a Sitecore container. This setup allows you to leverage the benefits of Next.js, a popular React framework for server-side rendering, and the flexibility of Headless SXA for managing and delivering content.

Step 1: Set Up the Sitecore Container
Step 2: Add support for Sitecore SXA in Sitecore Headless Container setup
Step 3: Add support for Sitecore Next.js multisite add-on
Step 4: Setup security for your Sitecore Layout Service
Step 5: Set up the editing host for Sitecore Headless SXA Multisite
Step 6: Set the Application Name in the Sitecore Headless SXA Multisite setup
Step 7: Set values of the Sitecore Headless SXA Site Grouping and Site Definition Item
Step 8: Sitecore JSS Headless SXA Next.js App Setup
Step 9: Set DeploymentSecret for the Sitecore Headless SXA Site Grouping Item
Step 10: Set Jss Editing Secret for the Sitecore Headless SXA Site
Step 11: Update the Sitecore Layout Service configuration for the Sitecore JSS Headless SXA
Step 12: Set dictionary data source for the Sitecore JSS GraphQL Dictionary Service

Before we begin, make sure you have a basic understanding of Sitecore, Next.js, and Docker. Let's dive in!

Step 1: Set Up the Sitecore Container

The first step is to set up a Sitecore container using Docker. You can follow the official Sitecore Docker documentation Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js to create a Sitecore latest version container setup with Next.js app with the desired Sitecore modules installed like Sitecore Management Services, Sitecore Headless Services, Sitecore Content Serialization etc..

You need to have the following software applications installed on your computer before you can install the template and build a full-stack solution for Sitecore and JSS for Next.js:

A valid Sitecore license file.
Windows PowerShell 5.1. PowerShell 7 is not supported at this time.
The current long-term support (LTS) version of Node.js.
.NET Core 3.1 SDK (check your installed version with the dotnet --version command).
.NET Framework 4.8 SDK (see the Microsoft procedure for checking .NET Framework versions).
Visual Studio 2019.
Docker for Windows, with Windows Containers enabled.
Any required components for using Sitecore Containers.

After installation of required template and tools, open the PowerShell with administrator privileges, and run the following command to create the project solution with Sitecore Container setup for XP0, XM1 and XP1 topologies with sample Sitecore Next.js app, and this ensure that the container includes the necessary headless functionality:

dotnet new sitecore.nextjs.gettingstarted -n MyProject

And select the following options during the execution of above command:

Template is configured to run the following action: 

Description: Restores dotnet local tools for the solution. 

Actual command: dotnet tool restore 

Do you want to run this action [Y(yes)|N(no)]? 

y 

Running command 'dotnet tool restore'... 

Command succeeded. 

  

Template is configured to run the following action: 

Description: Initializes the JSS project. 

Actual command: powershell -File create-jss-project.ps1 

Do you want to run this action [Y(yes)|N(no)]? 

y 

Running command 'powershell -File create-jss-project.ps1'... 

Adding JSS sample to solution via 'npx create-sitecore-jss... 

Creating JSS Project for myproject 

? Would you like to use the pre-push hook for linting check? Yes 

Initializing 'nextjs'... 

? What is your Sitecore hostname (used if deployed to Sitecore)? myproject.dev.local 

? How would you like to fetch Layout and Dictionary data? GraphQL 

? How would you like to prerender your application? SSG 

Initializing 'nextjs-styleguide'... 

? Which additional language do you want to support (en is already included and required)? da-DK 

Installing packages... 

> npm install

Once, command execution is successful you will get the following prompt:

Installing pre-push hook... 

Pre-push hook installed successfully! 

                 -/oyhdmNNNNmdhyo/- 

             :sdMMMMMMMMMMMMMMMMMMMMds: 

          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy: 

        /mMMMMMMMMMNdyo+//://+shmMMMMMMMMMm/ 

      :mMMMMMMMMh+.              `:smMMMMMMMm: 

    `yMMMMMMMm+`                     :yMMMMMMMs` 

   `dMMMMMMN/                          .hMMMMMMd` 

  `mMMMMMMh`                          -s/+MMMMMMd` 

  yMMMMMMh                        `:yNMMMs/MMMMMMy 

:MMMMMMm`                       `hMMMMMMMsoMMMMMM- 

yMMMMMM/                          dMMMMMMM:mMMMMMy 

NMMMMMN`                          oMyossss:sMMMMMm 

MMMMMMN                           yM:NMMMMyoMMMMMN 

mMMMMMM`                         :Md+MMMMMoyMMMMMm 

yMMMMMM+                        :NN+NMMMMM-NMMMMMy 

:MMMMMMN:-                    `sMdyMNymMMosMMMMMM- 

  yMMMMMMd/o`                .oNdhmMhhMmh++MMMMMMy 

  `dMMMMMMm+do.-         ./oyhhhNNhyNMMNosMMMMMMd` 

   `dMMMMMMMssNdhsoo+/+oyyyydMmhhhMMMNs+mMMMMMMd` 

    `yMMMMMMMNyydMNddddddddddhmMMMMho+dMMMMMMMy` 

      :mMMMMMMMMmhhhdNMMMMMMMMmhssohMMMMMMMMm: 

        /mMMMMMMMMMMNdhyyyyyyyhmMMMMMMMMMMm/ 

          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy: 

             :sdMMMMMMMMMMMMMMMMMMMMds: 

                `-/oyhdmNNNNmdhyo/- 

  

                      __________ 

                  __ / / __/ __/ 

                 / // /\ \_\ \ 

                 \___/___/___/ 

  

JSS application myproject is ready! 

  

Next steps: 

* Connect to Sitecore with jss setup (optional) 

* Try out your application with jss start 

* Enable source control (i.e. git init) (optional) 

* Check out the JSS documentation at https://jss.sitecore.com 

  

Enjoy! 

Updating JSS sample for containerized environment 

Done! 

Command succeeded.

If you open the code base folder, then you will find required setup to start with Sitecore Headless Services:

The above Sitecore Containers setup for Next.js not have the Sitecore SXA module and Sitecore Next.js Multisite add-on to support the Sitecore Headless SXA.

If you need to enable/disable Sitecore configurations on Sitecore Container setup then you can check the details at Enabling development-only configuration and Sitecore Container GitHub Dev Patches (Sitecore Container Patch Config Examples)

Step 2: Add support for Sitecore SXA in Sitecore Headless Container setup

To add the support for Sitecore SXA, you have to add Sitecore SXA and Sitecore SPE modules into your container setup.

The Sitecore developers knowledge repository provides details about how to add different Sitecore modules into your Sitecore Docker Container setup at Sitecore module reference.

For a more detailed explanation of Sitecore module images and how they are included, refer to this topic on how to add Sitecore modules, which includes the Sitecore PowerShell Extensions (SPE) and Sitecore Experience Accelerator (SXA) modules.

Update docker compose file:
- Sitecore PowerShell Extensions (SPE) Module:
  Go to your docker compose override file add SPE module argument (SPE_IMAGE) to mssql-init and cm container services:
  SPE_IMAGE: ${SITECORE_MODULE_REGISTRY}sitecore-spe-assets:${SPE_VERSION}
  Here the values of SITECORE_MODULE_REGISTRY and SPE_VERSION defined in the environment (.env) file as
  SITECORE_MODULE_REGISTRY=scr.sitecore.com/sxp/modules/ SPE_VERSION=6.4-1809
  You can check the Sitecore PowerShell Extensions compatibility with Sitecore Experience Accelerator (SXA) at Sitecore Experience Accelerator compatibility tables.
  
  No need to install Sitecore PowerShell Extensions (SPE) for the Sitecore CD service because Sitecore Experience Accelerator (SXA) only uses Sitecore PowerShell Extensions (SPE) for automation and scaffolding purposes.
- Sitecore Experience Accelerator (SXA) Module:
  Go to your docker compose override file add SPE module argument (SXA_IMAGE) to solr-init, cm and cd container services:
  SXA_IMAGE: ${SITECORE_MODULE_REGISTRY}sitecore-sxa-xm1-assets:${SXA_VERSION}
  Here the values of SITECORE_MODULE_REGISTRY and SXA_VERSION defined in the environment (.env) file as
  SITECORE_MODULE_REGISTRY=scr.sitecore.com/sxp/modules/ SXA_VERSION=10.3-1809
- Update mssql-init base image details for Sitecore XP0 topology:
  If you are using Sitecore Container XP0 topology, then you have to replace the sitecore-${TOPOLOGY} with sitecore-xp1 in image name of mssql-init service in the docker compose file and updated value would be like this:
  mssql-init: isolation: ${ISOLATION} image: ${SITECORE_DOCKER_REGISTRY}sitecore-xp1-mssql-init:${SITECORE_VERSION}

Update docker file:

CM service DockerFile instructions:
In previous step, we have added Sitecore PowerShell Extensions (SPE) and Sitecore Experience Accelerator (SXA) modules in docker compose file, so we have to add instructions for the SPE and SXA as per Sitecore module reference.

You have to append following instructions in your CM Service DockerFile

ARG PARENT_IMAGE 

ARG SXA_IMAGE 

ARG SPE_IMAGE 





FROM ${SPE_IMAGE} as spe 

FROM ${SXA_IMAGE} as sxa 

FROM ${PARENT_IMAGE} 



WORKDIR C:\inetpub\wwwroot 



# Add SPE module 

COPY --from=spe \module\cm\content .\ 



# Add SXA module 

COPY --from=sxa \module\cm\content .\ 

COPY --from=sxa \module\tools \module\tools 

RUN C:\module\tools\Initialize-Content.ps1 -TargetPath .\; ` 

    Remove-Item -Path C:\module -Recurse -Force;

CD service DockerFile instructions:
We have added Sitecore Experience Accelerator (SXA) module in docker compose file, so we have to add instructions for the SXA in your CD Service DockerFile

ARG PARENT_IMAGE 

ARG SXA_IMAGE 

  

  

FROM ${SXA_IMAGE} as sxa 

FROM ${PARENT_IMAGE} 

  

WORKDIR C:\inetpub\wwwroot 

  

# Add SXA module 

COPY --from=sxa \module\cd\content .\ 

COPY --from=sxa \module\tools \module\tools 

RUN C:\module\tools\Initialize-Content.ps1 -TargetPath .\; ` 

    Remove-Item -Path C:\module -Recurse -Force;

MSSQL-INIT service DockerFile instructions:
We have added Sitecore PowerShell Extensions (SPE) module in docker compose file, so we have to add instructions for the SPE in your mssql-init Service DockerFile

ARG PARENT_IMAGE 

ARG SPE_IMAGE 

  

  

FROM ${SPE_IMAGE} as spe 

FROM ${PARENT_IMAGE} 

  

WORKDIR C:\inetpub\wwwroot 

  

# Add SPE module 

COPY --from=spe C:\module\db C:\resources\spe

SOLR-INIT service DockerFile instructions:
We have added Sitecore Experience Accelerator (SXA) module in docker compose file of CM and CD role, so we required the Solr indexes for these roles, and for this we need to add instructions for the SXA in solr-init Service DockerFile
```
ARG PARENT_IMAGE 

ARG SXA_IMAGE 

  

FROM ${SXA_IMAGE} as sxa 

FROM ${PARENT_IMAGE} 

  

WORKDIR C:\inetpub\wwwroot 

  

# Add SXA module 

COPY --from=sxa .\module\solr\ C:\data\ 
```
In the DockerFile the arguments SXA_IMAGE / SPE_IMAGE are based on the argument name passed in the docker compose or docker compose override files.
Also, update your .env file, if you are passing any dynamic parameter to your docker compose files.

Step 3: Add support for Sitecore Next.js multisite add-on

The Sitecore Next.js app which created by the Sitecore Next.js container template does not have Sitecore Next.js multisite add-on which is required to support the Sitecore Headless SXA multisite feature.

To get more information about what type of Next.js project you can create with the JSS initializer script present at Add-ons for Sitecore Next.js applications.

For our purpose, we will be creating the Sitecore Next.js app with Sitecore SXA and multisite add-on using following steps:

Create new folder outside of your container setup
Open the Powershell terminal in ADMIN mode, and go to the location of newly created folder and run the following command
```
npx create-sitecore-jss --templates nextjs,nextjs-sxa,nextjs-multisite 
```

Follow the prompts to provide options for your application.

 npx create-sitecore-jss --templates nextjs,nextjs-sxa,nextjs-multisite 

? Where would you like your new app created? C:\Multisiteaddon\nextjs 

Initializing 'nextjs'... 

? What is the name of your app? sxamultisite 

? What is your Sitecore hostname (used if deployed to Sitecore)? sxamultisite.dev.local 

? How would you like to fetch Layout and Dictionary data? GraphQL 

? How would you like to prerender your application? SSG 

Initializing 'nextjs-sxa'... 

Initializing 'nextjs-multisite'... 

Installing packages... 

> npm install

Setup first your system for Sitecore JSS Next.js development using instruction present at Install JSS for Next.js

After successful execution of command, you will see the following information on terminal:

> sxamultisite@21.1.0 lint 

> eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts --fix 

  

                 -/oyhdmNNNNmdhyo/- 

             :sdMMMMMMMMMMMMMMMMMMMMds: 

          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy: 

        /mMMMMMMMMMNdyo+//://+shmMMMMMMMMMm/ 

      :mMMMMMMMMh+.              `:smMMMMMMMm: 

    `yMMMMMMMm+`                     :yMMMMMMMs` 

   `dMMMMMMN/                          .hMMMMMMd` 

  `mMMMMMMh`                          -s/+MMMMMMd` 

  yMMMMMMh                        `:yNMMMs/MMMMMMy 

:MMMMMMm`                       `hMMMMMMMsoMMMMMM- 

yMMMMMM/                          dMMMMMMM:mMMMMMy 

NMMMMMN`                          oMyossss:sMMMMMm 

 MMMMMMN                           yM:NMMMMyoMMMMMN 

 mMMMMMM`                         :Md+MMMMMoyMMMMMm 

yMMMMMM+                        :NN+NMMMMM-NMMMMMy 

:MMMMMMN:-                    `sMdyMNymMMosMMMMMM- 

  yMMMMMMd/o`                .oNdhmMhhMmh++MMMMMMy 

  `dMMMMMMm+do.-         ./oyhhhNNhyNMMNosMMMMMMd` 

   `dMMMMMMMssNdhsoo+/+oyyyydMmhhhMMMNs+mMMMMMMd` 

    `yMMMMMMMNyydMNddddddddddhmMMMMho+dMMMMMMMy` 

      :mMMMMMMMMmhhhdNMMMMMMMMmhssohMMMMMMMMm: 

        /mMMMMMMMMMMNdhyyyyyyyhmMMMMMMMMMMm/ 

          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy: 

             :sdMMMMMMMMMMMMMMMMMMMMds: 

                `-/oyhdmNNNNmdhyo/- 

  

                      __________ 

                  __ / / __/ __/ 

                 / // /\ \_\ \ 

                 \___/___/___/ 

  

JSS application sxamultisite is ready! 

  

Next steps: 

* Connect to Sitecore with jss setup (optional) 

* Enable source control (i.e. git init) (optional) 

* Check out the JSS documentation at https://jss.sitecore.com 

  

Enjoy!

The code structure of newly created Sitecore Next.js multisite would be like this

Now go to the old rendering solution folder created using Next.js container template and delete all the files/folder from location \MyProject\src\rendering
Copy all the Nextjs code (files/folder) from the multisite setup created at previous step and place inside the \MyProject\src\rendering and change the project name as per the app name of your Sitecore JSS Site in the Sitecore CMS e.g. sxamultisite with sxawebsite if required:

Your Sitecore CMS Content Tree

Step 4: Setup security for your Sitecore Layout Service

In the previous step you have set up the Sitecore Headless SXA Multisite Next.js code base. Now we will add required Sitecore items into the Sitecore Headless SXA Site instance.

Create the API Key which is utilized by the Sitecore Layout Service or Sitecore Edge GraphQL or any other client to get the Sitecore Content. In the content tree, navigate to /sitecore/system/Settings/Services/API Keys and create a new API Key item and fill the required field as per the Create a Sitecore API key.

Step 5: Set up the editing host for Sitecore Headless SXA Multisite

How to setup Sitecore Headless SXA Rendering Host Configuration item for Sitecore Headless SXA Multisite setup (Configure the editing host for your local environment)?

In Sitecore JSS setup (Sitecore Next.js SDK), you generally define the Rendering Engine Endpoint URL, Rendering Engine Application URL and Application Name settings in the Sitecore Patch Configuration present in the rendering code base at /sitecore/config/"app name".config and deploy this Sitecore Patch Configuration into the Sitecore CMS instance:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/"> 

  <sitecore> 

    <javaScriptServices> 

      <apps> 

        <app name="sxawebsite" 

            layoutServiceConfiguration="default" 

            sitecorePath="/sitecore/content/sxawebsite" 

            useLanguageSpecificLayout="true" 

            graphQLEndpoint="/sitecore/api/graph/edge" 

            inherits="defaults" 

            serverSideRenderingEngine="http" 

            serverSideRenderingEngineEndpointUrl="http://<rendering-host-name>/api/editing/render" 

            serverSideRenderingEngineApplicationUrl="http://<rendering-host-name>" 

        /> 

      </apps> 

    </javaScriptServices> 

  </sitecore> 

</configuration>

Here, app name sxawebsite is from the config.appName setting in the rendering host code (front-end app) base > package.json file and if you are deploying to local Sitecore CMS setup (IaaS setup) then replace rendering-host-name with localhost:3000, and if on the higher environment then you should have separate Editing Rendering Host for Experience Editor support and for lower environment (not local dev setup) you can use end-user Rendering Host for Experience Editor support.

For example, if you are on lower environment (not local dev setup) and your end-user Rendering Host name is uat.contoso.com then replace rendering-host-name with uat.contoso.com, and in higher environment you should have separate editing host like preview.contoso.com then replace rendering-host-name with preview.contoso.com.

In Sitecore XM Cloud, when you create an environment using the XM Cloud Deploy app, the environment is set up with a default editing host. This editing host works out of the box on your remote XM Cloud instance. The editing host serves only to allow editing experiences inside the XM Cloud instance and is not set up or scaled for serving live traffic. You can check more information at Sitecore XM Cloud Editing hosts and rendering hosts.

In XM Cloud you can also setup your own Sitecore Editing Host to provide Experience Editor support vis Sitecore Patch Configuration file, and steps present at Walkthrough: Configuring external editing hosts for XM Cloud instances

In Sitecore JSS Headless SXA setup, you define the Rendering Engine Endpoint URL, Rendering Engine Application URL and Application Name settings with the help of Sitecore Rendering Host Configuration item at /sitecore/system/Settings/Services/Rendering Hosts/ and not via the Sitecore Patch Configuration as explained above.

Create the new Rendering Host item at /System/Settings/Services/Rendering Hosts/ item or use the Default item. Here we will be using Default rendering host item:

Here, application name sxawebsite is from the config.appName setting in the rendering host code (front-end app) base > package.json file and if you are deploying to local Sitecore CMS setup (IaaS setup) then replace rendering-host-name with localhost:3000, and if you have Sitecore Container based local setup with end-user Rendering host service then replace rendering-host-name with rendering:3000 (if end-user front-end app service name is rendering and you have separate editing rendering host service then use host name of that). If on the higher environment, then you should have separate Editing Rendering Host for Experience Editor support and for lower environment (not local dev setup) you can use end-user Rendering Host for Experience Editor support.

In Sitecore Container setup if you mention the url of Rendering host in the Rendering Engine Application url then you will get the error

US)+WindowsPowerShell/5.1.17763.3770 - 200 0 0 2 

2023-06-12 15:22:44 172.29.151.248 GET /sitecore/api/layout/render/default item=%2F&sc_apikey=7BC74919-F648-406F-99B7-537CC4CA0834&sc_site=sxawebsite&sc_lang=en&tracking=true 80 - 172.29.155.131 axios/0.21.4 - 500 0 0 6 

360 16:22:44 ERROR Application error. 

Exception: System.InvalidOperationException 

Message: Site from query string was not found: sxawebsite 

Source: Sitecore.Kernel 

   at Sitecore.Pipelines.PreAuthenticateRequest.SiteResolver.ResolveSiteContext(HttpRequestArgs args) 

   at Sitecore.Pipelines.PreAuthenticateRequest.SiteResolver.Process(HttpRequestArgs args) 

   at (Object , Object ) 

   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args) 

   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain, Boolean failIfNotExists) 

   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain) 

   at Sitecore.Web.RequestEventsHandler.OnBeginRequest(HttpContextBase context) 

   at Sitecore.Nexus.Web.HttpModule.HttpApplication_BeginRequest(Object sender, EventArgs e) 

   at System.Web.HttpApplication.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() 

   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step) 

   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

In the rendering host item Server side rendering engine application URL is not correct because CM container does not know about the Traefik external URLs/hosts. It must always use internal Docker Compose service hostnames like http://rendering:3000, so you should change Server side rendering engine application URL to http://rendering:3000 (without a trailing slash).

Next.js JSS applications do not use integrated mode for integrating with Sitecore editors. Instead, they use the Preview feature of Next.js in combination with the HTTP Rendering Engine. The Next.js application serves as the rendering host.

With the help of HTTP Rendering engine you can have Experience Editor support for your Next.js application so that Sitecore users can manage content, presentation, and other marketing features for your JSS app using Experience Editor.
Reference: Start a JSS app in integrated mode

Step 6: Set the Application Name in the Sitecore Headless SXA Multisite setup

In previous steps we have created the API key and Rendering host items which required for accessing the data and for experience editor support.

In your Sitecore CMS instance, go to /content/[Headless SXA Tenant Name]/[Headless SXA Site]/Settings item, in the App Settings section, verify that the App Name field contains the name of your application from the config.appName setting in the rendering host code (front-end app) base > package.json file.

We will update value of DeploymentSecret field later once generated via Sitecore JSS Setup command

You also don’t need to enter the values of the Rendering Engine Endpoint URL and Rendering Engine Application URL in the Sitecore Headless SXA Settings item.

Step 7: Set values of the Sitecore Headless SXA Site Grouping and Site Definition Item

In your Sitecore CMS instance, go to /content/[Headless SXA Tenant Name]/[Headless SXA Site]/Settings/Site Grouping/[your-site] SXA Site Definition item, in the Settings section, in the Predefined application rendering host field, verify that the field references the default rendering host item created in the step-5.

Error: 404 / Page Not Found For All Pages On Next.js. Page not found This page does not exist. Go to the Home page

How to setup Multiple Hosts for a Sitecore SXA Site in Sitecore Headless SXA?
In Sitecore SXA setup when you will create the new SXA site then Sitecore SXA setup will create the default Site grouping > Sitecore Definition item under the /content/[Headless SXA Tenant Name]/[Headless SXA Site]/Settings/Site Grouping. This item is used by the SXA site to identify the Site based on the Host name defined in this Site Grouping/[your-site] item.

This Sitecore SXA Site Definition item will work when you are having only CM instance (in local XP0 dev setup) and in default SXA Site Definition item, hostname defined as wildcard (*) and database as MASTER, and it will handle all requests even from CD, and you will start getting error like Could not find configuration node: databases/database[@id='master'] while access the CD service (e.g., cd.myproject.localhost) and CD container become Unhealthy:

2448 12:33:41 ERROR Application error. 

Exception: System.InvalidOperationException 

Message: Could not find configuration node: databases/database[@id='master'] 

Source: Sitecore.Kernel 

   at Sitecore.Configuration.DefaultFactory.GetConfigNode(String xpath, Boolean assert) 

   at Sitecore.Configuration.DefaultFactory.CreateObject(String configPath, String[] parameters, Boolean assert) 

   at Sitecore.Configuration.DefaultFactory.GetDatabase(String name, Boolean assert) 

   at Sitecore.Configuration.DefaultFactory.GetDatabase(String name) 

   at Sitecore.Sites.SiteContext.get_Database() 

   at Sitecore.Pipelines.HttpRequest.DeviceResolver.Process(HttpRequestArgs args) 

   at (Object , Object ) 

   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args) 

   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain, Boolean failIfNotExists) 

   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain) 

   at Sitecore.Web.RequestEventsHandler.OnPostAuthenticateRequest(HttpContextBase context) 

   at System.Web.HttpApplication.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() 

   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step) 

   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

For this error you should also check that patch config present at App_Config\Modules\JSS SXA\Foundation\Sitecore.XA.JSS.Foundation.Presentation.config should not point to MASTER db

<config name="sxa-jss"> 

<requestContext type="Sitecore.LayoutService.Configuration.DefaultRequestContext, Sitecore.LayoutService"> 

<databaseName>master</databaseName> 

</requestContext>

If pointing to MASTER db then you should update database to WEB via the new Sitecore Patch configuration file

<?xml version="1.0" encoding="utf-8"?> 

<!--The default sxa-jss database needs to be set to web on CD servers--> 

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform"  xmlns:role="http://www.sitecore.net/xmlconfig/role/" xmlns:set="http://www.sitecore.net/xmlconfig/set/"> 

  <sitecore> 

    <layoutService> 

      <configurations> 

        <config name="sxa-jss" xdt:Locator="Match(name)"> 

          <requestContext role:require="ContentDelivery"> 

            <databaseName patch:delete="databaseName"/> 

            <databaseName>web</databaseName> 

          </requestContext> 

        </config> 

      </configurations> 

    </layoutService> 

  </sitecore> 

</configuration>

And also perform below updates for Sitecore Headless SXA setup

The above error is coming because CD service will try to find MASTER database on the CD service (server) which they don’t have access. For this you should have two Site Definitions items, one for CM and one for CD e.g., if you have separate preview website then you should create separate site definition entry for that also. In Sitecore Container setup you will be having CM and CD services so I will be taking this setup to define the separate site entries:

Note: To resolve the error : 404 / Page Not Found For All Pages On Next.js, you have to mention the site name in the Sitecore SXA Site Definition for CD service as per your the name of your application from the config.appName setting in the rendering host code (front-end app) base > package.json file. In the above CD service Sitecore SXA Site Definition item I have mention the name of the Next.js app but it’s not required for the CM service Sitecore SXA Site Definition item.

With above settings, you will be able to access the Frontend app in CM with Experience Editor support (separate rendering host) and Frontend app (end user rendering host) will load without error.

Step 8: Sitecore JSS Headless SXA Next.js App Setup

The deployment of Sitecore JSS Headless SXA App deployment is different from conventional JSS application because the default configuration settings are added to items (Site/Settings/) when a headless site is created, the Config Deployment step in the general process outlined at Walkthrough: Connecting a code-first JSS Next.js application to Sitecore must be skipped. Additionally, if any configuration changes required to Sitecore the you must comment out the app and site nodes in the configuration (sitecore/sites/site and sitecore/javaScriptServices/apps/app).

Open the rendering folder where Sitecore Next.js multisite code base in the terminal (ADMIN mode) and run the JSS command jss setup to generate the scjssconfig.json and /sitecore/config/[App Name].deploysecret.config files and follow the prompts. Follow the prompts to supply the following pieces of information:

Is your Sitecore instance on this machine or accessible via network share? [y/n]: y 

Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): ..\..\docker\deploy\platform\ 

Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): https://cm.myproject.localhost 

Sitecore import service URL [https://cm.myproject.localhost/sitecore/api/jss/import]: 

Sitecore API Key (ID of API key item): 2036C66B-228B-4967-88A5-5C31ABC72D2C 

Please enter your deployment secret (32+ random chars; or press enter to generate one): 

Deployment secret has been generated. Ensure the JSS app config on the Sitecore end has the same secret set.

Is your Sitecore instance on this machine or accessible via network share? [y/n]:
Enter y because you will be able to access your website over the network.
Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re):
What should be the path of the Sitecore folder during Sitecore JSS setup?
If you are doing development in local system (not in Sitecore Container setup) then it's the root physical path to the Sitecore instance, used to deploy config files and JS build artifacts. File share paths are fine for remote instances. For example: c:\inetpub\wwwroot\MySitecore\Website. If you do not have access to the website folder directly, answer no when asked if your instance is remote.

For Sitecore Container setup this would be the path of deploy folder as per your CM/CD service volume setup ..\..\docker\deploy\platform\
Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts):
This is the hostname of your Sitecore CMS instance previously configured in the Sitecore configuration patch /sitecore/config/[AppName].config. For example, https://cm.myproject.localhost
Sitecore import service URL:
This is the import service URL of your JSS app. It consists of the hostname of your JSS app plus /sitecore/api/jss/import: https://cm.myproject.localhost/sitecore/api/jss/import.

You can leave this blank to use the default value or provide your custom URL.
API key ID:
provide the Item ID of the Sitecore API key for this JSS app from the location /sitecore/system/Settings/Services/API Keys
Deployment secret:
This is a shared secret that enables authentication to deploy your app items to Sitecore. We recommend you use the random key generated by the setup process. If you choose your own key, the secret must be a randomly generated string 32 or more characters long.

Error: Sending package sitecore\package\sxawebsite.1684855633346.manifest.zip to https://cm.dockerexamples.localhost/sitecore/api/jss/import...
Unexpected response from import service:
Status message: Forbidden
Status: 403
No need to run the jss deploy items -c –d (or jss deploy app --includeContent --includeDictionary) , jss deploy app and jss deploy items

You are using Sitecore Headless SXA so you don’t need to deploy the app configuration and JSS Next.js app to Sitecore, and to support the experience editor separate Node.js based Rendering host (service) required to deploy your Sitecore Next.js (front-end) code base.

Applications built with JSS for Next.js are deployed differently than apps built with JSS for React, Angular, and Vue.js because of the particularities of Next.js. Essentially, because of the Next.js server, a JSS Next.js app uses the HTTP rendering engine.

Step 9: Set DeploymentSecret for the Sitecore Headless SXA Site Grouping Item

The Deployment Secret generated in the previous steps should be mentioned in the Sitecore Headless SXA Settings item (/sitecore/content/[Tenant]/[Site]/Settings)

Step 10: Set Jss Editing Secret for the Sitecore Headless SXA Site

You expose the Sitecore editor endpoints through editor integration API routes in the Next.js application when rendering Sitecore pages in editing mode.

You must create a secret token in order to safeguard the Sitecore editor endpoints. An alphanumeric value of at least 16 characters is advised by Sitecore.

This secret must be set on both the server and the client, and the values must be same.

Error: Connection to your rendering host failed with an Unauthorized error

Error: Connection to your rendering host failed with an Internal Server Error

There are two ways to configure the JSS Editing Secret server-side:

Set JSS Editing Secret via environment variable:
In your Sitecore setup e.g., Sitecore Container setup you have the environment variable called JSS_EDITING_SECRET which used to store the JSS Editing Secret (I am using the deployment secret key as the JSS Editing Secret but you can have different also) and passed to the environment variable to CM service:

Other option is to secure the Sitecore editor endpoint using a Sitecore configuration patch and deploy to [WEBROOT]/App_Config/Include/zzz:

<!-- 

  JSS Sitecore Configuration Patch File 

  

  This configuration file registers the JSS site with Sitecore, and configures the Layout Service 

  to work with it. Config patches need to be deployed to the Sitecore server. 

  

  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI, 

  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site. 

--> 

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/"> 

  <sitecore> 

    <!-- 

      Note that if any of these settings are enabled, they will apply to the entire Sitecore instance. If there are 

      multiple sites defined in the instances, the settings will affect all of them. 

    --> 

    <settings> 

      <!-- 

        JSS EDITING SECRET 

        To secure the Sitecore editor endpoint exposed by your Next.js app (see `serverSideRenderingEngineEndpointUrl` below), 

        a secret token is used. This is taken from an env variable by default, but could be patched and set directly by uncommenting. 

        This (server-side) value must match your client-side value, which is configured by the JSS_EDITING_SECRET env variable (see the Next.js .env file). 

        We recommend an alphanumeric value of at least 16 characters. 

         

        You can use the deployment secret key as the JSS Editing Secret but you can have different also  

        --> 

  

        <setting name="JavaScriptServices.ViewEngine.Http.JssEditingSecret" value="xxxx" /> 

    </settings> 

  </sitecore> 

</configuration>

Note: You don’t need to define the JSS_EDITING_SECRET value in the environment file of rendering host code base (Sitecore Next.js code) at src\rendering\.env file

Step 11: Update the Sitecore Layout Service configuration for the Sitecore JSS Headless SXA

In Sitecore JSS Next.js applications you can fetch layout and dictionary data using the Sitecore Layout Service REST API or the Sitecore GraphQL Edge schema and for this you can change the value of FETCH_WITH environment variable (possible values REST or GraphQL) mention in the environment file of your Sitecore Next.js code base(src\rendering\.env).

Error: Placeholder was not found in the current rendering data
"jss-main" was not found in the current rendering data while using node-headless-ssr-proxy with React
Placeholder 'xxx' was not found in the current rendering data
PlaceholderCommon.js:55 Placeholder 'sxa-homepage' was not found in the current rendering data

If you are fetching data with Sitecore Layout Service in your Sitecore Next.js SXA application (using the nextjs-sxa add-on) then you have to update the configurationName parameter value of the RestLayoutService object to 'sxa-jss' in /src/lib/layout-service-factory.ts file because the Layout service will append this updated value into the Sitecore Layout service api end point as https://[Host Name]/sitecore/api/layout/render/sxa-jss?item=

/** 

 * Factory responsible for creating a LayoutService instance 

 */ 

export class LayoutServiceFactory { 

  /** 

   * @param {string} siteName site name 

   * @returns {LayoutService} service instance 

   */ 

  create(siteName: string): LayoutService { 

    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL 

      ? new GraphQLLayoutService({ 

          endpoint: config.graphQLEndpoint, 

          apiKey: config.sitecoreApiKey, 

          siteName, 

        }) 

      : new RestLayoutService({ 

          apiHost: config.sitecoreApiHost, 

          apiKey: config.sitecoreApiKey, 

          siteName, 

          //configurationName: 'default', 

          configurationName: 'sxa-jss', 

        }); 

  } 

}

Step 12: Set dictionary data source for the Sitecore JSS GraphQL Dictionary Service

Error: Valid value for rootItemId not provided and failed to auto-resolve app root item. go where no one has gone before.

If you would like to fetch dictionary data from Sitecore using GraphQL and the JSS GraphQLDictionaryService then you have to set the root item id of your website.

To obtain dictionary data for the current app, the Dictionary Service requires a root item ID. If your instance have only one Sitecore JSS app then you can give the root item ID of your website landing page (Home page) at /src/lib/dictionary-service.ts and add rootItemId : "[Your JSS App Home item id with curly braces]" and if your Sitecore instance have more than one Sitecore JSS app then service will try to determine the root item for the current JSS App using GraphQL and app name.

import { 

  DictionaryService, 

  RestDictionaryService, 

  GraphQLDictionaryService, 

  constants, 

} from '@sitecore-jss/sitecore-jss-nextjs'; 

import config from 'temp/config'; 

  

/** 

 * Factory responsible for creating a DictionaryService instance 

 */ 

export class DictionaryServiceFactory { 

  /** 

   * @param {string} siteName site name 

   * @returns {DictionaryService} service instance 

   */ 

  create(siteName: string): DictionaryService { 

    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL 

      ? new GraphQLDictionaryService({ 

          endpoint: config.graphQLEndpoint, 

          apiKey: config.sitecoreApiKey, 

          siteName, 

          rootItemId: '<Your JSS App Home item id with curly braces>', 

          /* 

            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current 

            app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here; 

            otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name. 

            rootItemId: '{GUID}' 

          */ 

        }) 

      : new RestDictionaryService({ 

          apiHost: config.sitecoreApiHost, 

          apiKey: config.sitecoreApiKey, 

          siteName, 

        }); 

  } 

} 

  

/** DictionaryServiceFactory singleton */ 

export const dictionaryServiceFactory = new DictionaryServiceFactory();

Step 13: Verify your Sitecore JSS Headless SXA Multisite Next.js app

Open the Sitecore SXA Site Manager and make sure that your SXA Website resolved successfully:

After doing all the configuration/code changes, now its time to validate the Sitecore JSS SXA Next.js app, Go to your rendering host directory and start the front-end application in connected mode with the command: jss start:connected
You will see the registration of components and sample build logs are

> npm run start:connected -- 

  

> sxawebsite@21.2.1 start:connected 

> npm-run-all --serial bootstrap --parallel next:dev start:watch-components 

  

  

> sxawebsite@21.2.1 bootstrap 

> ts-node --project tsconfig.scripts.json scripts/bootstrap.ts 

  

Registering generate-component-builder plugin component-builder 

Registering generate-component-builder plugin packages 

Writing generate-component-builder plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\scripts\temp\generate-component-builder-plugins.ts 

Registering config plugin computed 

Registering config plugin fallback 

Registering config plugin multisite 

Registering config plugin package-json 

Registering config plugin scjssconfig 

Writing config plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\scripts\temp\config-plugins.ts 

Registering sitemap-fetcher plugin graphql-sitemap-service 

Writing sitemap-fetcher plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\sitemap-fetcher-plugins.ts 

Registering middleware plugin multisite 

Registering middleware plugin redirects 

Writing middleware plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\middleware-plugins.ts 

Registering page-props-factory plugin component-props 

Registering page-props-factory plugin normal-mode 

Registering page-props-factory plugin preview-mode 

Registering page-props-factory plugin site 

Writing page-props-factory plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\page-props-factory-plugins.ts 

Registering next-config plugin graphql 

Registering next-config plugin robots 

Registering next-config plugin sass 

Registering next-config plugin sitemap 

Writing next-config plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\next-config-plugins.js 

Registering extract-path plugin multisite 

Writing extract-path plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\extract-path-plugins.ts 

Registering site-resolver plugin default 

Registering site-resolver plugin multisite 

Writing site-resolver plugins to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\site-resolver-plugins.ts 

Registering JSS component ColumnSplitter 

Registering JSS component Container 

Registering JSS component ContentBlock 

Registering JSS component FEaaSWrapper 

Registering JSS component Image 

Registering JSS component LinkList 

Registering JSS component Navigation 

Registering JSS component PageContent 

Registering JSS component PartialDesignDynamicPlaceholder 

Registering JSS component Promo 

Registering JSS component RichText 

Registering JSS component RowSplitter 

Registering JSS component Title 

Writing component builder to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\componentBuilder.ts 

Fetching site information from https://cm-myproject.localhost/sitecore/api/graph/edge 

(node:44944) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification. 

(Use `node --trace-warnings ...` to show where the warning was created) 

Writing runtime config to C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\src\temp\config.js 

  

> sxawebsite@21.2.1 next:dev 

> cross-env NODE_OPTIONS='--inspect' next dev 

  

  

> sxawebsite@21.2.1 start:watch-components 

> ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch 

  

Debugger listening on ws://127.0.0.1:9229/fcf1066c-ddab-45f2-8af2-3d2d3296b7e7 

For help, see: https://nodejs.org/en/docs/inspector 

Watching for changes to component builder sources in src/components... 

- info the --inspect option was detected, the Next.js proxy server should be inspected at port 9229. 

- ready started server on 0.0.0.0:3000, url: http://localhost:3000 

- info the --inspect option was detected, the Next.js routing server should be inspected at port 9230. 

Debugger listening on ws://127.0.0.1:9230/b166d47f-1a42-4566-9fab-53d539e858b2 

For help, see: https://nodejs.org/en/docs/inspector 

- info Loaded env from C:\Amit\Sitecore-JSS-Headless-SXA\sxawebsite\.env

Now open the browser and access the http://localhost:3000/, and you will be able to see the Blank page which will be showing title of your Sitecore SXA Site Home node item (/sitecore/content/[Tenant]/[Site]/Home)

Note: If you are using the Sitecore Next.js SDK then you required the separate Rendering Host to support the Experience Editor (applicable to Sitecore IaaS setup and Sitecore Container setup), and if you are using the XM Cloud then Sitecore will provide the OOTB support for Editing experience and you don’t need to provision the Editing Rendering host by your own.

If you will try to open the Sitecore Headless SXA page (from Container Sitecore Instance) into Experience Editor where remote rendering host (running SXA Next.JS app from host machine using jss start:connected) at http://localhost:3000/api/editing/render then you will get error Unable to connect to the remote server:
Error:

1952 17:28:25 ERROR Unable to connect to the remote server  

  

Exception: System.Net.WebException  

  

Message: Unable to connect to the remote server  

  

Source: System  

  

  at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request)  

  

  at System.Net.WebClient.UploadString(Uri address, String method, String data)  

  

  at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)  

  

Nested Exception  

  

Exception: System.Net.Sockets.SocketException  

  

Message: No connection could be made because the target machine actively refused it 127.0.0.1:3000  

  

Source: System  

  

  at System.Net.Sockets.Socket.DoConnect(EndPoint endPointSnapshot, SocketAddress socketAddress)  

  

  at System.Net.ServicePoint.ConnectSocketInternal(Boolean connectFailure, Socket s4, Socket s6, Socket& socket, IPAddress& address, ConnectSocketState state, IAsyncResult asyncResult, Exception& exception)

In this case you should have a separate Rendering host and use that as Editing Host to support Editing Experience in the lower environment and for higher environment you should have separate Editing Host. Also verify the Editing secret value correctly present at JavaScriptServices.ViewEngine.Http.JssEditingSecret attribute in Sitecore CMS and in SXA website (/sitecore/content/[Tenant]/[Site]/Settings, you can have same value for both Editing Secret and Deployment Secret) and disable the Rendering\sitecore\config\[website].config file in Rendering code base and not deploying to Sitecore CMS also.

Conclusion:

With the help of the above steps, you should be successfully able to configure a Sitecore Next.js multisite app and integrate it with Headless SXA within a Sitecore container. This setup empowers you to build scalable, decoupled, and content-rich applications while leveraging the powerful capabilities of both Sitecore and Next.js. Enjoy the benefits of headless architecture and the flexibility of Sitecore in delivering exceptional digital experiences.

Credit/References:

Setup local XM Cloud development environment using Docker containers – Sitecore With Raman (wordpress.com)	How To Create A Local Sitecore XM Installation For XM Cloud \| Fishtank Consulting (getfishtank.com)	Walkthrough: Setting up your full-stack XM Cloud local development environment (sitecore.com)
Sitecore.Demo.Platform/docker/images/windows/demo-cd/Dockerfile at main · Sitecore/Sitecore.Demo.Platform · GitHub	Sitecore.Demo.Platform/docker/images/windows/demo-standalone/Dockerfile at main · Sitecore/Sitecore.Demo.Platform · GitHub	GitHub - michaellwest/test-sitecore-packages: Test the installation of Sitecore packages.
Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js	Sitecore XM Cloud: How To Setup Sitecore Headless SXA And Next.js \| Fishtank Consulting (getfishtank.com)	Setting Up Multiple Hosts For A Sitecore SXA Site \| Fishtank Consulting (getfishtank.com)
Rob Ahnemann	Jeff L'Heureux	Richard Seal

Pingback:

sitecore next.js	sitecore jss nextjs	sitecore jamstack
sitecore 10.3 headless sxa	what is headless sitecore	sitecore sxa headless
sitecore headless tutorial	sitecore headless	sitecore headless download
sitecore jss headless	sitecore headless .net core	sitecore headless cms
sitecore 10 headless	sitecore nextjs	sitecore jss multisite
nextjs sitecore	sitecore-jss-nextjs github	sitecore headless sxa
react sitecore	sitecore jss vs headless	sitecore jss nextjs
sitecore cms headless	sitecore jss next.js	sitecore next.js sxa
sitecore jss sxa	sitecore next.js	next.js sitecore
sitecore nextjs sample website	Guide To Fixing Setup Errors: Sitecore Headless SXA, Next.js, XM Cloud Dev \| Fishtank Consulting (getfishtank.com)	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
How to use a API proxy in Sitecore JSS NextJS Application	How to use a proxy in Next.js	Next.JS — How To Proxy To Backend Server
How To Protect Your API Key In Production With Next.js API Route	Next.JS — How To Proxy To Backend Server	Building a Reverse Proxy Server with Node.js
How to GET request data using proxy for API in NextJS	Next Js does not proxying API requests	Setting up proxy in Next.js for DEV environment
Proxy api requests w/o a custom server	Next.js: The Easiest Way to Create an API Proxy	The Easiest Way to Create an API Proxy in NextJS
API proxies Next.js	Next.js API proxy benefits	Secure API communication Next.js
CORS handling Next.js	Server-side authorization Next.js	API rate limiting Next.js
Response manipulation Next.js	Next.js microservices integration	Backend integration Next.js
API proxy security Next.js	api next.js	next.js proxy api
proxy api calls	js proxy api	api proxies meaning
proxy api next js	next js api example	next js context api example
next js auth example	next js authentication example	sitecore jss
next api proxy	next js api proxy	nextjs api proxy
nextjs proxy api requests	sitecore github	sitecore nextjs getting started
nextjs http proxy	sitecore nextjs graphql	sitecore jss getstaticprops
difference between proxy and api	what is a proxy in api	api proxy example
sitecore jss tutorial	sitecore jss api	what is proxy in rest api
sitecore jss routing	sitecore jss topology	next js api as proxy
sitecore jss example	sapi proxy vs gateway	sitecore jss architecture
next.js api proxy	next js proxy api requests	next js proxy api route
next js api best practices	npm sitecore jss	sitecore jss license
next js proxy api call	sitecore jss nextjs	sitecore-jss
next api example	why sitecore jss	sitecore jss proxy
sitecore jss site	sitecore jss nextjs page	sitecore nextjs
sitecore jss getting started	sitecore next.js	sitecore jss docs
jss sitecore github	sitecore jss headless	sitecore jss placeholder
jss next js	sitecore jss sxa	jss setup sitecore
sitecore jss node version	sitecore nextjs page	Walkthrough: Connecting a Next.js JSS app to Sitecore editors
next js sitecore	gitignore next js	pages next js
Architecture and APIs for integrating JSS Next.js apps	sitecore-jss-nextjs github	sitecore javascript rendering
next.js 404 page	next.js custom 404 page	next.js 404
Next.js API routes	Sitecore Headless SXA	Sitecore Headless NextJS SXA
Component-level data fetching in Sitecore JSS with Next.js	Sitecore NextJS Component Refactoring and Reusability	How to setup Secure Sitecore JSS Site
Getting Started Sitecore JSS with NextJS	How to setup JavaScript Services (JSS) for Sitecore 9	Deploying a Sitecore JSS-Next.js App with SSG & ISR to Vercel
Walkthrough: Creating a JSS Next.js application with the JSS	Sitecore JavaScript Rendering SDK (JSS) for Next.js	Sitecore JSS for Next.js differences from JSS for React
sitecore edge

Troubleshooting Steps to Resolve the "Invalid Username or Password" Error in Sitecore Docker setup

2023-06-16T21:41:00.013+05:30

I was having trouble while setting up a local instance of Sitecore Docker instance using Sitecore Demo Edge GitHub Repo for Sitecore version 10.3. All containers were up and running normally but when I was trying to login using configured credentials in the .env file , it said "invalid username or password".

However, there are steps you can take to troubleshoot and resolve this issue. In this article, we will guide you through the process of troubleshooting and resolving the Sitecore Invalid username or password error when trying to log in to Sitecore Docker setup.

Before we begin, it's important to note that the steps mentioned here assume you have administrative access to the Sitecore environment. Let's get started!

To verify the Sitecore Authentication error which prevent user to login into Sitecore Docker setup we should validate following details

Step 1: Verify the Sitecore Admin username and password
Double-check the username and password you are using to log in to Sitecore. Ensure that you have entered the correct credentials, including the proper capitalization, special characters, and any leading or trailing spaces. Sitecore usernames and passwords are case-sensitive, so make sure you are using the exact combination of uppercase and lowercase letters which are generally defined in the .env file in the Sitecore Docker setup.
Step 2: Validate the Sitecore Admin user in SQL database
To check the Sitecore Admin user, you should have the SQL database credentials and for this you can check the Sitecore Docker .env file, and look for SQL_SA_LOGIN and SQL_SA_PASSWORD environment variables.

Use these credentials and host port number mentioned in the MSSQL service in Docker compose file (e.g, localhost,14330) or check the article Querying your Sitecore SQL container to login into Sitecore SQL container databases.

Verify the the admin user superuser or default admin user admin in [Sitecore.Core].[dbo].[aspnet_Users] table

If your Sitecore Docker setup ADMIN user is not present e.g., in case of Sitecore Demo Edge setup the ADMIN user name is superuser and it's not present in above screen shot it means user not getting created.
Step 3: Reset the Sitecore Admin Password
If you are certain that the username is correct and it's present in [Sitecore.Core].[dbo].[aspnet_Users] but still receive the error, it is possible that the password has been changed or forgotten. To reset the Sitecore Admin password to "b" from SQL Server you can check following useful resources from Sitecore Community Members:
Step 4: Validate the Sitecore database credentials
The issue may lie with the database credentials used by Sitecore. Follow these steps to validate the database credentials:
- Open the Sitecore Docker .env file of your Sitecore Docker Setup
- Look for the SQL_SA_LOGIN and SQL_SA_PASSWORD environment variables
- Now you can Open the Docker Desktop and insept the Sitecore CM service to verify the Sitecore database credentials and it should matched with user id and password mentioned in the .env file
Step 5: Check the Sitecore logs
To troubleshoot any issues that may be occurring on your website. The logs can provide valuable information about errors, warnings, and other events that could impact the performance of your site. It is important to regularly review the logs to ensure that your website is running smoothly and to quickly address any issues that may arise.

For this, we have to check the Sitecore logs including the mssql-init service logs.

I didn't found any specific error details in the Sitecore CM logs but mssql-init service logs contains error related to SSL Certificate in StartInit.ps1, CreateSitecoreAdminUser.sql and CreateSitecoreAuthorUser.sql files present at docker/build/mssql-init/tools/scripts:
```
Finish deploying 'Sitecore.core' dacpac.
Invoke-Sqlcmd : A connection was successfully established with the server, but 
then an error occurred during the login process. (provider: SSL Provider, 
error: 0 - The certificate chain was issued by an authority that is not 
trusted.)
At C:\StartInit.ps1:76 char:10
+ $ready = Invoke-Sqlcmd -ServerInstance $SqlServer -Username $SqlAdmin ...
+          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (:) [Invoke-Sqlcmd], SqlExcept 
   ion
    + FullyQualifiedErrorId : SqlExceptionError,Microsoft.SqlServer.Management 
   .PowerShell.GetScriptCommand
```
It means some issue with execution of SQL scripts which create the Sitecore users.
Step 6: Validate MS SQL Image version
Thanks to Alexander Doroshenko from Sitecore, and he suggested to have latest version of MS SQL image and for this try running docker pull mcr.microsoft.com/mssql/server:2019-latest

If mssql-init logs contains error related to MS SQL connection trust like

Invoke-Sqlcmd : A connection was successfully established with the server, but 
then an error occurred during the login process. (provider: SSL Provider, 
error: 0 - The certificate chain was issued by an authority that is not 
trusted.)

Then we need to pass -TrustServerCertificate to all Invoke-SqlCmd commands in the following scripts

CreateSitecoreAdminUser.ps1
The CreateSitecoreAdminUser.ps1 script present at docker/build/mssql-init/tools/scripts/CreateSitecoreAdminUser.ps1 and following changes applied:
CreateSitecoreAuthorUser.ps1
The CreateSitecoreAuthorUser.ps1 script present at docker/build/mssql-init/tools/scripts/CreateSitecoreAuthorUser.ps1 and following changes applied:
StartInit.ps1
The StartInit.ps1 script present at docker/build/mssql-init/tools/scripts/StartInit.ps1 and following changes applied:

The code changes present at

Credit/References:

installation - Sitecore 9.3 Installing on Windows 11 returns certificate chain was issued by an authority that is not trusted. error - Sitecore Stack Exchange
Sitecore Slack

Pingback:

Building custom Sitecore images	Copying Files To And From Docker Containers - Baeldung	Understanding Docker Volumes
Sitecore/docker-examples: Companion code for the	Containers in Sitecore development	Sitecore Docker images repository
Installing / Running the Examples \| Sitecore Helix Examples	Best practices for writing Dockerfiles \| Docker Documentation	Docker: adding a file from a parent directory - Stack Overflow
Optimizing Your Dockerfile. The ordering of instructions in a… \| by Erik Kristensen \| Medium	Dockerfile Cheat Sheet - Kapeli	A tutorial on building a Docker image for Sitecore
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
invalid username or password	invalid username or password meaning	remote invalid username or password
sitecore password policy	invalid username or password sitecore	sitecore identity server invalid redirect_uri
sitecore default password	sitecore default admin password	disable sitecore identity server
sitecore enable identity server	sitecore login url	sitecore sif install
sitecore jss install	jss sitecore github	j_security_check error
sitecore jss commands	citrix incorrect username or password	okta sitecore
sitecore okta integration	sitecore item name valid characters	sitecore xconnect certificate
sitecore xconnect certificate expired	sitecore 10 identity server	sitecore an invalid/missing hash value was encountered
sitecore containers	sitecore docker container	sitecore docker compose
Walkthrough: Updating Managed Cloud	How to upgrade Sitecore Managed Cloud Containers	How do I upgrade my Sitecore 8 to 10?
How to setup Docker and Sitecore?	What are Sitecore containers?	What is the purpose of a .ENV file when deploying Sitecore to containers?
How do I upgrade from Sitecore 8.2 to 9?	What is the difference between Sitecore 8 and 9?	sitecore docker-compose
sitecore containers github	sitecore docker installation	sitecore installation guide
sitecore upgrade guide	sitecore container upgrade guide	sitecore docker-tools
sitecore xp1 mssql-init	How do I install Sitecore 10?	Why upgrade to Sitecore 10?
How do I update my Sitecore license?	What is the difference between Sitecore version 9 and 10?	sitecore docker cheat sheet
sitecore-id6	sitecore-id7	sitecore containers
Installation and Upgrade Guides - Sitecore Documentation	Sitecore Upgrades: Get the Latest Platform and Features	Why upgrade to Sitecore Experience Platform 10.1?
Why You Should Upgrade to Sitecore 10	Upgrade Sitecore Headless Services to version 19.0.0	Upgrade Sitecore Headless Services to version 21.0.0
How do I update Sitecore?	Why upgrade from Sitecore 9 to 10?	How do I upgrade from Sitecore 8.2 to 9?
Why upgrade to Sitecore 10?	Sitecore upgrade to latest version	sitecore upgrade guide
sitecore upgrade from 9.1 to 10	sitecore upgrade from 8.2 to 10	sitecore versions
sitecore 10.2 upgrade guide	sitecore version history	sitecore 10.3 release date
sitecore version support	Why you need an API Layer in Sitecore Composable Architecture?	Mind the order of instructions in a Dockerfile for Sitecore Containers
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Speed Up Sitecore Upgrade with PackageReference
Upgrade to Sitecore 9	Sitecore Version 10 - Sitecore Upgrade Process	Sitecore 10 Upgrade
sitecore docker	sitecore docker images	sitecore docker examples
github sitecore docker images	sitecore docker registry	sitecore docker getting started
sitecore docker github	sitecore docker cheat sheet	sitecore docker tools
sitecore docker compose	sitecore docker for traefik container is unhealthy	sitecore with docker
sitecore docker access to the path is denied	sitecore on docker	sitecore and docker
sitecore docker container	sitecore docker azure	sitecore-docker-tools-assets
sitecore 10 docker architecture	sitecore docker containers	sitecore docker container registry
sitecore docker custom images	sitecore docker container unhealthy	sitecore docker documentation
Sitecore JavaScript Rendering SDK (JSS) for Next.js	sitecore headless architecture	sitecore jss docker
sitecore disconnected mode	sitecore first jss	sitecore jss headless
sitecore jss helix	sitecore jss nextjs	sitecore nodejs
sitecore nextjs	sitecore ssr	next js sitemap
sitecore cancel publish	next js static site regeneration	next.js or gatsby
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Unlocking the Power: Utilizing API Proxies in Sitecore JSS Next.js Applications

2023-05-22T13:30:00.001+05:30

Building scalable and flexible web applications now relies heavily on APIs in modern web development. APIs are used to communicate with databases, other online apps, and third-party services. To handle certain functionality within their application, developers occasionally need to construct their own API endpoints.

In this post, one of the most well-liked server-side rendering frameworks for React, NextJS, is used to develop an API proxy.

What is a proxy?

An API proxy is a third-party server that stands in between a client and an API server and relays requests to the latter.

In other words, a proxy is an intermediary server that acts as a gateway between a user and the internet. It allows users to access websites and services while maintaining their anonymity and protecting their privacy.

Developers can take advantage of Next.JS's robust server-side rendering features to build scalable and effective API endpoints by setting up an API proxy.

If you are making calls to api directly from client-side code base, then call’s to api logged on the client’s browser with actual api end-point:

Using an API proxy in Next.JS can help simplify the process of making API requests from your client-side code and it’s also help you to avoid CORS issues and improve the security of your web application. With just a few lines of code, you can create a proxy that forwards requests to your API and returns the response to your client-side code. Let's start now!

Now we will explore the use of proxy in Next.JS applications.

Implementing a proxy in a Next.js app

There are many ways to implement the API proxy in Next.JS applications:

Implement API Proxy using next.config.js

An incoming request path can be mapped to a different destination path using Next.config.js rewrites. Rewrites serve as a URL proxy and conceal the destination path, giving the impression that the user hasn't moved around the website. Redirects, on the other hand, show the URL changes and reroute to a new page. You can use the rewrites key in next.config.js to use rewrites.

I have used the Sitecore’s PLAY! Summit Demo to implement the next.config.js rewrite.

Here we're using Next.js rewrites to match any requests to:

sitecore/api/* and rewrite them to {jssConfig.sitecoreApiHost}/sitecore/api/*, where jssConfig.sitecoreApiHost is your Content Delivery node HOST Name
/api/userdata/ redirected to https://dummyapi.io/data/v1/ which is an external API
Also next.js rewrites to match any requests to /api/proxydata/* and rewrite them to /apiProxy/*. Then, we're using server middleware (http-proxy-middleware) to apply the API proxy middleware to all requests matching /apiProxy/*

To implement API Proxy using Next.js rewrites in Sitecore Next.JS application, I have updated the Sitecore Next.JS application next.js.config file:

  async rewrites() {
              // When in connected mode we want to proxy Sitecore paths off to Sitecore
              return [
                // API endpoints
                {
                  source: '/sitecore/api/:path*',
                  destination: `${jssConfig.sitecoreApiHost}/sitecore/api/:path*`,
                },
                // media items
                {
                  source: '/-/:path*',
                  destination: `${jssConfig.sitecoreApiHost}/-/:path*`,
                },
                // visitor identification
                {
                  source: '/layouts/system/:path*',
                  destination: `${jssConfig.sitecoreApiHost}/layouts/system/:path*`,
                },
                // External user details
                {
                  source: '/api/userdata/:slug*',
                  destination: `https://dummyapi.io/data/v1/:slug*`,
                },
                // External API > user details
                {
                  source: '/api/proxydata/:path*',
                  destination: `/apiProxy/:path*`,
                },      
              ];
            },

To use API Proxy in Sitecore Next.JS application, I have created the Non-Sitecore page in Sitecore Next.JS application at \src\rendering\src\pages\integrations\users\index.tsx. In this file I have used the proxy api call /api/userdata/ for actual third-party api call https://dummyapi.io/data/v1/ inside the Next.js, getLayout function that allows you to dynamically set the layout for a specific page or group of pages. This allows you to define the layout on a per-page basis, so its also called as Per-Page Layouts.

Users.getLayout = function getLayout() {

            const [data, setData] = useState(null)

            useEffect(() => {
              fetch('/api/userdata/user?limit=10',{
                headers: {
                  "content-type": "application/json",
                  "app-id": " xxxxx",
                },
              })
                .then((res) => res.json())
                .then((data) => {
                  setData(data)
                })
            }, [])


            const sectionData = {
              fields:sectionJsonContent
            } as unknown as SectionProps;
            return (
              <NonSitecorePageLayout
              title="Integrations | Users"
            >
              <Section {...sectionData}/>
              <div><strong>Use of NextJS Config Rewrites</strong></div>
              { renderUser(data?.data)}
            </NonSitecorePageLayout>    
            );


          };

After getting the data from proxy api call, it’s passed to renderUser call to render the user related HTML block.

Now, actual api endpoint wouldn’t be visible to end users:

Implement API Proxy using Next.js middleware

The http-proxy-middleware is a Node.js package that provides a middleware to handle HTTP proxy requests. It is commonly used in web development to proxy requests from a client to a server.

To implement API proxy using middleware package http-proxy-middleware you have to first install the package at the route of your rendering code base (where Website\src\rendering\package.json present)
```
npm install http-proxy-middleware
      
```

Create a new API proxy middleware file called apiProxy.js (Website\src\rendering\apiProxy.js) in the root directory of your project at Website\src\rendering\

const { createProxyMiddleware } = require('http-proxy-middleware')

          module.exports = createProxyMiddleware({
            target: 'https://dummyapi.io/data/v1',
            changeOrigin: true,
            pathRewrite: {
              '^/api/proxydata': ''
            }
          })

In this example, we're creating a proxy middleware that proxies requests to the https://dummyapi.io/data/v1 API. The changeOrigin option is set to true to rewrite the Host header to the target URL.

Import the API proxy middleware in your Sitecore Next.js configuration file (usually next.config.js):

  async rewrites() {
                // When in connected mode we want to proxy Sitecore paths off to Sitecore
                return [
                  // External API > user details
                  {
                    source: '/api/proxydata/:path*',
                    destination: `/apiProxy/:path*`,
                  },      
                ];
              },
              async serverMiddleware() {
                return [
                  apiProxy,
                ]
              }

In this example, we're using Next.js rewrites to match any requests to /api/proxydata/* and rewrite them to /apiProxy/*. Then, we're using server middleware to apply the API proxy middleware to all requests matching /apiProxy/*.

I have used the proxy endpoint in Sitecore Next.JS application in the Non-Sitecore page at \src\rendering\src\pages\integrations\users\index.tsx. In this file I have used the useEffect to call the middleware proxy api call to fecth data from actual third-party api call https://dummyapi.io/data/v1/ inside the Next.js, getLayout function

Users.getLayout = function getLayout() {

   const [httpProxyData, setHttpProxyData] = useState(null)

    useEffect(() => {
      fetch('/api/proxydata/user?limit=10&page=3',{
        headers: {
          "content-type": "application/json",
          "app-id": " xxxxx",
        },
      })
        .then((res) => res.json())
        .then((httpProxyData) => {
          setHttpProxyData(httpProxyData)
        })
    }, [])

    const sectionData = {
      fields:sectionJsonContent
    } as unknown as SectionProps;
    return (
      <NonSitecorePageLayout
      title="Integrations | Users"
    >
      <Section {...sectionData}/>
      <div><strong>Use of Proxy Middleware</strong></div>
      { renderUser(httpProxyData?.data?)}
    </NonSitecorePageLayout>    
    );
  };

In this example, we make a request to /api/proxydata/user, which will be proxied to https://dummyapi.io/data/v1 by the API proxy middleware.

Implement API Proxy using API route

In Next.js, you can create API routes to handle server-side logic and respond to HTTP requests. API routes in Next.js are files placed in the /pages/api directory of your project.

Next.js's API routes offer a way to construct your API.

Any file located in the folder pages/api is mapped to /api/* and is handled more like an API endpoint than a page. They don't raise the size of your client-side bundle because they are server-side only bundles.

To implement API route, create a new folder called proxy inside the /pages/api directory at /pages/api/proxy. In this folder (/pages/api/proxy) create a new file and you can name it whatever you like, but let's use users.js for this example.

Open the users.js file and add the following code

import axios from 'axios'
          export default async function handler(req, res) {
            const response = await axios.get('http://localhost:3000/api/users')
            res.status(200).json({
                data: response.data,
              });    
          }

Save the file. Next.js automatically maps the file name to the corresponding route. For example, users.js will be accessible at /api/proxy/users.

In the above, we are making call to localhost api end point users which will provide the user’s details.

Let’s create another API end point at \pages\api\ which will make a call to actual third party api. For this create folder users inside the \pages\api and then create an index.ts file (\pages\api\users\index.ts) inside the users folder.

Add following code inside the index.ts file (\pages\api\users\index.ts)

export default async function handler(req: any, res:any) {
        const response= await fetch('https://dummyapi.io/data/v1/user?limit=10&page=2',{
          headers: {
            "content-type": "application/json",
            "app-id": " xxxxx",
          },
        })  
        const data = await response.json();
        res.status(200).json(data);
      }

In this example, we're creating a API endpoint which proxies requests to the https://dummyapi.io/data/v1 API and return the result to API route /api/proxy/users.

I have used the API route endpoint in Sitecore Next.JS application in the Non-Sitecore page at \src\rendering\src\pages\integrations\users\index.tsx. In this file I have used the useEffect to call the proxy api end route to fecth data from another api route which make call to actual api https://dummyapi.io/data/v1/ to get the data

Users.getLayout = function getLayout() {
           const [proxyData, setProxyData] = useState(null)

            useEffect(() => {
              fetch('/api/proxy/users',{
                headers: {
                  "content-type": "application/json",
                  "app-id": "xxxxx",
                },
              })
                .then((res) => res.json())
                .then((proxyData) => {
                  setProxyData(proxyData)
                })
            }, [])


            const sectionData = {
              fields:sectionJsonContent
            } as unknown as SectionProps;
            return (
              <NonSitecorePageLayout
              title="Integrations | Users"
            >
              <Section {...sectionData}/>
              <div><strong>Use of Proxy Route</strong></div>
              { renderUser(proxyData?.data?.data)}
            </NonSitecorePageLayout>    
            );
          };

In this example, we make a request to /api/proxy/users, which will be proxied to https://dummyapi.io/data/v1 by the API /api/users.

Summary

By following the above listed options and steps, you can create the proxies for your api calls.

API proxies in Next.js allow developers to easily route incoming requests to external APIs, while also providing a layer of abstraction that can help protect sensitive API keys and credentials. Additionally, API proxies can be used to implement CORS Handling, Server-Side Authorization and Authentication, Rate Limiting and Throttling, Response Manipulation and Caching including Microservices and Backend Integration.

Check out the resource mentioned above as well as this blog if you're curious to learn more about Sitecore JSS and NextJS.

The code base present at the GitHub branch

Credit/References:

API Reference: next.config.js Options \| Next.js (nextjs.org)	next.config.js Options: rewrites \| Next.js (nextjs.org)	Making Use of APIs in Your Front End \| by Patrick Pierre \| The Startup \| Medium
Setting up proxy in Next.js for DEV environment - DEV Community	next.config.js Options: rewrites \| Next.js (nextjs.org)	API client patterns every front-end developer need to know \| by Prasad Jayakumar \| Vue.js Developers \| Medium
How to use a proxy in Next.js - LogRocket Blog	javascript - Proxy to backend with default Next.js dev server - Stack Overflow	Next.JS — How To Proxy To Backend Server \| by Bhargav Bachina \| Bachina Labs \| Medium
Sitecore PLAY! Summit Demo Edge – GitHub	ChatGPT openai

Pingback:

sitecore next.js	sitecore jss nextjs	sitecore jamstack
sitecore nextjs sample website	sitecore jss dynamic placeholder	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
How to use a API proxy in Sitecore JSS NextJS Application	How to use a proxy in Next.js	Next.JS — How To Proxy To Backend Server
How To Protect Your API Key In Production With Next.js API Route	Next.JS — How To Proxy To Backend Server	Building a Reverse Proxy Server with Node.js
How to GET request data using proxy for API in NextJS	Next Js does not proxying API requests	Setting up proxy in Next.js for DEV environment
Proxy api requests w/o a custom server	Next.js: The Easiest Way to Create an API Proxy	The Easiest Way to Create an API Proxy in NextJS
API proxies Next.js	Next.js API proxy benefits	Secure API communication Next.js
CORS handling Next.js	Server-side authorization Next.js	API rate limiting Next.js
Response manipulation Next.js	Next.js microservices integration	Backend integration Next.js
API proxy security Next.js	api next.js	next.js proxy api
proxy api calls	js proxy api	api proxies meaning
proxy api next js	next js api example	next js context api example
next js auth example	next js authentication example	sitecore jss
next api proxy	next js api proxy	nextjs api proxy
nextjs proxy api requests	sitecore github	sitecore nextjs getting started
nextjs http proxy	sitecore nextjs graphql	sitecore jss getstaticprops
difference between proxy and api	what is a proxy in api	api proxy example
sitecore jss tutorial	sitecore jss api	what is proxy in rest api
sitecore jss routing	sitecore jss topology	next js api as proxy
sitecore jss example	sapi proxy vs gateway	sitecore jss architecture
next.js api proxy	next js proxy api requests	next js proxy api route
next js api best practices	npm sitecore jss	sitecore jss license
next js proxy api call	sitecore jss nextjs	sitecore-jss
next api example	why sitecore jss	sitecore jss proxy
sitecore jss site	sitecore jss nextjs page	sitecore nextjs
sitecore jss getting started	sitecore next.js	sitecore jss docs
jss sitecore github	sitecore jss headless	sitecore jss placeholder
jss next js	sitecore jss sxa	jss setup sitecore
sitecore jss node version	sitecore nextjs page	Walkthrough: Connecting a Next.js JSS app to Sitecore editors
next js sitecore	gitignore next js	pages next js
Architecture and APIs for integrating JSS Next.js apps	sitecore-jss-nextjs github	sitecore javascript rendering
next.js 404 page	next.js custom 404 page	next.js 404
Next.js API routes	Sitecore Headless SXA	Sitecore Headless NextJS SXA
Component-level data fetching in Sitecore JSS with Next.js	Sitecore NextJS Component Refactoring and Reusability	How to setup Secure Sitecore JSS Site
Getting Started Sitecore JSS with NextJS	How to setup JavaScript Services (JSS) for Sitecore 9	Deploying a Sitecore JSS-Next.js App with SSG & ISR to Vercel
Walkthrough: Creating a JSS Next.js application with the JSS	Sitecore JavaScript Rendering SDK (JSS) for Next.js	Sitecore JSS for Next.js differences from JSS for React
sitecore edge

Building a Non-Sitecore Page with Sitecore JSS and NextJS: A Step-by-Step Guide

2023-03-28T01:44:00.000+05:30

As the world of web development continues to evolve, dynamic sites have become increasingly popular for their ability to provide a more engaging and interactive user experience. There are numerous cases where we need to consume data from external sources (e.g., third party api) to display in the Sitecore Next.js based application where pages are not present in the Sitecore Content Tree.

In this tutorial, I will be focusing on building of Non-Sitecore Page and it’s Page Layout with Sitecore JSS and NextJS, and will be passing existing Sitecore NextJS components from the Non-Sitecore page to the Page Layout to render.

Introduction to Sitecore JSS and NextJS

Sitecore JSS is a headless CMS that provides developers with a way to build dynamic sites using React components. NextJS, on the other hand, is a React framework that provides server-side rendering and other performance optimizations.

By combining Sitecore JSS and NextJS, developers can build dynamic sites that are optimized for performance and user experience.

In this tutorial, I will be providing a step-by-step guide on how to build a NextJS page and it's layout, and reuse of existing components on Non-Sitecore Pages (NextJS page).

Understanding the basics of Sitecore JSS Pages

In Next.js, a page is a React component that is used to define the content and behavior of a specific route in your application. Next.js have pages in the form of physical files which are stored in the /pages directory.

The Sitecore JSS uses the Next.js routing system and all route related to Sitecore JSS application defined in the file /src/pages/[[...path]].tsx and this route helps Sitecore JSS framework to render Pages which are created in Sitecore.

Here are some key things to know about Sitecore JSS pages:

Pages are defined in JSON format: In Sitecore JSS, pages are defined as JSON objects that contain the data and metadata for a specific route in your application. The JSON object can contain fields, components, placeholders, and other data that define the content and presentation of the page
Sitecore JSS pages are created in the Sitecore content tree using a special page template. The page template contains fields and components that correspond to the JSON object structure for the page. When a JSS app requests a page, Sitecore retrieves the JSON object for the page and sends it back to the app
Pages can be created using a variety of data sources: Sitecore JSS pages can be created using data from a variety of sources, including Sitecore content, external APIs, and custom data sources. This allows developers to create dynamic and personalized pages that incorporate data from multiple sources
Pages can be enhanced with custom components: Sitecore JSS pages can be enhanced with custom components created using the JavaScript framework of your choice. These components can be shared across multiple pages to provide a consistent look and feel to your application
Pages can be previewed and published using Sitecore: Sitecore JSS pages can be previewed and published using the Sitecore Experience Editor and Content Editor. This allows content authors to create and manage JSS pages alongside traditional Sitecore content

Understanding the basics of NextJS Pages

Next.js is a popular React-based framework for building server-side rendered (SSR) web applications. Here are some important things to know about Next.js pages:

By default all Pages in a Next.js application are located in the /pages directory. Each page should have its own file with a unique name that matches the name of the route it represents. For example, the page for the /about route should be named about.js or about.tsx
Pages are automatically routed: Next.js automatically routes URLs to the appropriate page based on the file name in the /pages directory. For example, a URL of /about will automatically route to the about.js or about.tsx file in the /pages directory
Pages can be dynamic: Next.js allows you to create dynamic routes by using square brackets [ ] in the page file name. For example, a page file named posts/[foo].js would match any URL that starts with /posts/ followed by a variable foo. You can then access the value of the foo as a parameter in the getStaticProps() or getServerSideProps() function
Pages can have different export functions: In addition to the default export of the page component, Next.js allows you to export other functions such as getStaticProps(), getServerSideProps(), and getStaticPaths(). These functions can be used to fetch data or specify dynamic routes for the page
Pages can be enhanced with additional components: Next.js pages can be enhanced with additional React components such as layout components, navigation components, and footer components. These components can be shared across multiple pages to provide a consistent look and feel to your application

Overall, Next.js pages provide a powerful and flexible way to define the content and behavior of your application routes. By using the built-in routing and dynamic route features of Next.js, you can easily create complex and dynamic web applications with minimal configuration.

Steps to build a Non-Sitecore page and it’s Page Layout in Sitecore JSS NextJS Application

Sitecore JSS is a headless CMS that provides developers with a way to build dynamic sites using React components.

Sitecore JSS provides several benefits, including the ability to build dynamic sites quickly and easily, the ability to reuse components across multiple sites, and the ability to integrate with other Sitecore features and services.

Sitecore JSS uses the NextJS file-based routing system, so we can build pages which are not coming from Sitecore in the Sitecore NextJS application code base by creating the required page inside the Pages directory. When a file is added to the pages directory, it's automatically available as a route.

To create a Non-Sitecore JSS page and it’s Page Layout, you would typically follow these steps:

Go to the pages directory in the Sitecore NextJS project code at Website\src\rendering\src\ and create the integrations folder:
Here I am trying to create page hierarchy so created the integrations folder otherwise you can directly create page inside the pages directory/folder directly, e.g., the page for the /about route can be created as about.js or about.tsx.
Create the Website\src\rendering\src\pages\integrations\index.tsx file which will handle the route /integrations
```
├── src                 
   ├── pages
	├── integrations
		├── index.tsx     
```
The integrations page is NextJS Page so it will not be using Layout which are defined at Website\src\rendering\src\Layout.tsx for Sitecore pages.
In Next.js, a page layout is typically defined as a React component that wraps the actual page component. The layout component can then include common elements such as a header, footer, navigation, or any other component that you want to include on every page.
Create the folder NonSitecorePageLayout at Website\src\rendering\src\layouts\ to store the Layout for Non-Sitecore Page
Create the index.ts and NonSitecorePageLayout.tsx file inside the folder Website\src\rendering\src\layouts\NonSitecorePageLayout\, and these file will be used to create the skeleton of NextJS Layout page:
The details of Website\src\rendering\src\layouts\NonSitecorePageLayout\index.ts file
```
export { NonSitecorePageLayout as default } from "./NonSitecorePageLayout"
```
This page is using NonSitecorePageLayout.tsx which contains the structure of Layout page. With this way we can define other layout components and include in the layout page.

The details of NonSitecorePageLayout.tsx file

import Footer, { FooterProps } from "components/Navigation/Footer"
import MainNavigation, { MainNavigationProps } from "components/Navigation/MainNavigation"
import Head from "next/head"
import React, { FC } from "react"


type PageLayoutProps = {
  title?: string
}

export const NonSitecorePageLayout: FC<PageLayoutProps> = (props): JSX.Element => {
  const footerProps = {
    fields: {
      data: {
        item: {
          footerLogo: {},
        },
        links: {
          displayName: 'Footer',
          children: {
            results: [
              {
                displayName: 'Follow Us',
                children: {
                  results: [
                    {
                      displayName: 'Facebook',
                      icon: { value: 'faFacebookF' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Youtube',
                      icon: { value: 'faYoutube' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Twitter',
                      icon: { value: 'faTwitter' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Instagram',
                      icon: { value: 'faInstagram' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Linkedin',
                      icon: { value: 'faLinkedin' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                  ],
                },
              },
              {
                displayName: 'PLAY! Summit',
                children: {
                  results: [
                    {
                      displayName: 'Home',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{68DC89A4-1B04-59A8-9C4E-3B49D6C61052}',
                          },
                        },
                      },
                    },
                    {
                      displayName: 'Sessions',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en/sessions',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{68DC89A4-1B04-59A8-9C4E-3B49D6C61052}',
                          },
                        },
                      },
                    },
                    {
                      displayName: 'Speakers',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en/speakers',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{1F4B781B-F2A5-5647-99DF-C0C369162C4D}',
                          },
                        },
                      },
                    },
                    {
                      displayName: 'Vendors',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en/vendors',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{774E44E8-0F30-5879-B847-AD233FFB41AA}',
                          },
                        },
                      },
                    },
                    {
                      displayName: 'Sponsors',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en/sponsors',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{66C99E47-7BBF-52D1-B1D7-4662B850744A}',
                          },
                        },
                      },
                    },
                    {
                      displayName: 'About Us',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en/about-us',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{2717574C-48A0-5469-85A8-A332DF71F1E4}',
                          },
                        },
                      },
                    },
                    {
                      displayName: 'News',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: {
                          value: {
                            href: '/en/news',
                            text: '',
                            anchor: '',
                            linktype: 'internal',
                            class: '',
                            title: '',
                            target: '',
                            querystring: '',
                            id: '{0E4A63DA-7496-557E-BF80-5BD52255E431}',
                          },
                        },
                      },
                    },
                  ],
                },
              },
              {
                displayName: 'Join Us',
                children: {
                  results: [
                    {
                      displayName: 'Book Tickets',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Become a Sponsor',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Become a Vendor',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                  ],
                },
              },
              {
                displayName: 'Get Support',
                children: {
                  results: [
                    {
                      displayName: 'FAQ',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                    {
                      displayName: 'Tech Support',
                      icon: { value: '' },
                      title: { value: '' },
                      field: {
                        jsonValue: { value: { href: '' } },
                      },
                    },
                  ],
                },
              },
            ],
          },
        },
      },
    },
  } as unknown as FooterProps;

  const mainNavProps = {
    fields: {
      data: {
        item: {
          id: '4790380A3F0C443AA954269ECB2D5566',
          path: '/sitecore/content/EdgeWebsite/Data/Config',          
          headerLogo: {
            jsonValue: {
              value: {
              mediaid:'',
              thumbnailsrc: 'https://playsummit.sitecoresandbox.cloud/api/gateway/30940/thumbnail',
              src: 'https://playsummit.sitecoresandbox.cloud/api/public/content/83a458a1cb54401cab2308488bbd1031?v=bdb6447b&t=web',
              alt: 'PLAY! Summit logo - stacked light grey',
              height: '113',
              width: '274'
            }              
            },
            alt: 'PLAY! Summit logo - stacked light grey'
          },
        },
        links: {
          displayName: 'Main Navigation',
          children: {
            results: [
              {
                displayName: 'Sessions',
                field: {
                  jsonValue: {
                    value: {
                      href: '/sessions',
                      class: '',
                      id: '{68DC89A4-1B04-59A8-9C4E-3B49D6C61052}',
                      querystring: '',
                      anchor: '',
                      target: '',
                      title: '',
                      linktype: 'internal',
                      text: ''
                    }
                  }
                }
              },
              {
                displayName: 'Speakers',
                field: {
                  jsonValue: {
                    value: {
                      href: '/speakers',
                      class: '',
                      id: '{1F4B781B-F2A5-5647-99DF-C0C369162C4D}',
                      querystring: '',
                      anchor: '',
                      target: '',
                      title: '',
                      linktype: 'internal',
                      text: ''
                    }
                  }
                }
              },
              {
                displayName: 'Vendors',
                field: {
                  jsonValue: {
                    value: {
                      href: '/vendors',
                      class: '',
                      id: '{774E44E8-0F30-5879-B847-AD233FFB41AA}',
                      querystring: '',
                      anchor: '',
                      target: '',
                      title: '',
                      linktype: 'internal',
                      text: ''
                    }
                  }
                }
              },
              {
                displayName: 'Sponsors',
                field: {
                  jsonValue: {
                    value: {
                      href: '/sponsors',
                      class: '',
                      id: '{66C99E47-7BBF-52D1-B1D7-4662B850744A}',
                      querystring: '',
                      anchor: '',
                      target: '',
                      title: '',
                      linktype: 'internal',
                      text: ''
                    }
                  }
                }
              },
              {
                displayName: 'About Us',
                field: {
                  jsonValue: {
                    value: {
                      href: '/about-us',
                      class: '',
                      id: '{2717574C-48A0-5469-85A8-A332DF71F1E4}',
                      querystring: '',
                      anchor: '',
                      target: '',
                      title: '',
                      linktype: 'internal',
                      text: ''
                    }
                  }
                }
              },
              {
                displayName: 'Integrations',
                field: {
                  jsonValue: {
                    value: {
                      href: '/integrations',
                      class: '',
                      id: '',
                      querystring: '',
                      anchor: '',
                      target: '',
                      title: '',
                      linktype: 'external',
                      text: ''
                    }
                  }
                }
              }              
            ]
          }
        },
      },
    },
  } as unknown as MainNavigationProps;

  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <title>{props.title || "Play! Summit"}</title>
      </Head>
      <header>
        <MainNavigation {...mainNavProps}/>
      </header>      
        {props.children}
      <footer>
        <Footer {...footerProps} />
      </footer>
    </>
  )
}

In this file we have defined the page structure of the page including the use of common components like header and footer so that it will be available to all pages who will be using this layout:

Now go back to the integration page (Website\src\rendering\src\pages\integrations\index.tsx) created in step-2 and use the newly created layout

import Section, { SectionProps } from 'components/PageContent/Section';
import NonSitecorePageLayout from 'src/layouts/NonSitecorePageLayout';
import sectionJsonContent from '../../staticData/sectionComponents.Data.Integrations.Page.json';

const Integrations = (): JSX.Element => {
  return (
    <>
    </>
  );
};

Integrations.getLayout = function getLayout() {
  const sectionData = {
    fields:sectionJsonContent
  } as unknown as SectionProps;

  return (
    <NonSitecorePageLayout
    title="Integrations"
  >
    <Section {...sectionData}/>
    
  </NonSitecorePageLayout>    
  );
};

export default Integrations;

Here we are using Next.js, getLayout function that allows you to dynamically set the layout for a specific page or group of pages. This allows you to define the layout on a per-page basis, so its also called as Per-Page Layouts.

The getLayout function is typically defined in a layout component and returns the layout component with any additional props that you want to pass down to the children components. Here's an example:

// components/Layout.js

const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  )
}

const getLayout = page => {
  return (
    <Layout>
      {page}
    </Layout>
  )
}

export default Layout
export { getLayout }

In this page, we are using layout component and passing the layout properties and component to layout component so that it will render inside the layout

The static data for Section component defined at Website\src\rendering\src\staticData\sectionComponents.Data.Integrations.Page.json

{
  "brightness": {
    "value": "light"
  },
  "callToActionLink": {
    "value": {
      "href": ""
    }
  },
  "content": {
    "value": "<p class=\"font-bold\">\r\nThis page will show the listing of different types of integrations on non-Sitecore pages\r\n</p>"
  },
  "cssClass": {
    "value": "left-full"
  },
  "title": {
    "value": "This page is non-Sitecore Page"
  }
}

The output of the Non-Sitecore page /integrations ( Website\src\rendering\src\pages\integrations\index.tsx) https://www.edge.localhost/integrations

Summary

By following the above listed steps, you can create the pages for your Sitecore NextJS application which are not part of your Sitecore Content Tree.

The Sitecore JSS and NextJS framework provides flexibility to extend your Layout and Pages as per your need to build a dynamic Sitecore JSS website which can provide numerous benefits, including improved performance, scalability, and user experience.

If you’re interested in learning more about Sitecore JSS and NextJS, be sure to check out the resources listed above and this blog site.

The code base present at the GitHub branch

Credit/References:

Creating a JSS Next.js application with the JSS CLI	Connecting a Next.js JSS app to Sitecore editors	Preparing the list of pages for static generation or export in
Routing and page composition in JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore	Creating a new component in a JSS Next.js app using
Architecture and APIs for integrating JSS Next.js apps	Prefetch Sitecore data with React Query	NextJS Image Basic Features: Image Optimization
nextConfig issue while building or running the project	how to add domains to next.config.js for "next/image" while using a plugin	nextConfig issue while building or running the project
Content Creation using ChatGPT OpenAI
How to Create Pages in Next.js?	NextJS Pages	NextJS Page Layouts
Sitecore NextJS Component Refactoring and Reusability	Routing and page composition in JSS Next.js apps	Sitecore PLAY! Summit Demo Edge – GitHub

Pingback:

sitecore next.js	sitecore jss nextjs	sitecore jamstack
sitecore nextjs sample website	sitecore jss dynamic placeholder	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
unit test next js	sitecore nvelocity	sitecore 9 exam questions and answers
nextjs best practices github	next js folder structure best practices	nextjs api best practices
next js logging best practices	next js styling best practices	next js tips
next js routing best practices	next js authentication best practices	next js api best practices
next js best practices	next js css best practices	sitecore graphql ui
sitecore support jobs	sitecore graphql search query	sitecore graphql authentication required
sitecore graphql example	sitecore graphql pagination	sitecore graphql api
sitecore graphql cache	sitecore graphql schema	sitecore graphql server cannot be reached
sitecore graphql configuration	experience accelerator sitecore	sitecore 8 end of life
sitecore 9 end of life	sitecore graphql contextitem	sitecore experience edge api
sitecore-nextjs github	sitecore nextjs forms	sitecore jss
sitecore jss experience editor	dotnet new sitecore nextjs gettingstarted	sitecore ssg
sitecore jss cli	sitecore github	sitecore nextjs getting started
sitecore nextjs placeholder	sitecore nextjs graphql	sitecore jss getstaticprops
sitecore jss richtext	sitecore pages	sitecore-jss-react
sitecore jss tutorial	sitecore jss api	sitecore jss templates
sitecore jss routing	sitecore jss topology	sitecore jss 404 page
sitecore jss example	sitecore jss personalization	sitecore jss architecture
jss sitecore first	sitecore jss demo site	sitecore jss dictionary
sitecore forms jss	npm sitecore jss	sitecore jss license
sitecore jss manifest	sitecore jss nextjs	sitecore-jss
sitecore 10 jss	why sitecore jss	sitecore jss proxy
sitecore jss site	sitecore jss nextjs page	sitecore nextjs
sitecore jss getting started	sitecore next.js	sitecore jss docs
jss sitecore github	sitecore jss headless	sitecore jss placeholder
jss next js	sitecore jss sxa	jss setup sitecore
sitecore jss node version	sitecore nextjs page	sitecore page not found
next js sitecore	gitignore next js	pages next js
wordpress next.js	sitecore-jss-nextjs github	sitecore javascript rendering
next.js 404 page	next.js custom 404 page	next.js 404
next js 500 page	Sitecore Headless SXA	Sitecore Headless NextJS SXA
Component-level data fetching in Sitecore JSS with Next.js	Sitecore NextJS Component Refactoring and Reusability	How to setup Secure Sitecore JSS Site
sitecore edge

How to upgrade Sitecore Containers setup

2023-03-13T15:14:00.001+05:30

The Sitecore® Experience Platform™ (XP) is the leading digital experience platform and it provides integrated end-to-end solution like native content management, omnichannel headless delivery, customer-interaction and engagement data, and personalization and analytics, to build seamless digital experience for your end users.

Any product upgrade always provides the best solution with an advance set of technologies / tools, new capabilities, get the latest updates and fixes with mainstream support, and quality improvements.

To start with Sitecore Upgrade Process, we should have discussion with IT and Business on need of Sitecore upgrade, existing issues and other items which you can find in my previous Sitecore Upgrade Process blog series.

This article describes how you can upgrade existing Sitecore container based environment to latest version of Sitecore:

Table of Contents

Upgrade Preparations

Prerequisites for upgrading

Upgrade on-prem Sitecore Databases in Containers

The connection strings to databases
Docker Compose Upgrade deployment

Upgrade existing Sitecore Docker Container Setup Databases on Kubernetes

Upgrade Sitecore Docker Container Setup

Upgrade Preparations

Go to the Installation and Upgrade Guides or Sitecore downloads site and download the latest Sitecore Version Container Deployment Package and Upgrade Container Deployment Guide
Go through the Sitecore Upgrade Container Deployment Guide (SC-XP-[Version Number]-Upgrade-Container-Deloyment-Guide-en.pdf)
Validate the Software requirements
Go through the release notes of latest Sitecore version

Prerequisites for upgrading

Backup the databases
Check the Prerequisites steps in the Sitecore Upgrade Container Deployment Guide
Download and extract the Sitecore Container Deployment package
The above Deployment package provides the Sitecore upgrade Docker Compose files and Sitecore Kubernetes specification files for each Sitecore topology:

Upgrade on-prem Sitecore Databases in Containers

In this article we will upgrade the Sitecore Docker Container XP1 topology, so go to the location SitecoreContainerDeployment.[Version Number]\compose\ltsc2019\upgrade\xp1 and open the upgrade.env file and understand the environment variables list for Sitecore upgrade container:

Name	Description	Default Value
COMPOSE_PROJECT_NAME	The name of the topology.	sitecore-xm(p)1
SITECORE_DOCKER_REGISTRY	The target registry.	scr.sitecore.com/sxp/
SITECORE_VERSION	The Sitecore version that you want to upgrade to.	10.3.X-[your Windows version] For example, 10.3.X-ltsc2019 or 10.3.X-2004
SQL_DATABASE_PREFIX	The prefix that is used to resolve the Sitecore database names.	Sitecore
SQL_SERVER	The SQL Server name. For more information about how to specify the connection strings for SQL Server, see Troubleshoot connecting to the SQL Server Database Engine
SQL_USERNAME	The SQL Server administrator username.
SQL_PASSWORD	The SQL administrator user password.
COMPOSE_PROJECT_NAME	The name of the topology.	sitecore-xm(p)1
IS_ALWAYS_ENCRYPTED	Whether Always Encrypted is configured for the databases to upgrade.
PROCESSING_ENGINE_TASKS_DATABASE_USERNAME	The name of the least privileged user that exists in the processing_engine_tasks database.
DATABASE_UPGRADE_FROM_VERSION	The Sitecore version from which you are going to upgrade the database	10.1.0
DATABASE_UPGRADE_TO_VERSION	The Sitecore version to which you are going to upgrade the database	10.3.0
SITECORE_LICENSE	The Sitecore license file converted to base 64 string through PowerShell script.
ISOLATION	Override for Docker isolation level Possible values: default, hyperv, process	default
Reference: Sitecore XP 10.3.0 Upgrade Container Deloyment Guide

I have used following values to upgrade Sitecore 10.1 Docker Container XP1 topology to Sitecore 10.3 Docker Container XP1 topology:

COMPOSE_PROJECT_NAME=amitkumar
            SITECORE_DOCKER_REGISTRY=scr.sitecore.com/sxp/
            SITECORE_VERSION=10.3-ltsc2019
            SQL_DATABASE_PREFIX=Sitecore
            SQL_SERVER=mssql
            SQL_USERNAME=sa
            SQL_PASSWORD=b
            IS_ALWAYS_ENCRYPTED=
            PROCESSING_ENGINE_TASKS_DATABASE_USERNAME=
            DATABASE_UPGRADE_FROM_VERSION=10.1.0
            DATABASE_UPGRADE_TO_VERSION=10.3.0
            SITECORE_LICENSE=
            ISOLATION=default

The value of SITECORE_LICENSE variable is compress and Base64 encode value of Sitecore license file. You can generate this value by passing the Sitecore license file path to function ConvertTo-CompressedBase64String (Appendix A – License file compression and encoding PowerShell helper function) mentioned in the Sitecore Upgrade Container Deployment Guide file.

The connection strings to databases:

To upgrade the Sitecore Docker Container, docker-compose.upgrade.yml contains the connection strings of the SQL databases that must be upgraded. You can take the connection strings from your docker-compose.yml or docker-compose.override.yml file based on your setup:

services:
  mssql-upgrade:
    image: ${SITECORE_DOCKER_REGISTRY}sitecore-xp1-mssql-upgrade:${SITECORE_VERSION}
    environment:
      IS_ALWAYS_ENCRYPTED: ${IS_ALWAYS_ENCRYPTED}
      PROCESSING_ENGINE_TASKS_DATABASE_USERNAME: ${PROCESSING_ENGINE_TASKS_DATABASE_USERNAME}
      Sitecore_ConnectionStrings_Core: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Core;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Master: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Master;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Web: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Web;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Experienceforms: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Experienceforms;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Processing_Engine_Tasks: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Processing.Engine.Tasks;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Messaging: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Messaging;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Reporting: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Reporting;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Xdb_Collection_Shard0: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Xdb.Collection.Shard0;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Xdb_Collection_Shard1: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Xdb.Collection.Shard1;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Sitecore_ConnectionStrings_Marketingautomation: Data Source=${SQL_SERVER};Initial Catalog=${SQL_DATABASE_PREFIX}.Marketingautomation;User ID=${SQL_USERNAME};Password=${SQL_PASSWORD}
      Database_Upgrade_From_Version: ${DATABASE_UPGRADE_FROM_VERSION}
      Database_Upgrade_To_Version: ${DATABASE_UPGRADE_TO_VERSION}
      Sitecore_License: ${SITECORE_LICENSE}
    isolation: ${ISOLATION}

If you are using any docker default network in your docker-compose files then you have to define the same network in the docker-compose.upgrade.yml otherwise upgrade process wouldn’t be able to connect with your SQL server databases and you will get the error:

ERROR: Executing 'C:\data\DatabaseUpgradeScripts\10.3.0\CMS_security.sql' file.
mssql-upgrade_1  | Invoke-Sqlcmd : A network-related or instance-specific error occurred while
mssql-upgrade_1  | establishing a connection to SQL Server. The server was not found or was not
mssql-upgrade_1  | accessible. Verify that the instance name is correct and that SQL Server is
mssql-upgrade_1  | configured to allow remote connections. (provider: Named Pipes Provider,
mssql-upgrade_1  | error: 40 - Could not open a connection to SQL Server)

Docker Compose Upgrade deployment:

Before execution of powershell scripts, you have to make sure that your Docker Desktop running in the Windows container mode
You will find compose-init.ps1 in the folder \compose\ltsc2019\upgrade\xp1. This powershell script will update the Sitecore upgrade environment file (upgrade.env) with required Sitecore 10.3 related environment variables and it’s not mandatory to execute this file because docker-compose file not using this

Good to place, required Sitecore upgrade files like upgrade.env, compose-init.ps1 and docker-compose.upgrade.yml in the same folder where the other normal Sitecore Docker Compose files present e.g. docker-compose.yml, etc..

              ├── docker-compose.yml                 
              ├── docker-compose.override.yml               
              ├── init.ps1                   
              ├── .env                   
              ├── up.ps1              
              ├── docker-compose.upgrade.yml
              ├── upgrade.env
              └── compose-init.ps1

After adding required details to upgrade.env, compose-init.ps1 and docker-compose.upgrade.yml files, execute the following command to the RUNNING containers (your old Sitecore container setup should be running), to upgrade the Sitecore Docker Setup on your local system
```
docker-compose.exe -f .\docker-compose.upgrade.yml --env-file .\upgrade.env up
            
```
Docker Compose download the Sitecore upgrade container image from the Sitecore Container Registry and deploy this container to upgrade the SQL databases of your existing Sitecore XP installation.

When the upgrade process is completed, the upgrade container stops.

With the help of above Sitecore upgrade container changes, you can upgrade Sitecore XP and xConnect databases that are stored on-prem in containers.

Upgrade existing Sitecore Docker Container Setup Databases on Kubernetes

To upgrade the existing Sitecore Databases on Kubernetes you have to use the upgrade setup present at SitecoreContainerDeployment.[Version Number]\k8s\ltsc2019\upgrade\ based on your topology:
You can include this Kubernetes upgrade job into your build pipeline and execute once.

After successful completion of upgrade, you must delete the Kubernetes upgrade job.

Upgrade Sitecore Docker Container Setup

In the above sections, we learned how to upgrade the existing Sitecore databases which have historical data.

Generally, you will not setup the Sitecore containers from scratch on higher environment and you do the layering of any upgrade so previous steps will be helpful in those cases.

In case of local development setup, each developer has its own Sitecore instance on their system which they used for development and initial website structure (Sitecore Content Hierarchy) with all required templates or other items would be serialized.

If any new template or pre-requisite Sitecore Item e.g., common list should be committed in the repository and synced with the instance when the Docker instance is started.

On the higher environment generally initial sync required for whole content serialization, and after that you can sync only required Sitecore items, e.g., Sitecore templates or any Sitecore item list or Sitecore Rendering, etc.

These Sitecore serialized content would be deployed to Sitecore setup. In these cases, if you are planning to upgrade your Sitecore Container setup then you have to upgrade the Sitecore container setup (Sitecore Docker Compose and Docker Files) also and you don’t need to run the previous Sitecore Container Database upgrade step.

To upgrade your Sitecore Container solution:

Open the latest Sitecore Version Container Deployment Package downloaded in Upgrade Preparations section and open the XP1 topology:
The above setup will be plain vanilla Sitecore latest version Container setup and wouldn’t be having details about any modules.
If you are using Sitecore modules like CLI, SPE or Headless then better to take references of:

Sitecore/Sitecore.Demo.Edge:This repository is used for the primary Sitecore Edge for Content Hub and Experience Management
Sitecore/docker-examples
Update for Sitecore 10.3 ltsc2019 and ltsc2022 by AmitKumar-AK
Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js > sitecore.nextjs.gettingstarted project
The above GitHub repos will provide you the details of latest Sitecore Version Container setup.
Compare your .env file with plain vanilla Sitecore Container Setup and above GitHub repo .env files, and include the new/updated entries in terms of new parameters and updated values, e.g., Sitecore Version, Container images, etc..
Compare your docker-compose.yml file with plain vanilla Sitecore Container Setup and above GitHub repo docker-compose.yml files, and generally there will be new services or change in the image name and versions or new environment variables for services
Same way you have to compare the docker-compose.override.yml and Docker file for each role inside the docker\build folder:
In the docker setup, sometimes new folders need to be created to include new functionalities, e.g. Sitecore device detection etc.

And for this, details needs to be added in the docker-compose-override.yml in specific Sitecore Roles:
In Sitecore Docker Setup, you will be using the published Sitecore Container Images and different Sitecore Modules that are available as Docker asset images to build custom images and each image have tags with respect to Sitecore version, which needs to be validated during upgrade.

For example, in Sitecore 10.0.0-1809 you are using the Sitecore SXA Asset image sxa-xp1-assets with version 10.0.0-1809, so you have to find Sitecore SXA Asset image (version 10.3-1809) for Sitecore 10.3-ltsc2022 and for this you have to search in the official published images SITECORE-TAGS.md

The Sitecore SXA Asset image for version 10.0.0-1809 but not present for version 10.3-1809. In this case, you have to check the updated Sitecore Docker-Compose file for Sitecore SXA Asset image name and it’s mentioned as sitecore-sxa-xp1-assets instead of sxa-xp1-assets:

The same way, you have to validate all required Sitecore Container images for latest Sitecore Version by considering the details of different services at Sitecore Docker Compose file:

Once, you have updated all required Sitecore Container images for all Sitecore roles, then you have to execute the up script to build your newly upgraded Sitecore environment.

Speaking from past experience, you will have to execute up script many times to build the successful upgraded Sitecore Container environment 😊

Sitecore 10.3 Container Repository

Credit/References:

Sitecore Upgrades: Get the Latest Platform and Features \| Sitecore	Why upgrade to Sitecore Experience Platform 10.1? \| Sitecore	How to build Sitecore Custom Image present
Published Sitecore Container images details > SITECORE-TAGS.md	Sitecore Container modules assets details	Sitecore Docker images repository \| Sitecore
Sitecore Container Upgrade Guide	GitHub Repository of Sitecore Docker images

Pingback:

Building custom Sitecore images	Copying Files To And From Docker Containers - Baeldung	Understanding Docker Volumes
Sitecore/docker-examples: Companion code for the	Containers in Sitecore development	Sitecore Docker images repository
Installing / Running the Examples \| Sitecore Helix Examples	Best practices for writing Dockerfiles \| Docker Documentation	Docker: adding a file from a parent directory - Stack Overflow
Optimizing Your Dockerfile. The ordering of instructions in a… \| by Erik Kristensen \| Medium	Dockerfile Cheat Sheet - Kapeli	A tutorial on building a Docker image for Sitecore
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
sitecore containers	sitecore docker container	sitecore docker compose
Walkthrough: Updating Managed Cloud	How to upgrade Sitecore Managed Cloud Containers	How do I upgrade my Sitecore 8 to 10?
How to setup Docker and Sitecore?	What are Sitecore containers?	What is the purpose of a .ENV file when deploying Sitecore to containers?
How do I upgrade from Sitecore 8.2 to 9?	What is the difference between Sitecore 8 and 9?	sitecore docker-compose
sitecore containers github	sitecore docker installation	sitecore installation guide
sitecore upgrade guide	sitecore container upgrade guide	sitecore docker-tools
sitecore xp1 mssql-init	How do I install Sitecore 10?	Why upgrade to Sitecore 10?
How do I update my Sitecore license?	What is the difference between Sitecore version 9 and 10?	sitecore docker cheat sheet
sitecore-id6	sitecore-id7	sitecore containers
Installation and Upgrade Guides - Sitecore Documentation	Sitecore Upgrades: Get the Latest Platform and Features	Why upgrade to Sitecore Experience Platform 10.1?
Why You Should Upgrade to Sitecore 10	Upgrade Sitecore Headless Services to version 19.0.0	Upgrade Sitecore Headless Services to version 21.0.0
How do I update Sitecore?	Why upgrade from Sitecore 9 to 10?	How do I upgrade from Sitecore 8.2 to 9?
Why upgrade to Sitecore 10?	Sitecore upgrade to latest version	sitecore upgrade guide
sitecore upgrade from 9.1 to 10	sitecore upgrade from 8.2 to 10	sitecore versions
sitecore 10.2 upgrade guide	sitecore version history	sitecore 10.3 release date
sitecore version support	Why you need an API Layer in Sitecore Composable Architecture?	Mind the order of instructions in a Dockerfile for Sitecore Containers
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Speed Up Sitecore Upgrade with PackageReference
Upgrade to Sitecore 9	Sitecore Version 10 - Sitecore Upgrade Process	Sitecore 10 Upgrade
sitecore docker	sitecore docker images	sitecore docker examples
github sitecore docker images	sitecore docker registry	sitecore docker getting started
sitecore docker github	sitecore docker cheat sheet	sitecore docker tools
sitecore docker compose	sitecore docker for traefik container is unhealthy	sitecore with docker
sitecore docker access to the path is denied	sitecore on docker	sitecore and docker
sitecore docker container	sitecore docker azure	sitecore-docker-tools-assets
sitecore 10 docker architecture	sitecore docker containers	sitecore docker container registry
sitecore docker custom images	sitecore docker container unhealthy	sitecore docker documentation
Sitecore JavaScript Rendering SDK (JSS) for Next.js	sitecore headless architecture	sitecore jss docker
sitecore disconnected mode	sitecore first jss	sitecore jss headless
sitecore jss helix	sitecore jss nextjs	sitecore nodejs
sitecore nextjs	sitecore ssr	next js sitemap
sitecore cancel publish	next js static site regeneration	next.js or gatsby
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Why you need an API Layer in Sitecore Composable Architecture?

2023-02-24T12:00:00.001+05:30

The Sitecore Composable Architecture opens-up new way of developing the enterprise level applications, i.e., more agile, more flexible, more reliable, and scalable.

In monolithic application, we generally build all application functionalities as a part of single products, but in composable architecture we can "pick-and-choose” best suitable offerings / options/ products based on enterprise need, and these products are independent products based on API-first architecture to orchestrate the digital entity from multiple sources / vendors.

The Sitecore composable architecture provides flexibility for organizations to build the innovative products / applications based on a new set of technologies and multiple offerings, which will help to serve the changing market condition, and generates the business growth to increase the revenue with existing and new product combinations.

The Sitecore provides a set of API-first individual packaged-business-capabilities (PBCs), which includes email marketing, customer data platform (CDP), e-commerce, search, or a combination of many other products:

Table of Contents

Sitecore Composable Architecture Through an API-Based Approach

How To Implement Custom API for Sitecore Composable Architecture?

How To enable Swagger / OpenAPI Documentation in existing Custom API?

Understand Custom API’s LaunchSettings.json file

Run ASP.NET Core Web API within Docker Container from Visual Studio

Run ASP.NET Core Web API within Docker Container using Commands

Run ASP.NET Core Web API within Container using DockerCompose

Run ASP.NET Core Web API within Sitecore Container Network Setup

There are many benefits of going with Sitecore Composable Products offerings and some are:

Solution freedom
Lower total cost of ownership
Faster time to market
Customer Centric
Flexible development / Technology freedom
Faster delivery cycles
Flexibility to integrate with existing marketing stack

While moving to Sitecore Composable DXP, it’s very important that team members should e aware of integration / development / deployment of these products, and Sitecore’s Thomas Desmond ( ThomasJDesmond) explains 3 things developers should care about in the composable DXP space:

As most of the Composable DXP products are Application Programming Interface (API) -first products and you can consume APIs to perform actions on these systems to retrieve or send data using an Application Programming Interface (API).

For this, your application will make calls to these systems which required lines of code every time whenever you need to make a call from different places of your application which will lead to duplicate code, and maintainability will become hard. If any changes to these API, then we have to update the code every place, and testing of whole applications required because we are touching the code at many places.

Without the use of centralized location to call different composable products APIs, you will be out of the competition because you will take lots of time to go live with the changes. The whole purpose of composable architecture is to quickly assemble and reassemble as per need, and provide seamless integration with different components (or “microservices“).

Sitecore Composable Architecture Through an API-Based Approach

From above, we got the understanding of Sitecore Compostable Products and it’s API-first ecosystem, and to consume these services we have required the custom Application Programming Interface (API) endpoint which will internally connect with all Sitecore Compostable Products to build an organized system which can be managed centrally.

In near future may be new custom API endpoints or microservices evolve then connectivity/ management of front-end application with multiple endpoints would be difficult so good to have virtual layer or tool between a frontend applications and backend services called API Gateway which takes care of requests, acts as a reverse proxy, routing requests from clients to services. It also takes care of many cross-cutting tasks such as authentication, SSL termination, and rate limiting:

In case of Sitecore based implementation, the headless application can call single API endpoint which internally calls the Sitecore composable product API’s or individual Sitecore composable API behind the API gateway, and it’s totally depending upon the organization and technical team to adopt certain design patterns:

How To Implement Custom API for Sitecore Composable Architecture?

Now, we will learn how to create the custom API endpoint with Swagger (OpenAPI) which is a language-agnostic specification for describing REST APIs and deploys Custom API to Sitecore Container Network with custom domain name.

Create the ASP.NET Core web API
1. Start Visual Studio and select Create a new project
2. In the Create a new project dialog, select ASP.NET Core Web API > Next
3. In the Configure your new project dialog, enter Project name > Next
4. In the Create a new ASP.NET Core Web API Additional dialog, select
  - Framework as.NET Core 5.0 in the dropdowns
  - Configure for HTTPS, Enable Docker, Docker OS as Windows, Enable OpenAPI support
  - Create
5. Build and run the application
6. Custom API with IIS Express show like this with random PORT number

How To enable Swagger / OpenAPI Documentation in existing Custom API?

If you have existing ASP.NET Core Web API then you can follow the steps at Configuring and Using Swagger UI in ASP.NET Core Web API to enable the Swagger.

Understand Custom API’s LaunchSettings.json file

The launchSettings.json file present in Properties folder at [Project Folder]\Properties\launchSettings.json and this file provides details about how your ASP.NET Core API application can be launched it means command to execute, whether the browser should be opened, which environment variables should be set, and so on

When you try to run the application from Visual Studio, you can select which profile needs to be used to RUN the application

You can check more details about launchSettings.json file at ASP.NET Core launchSettings.json file.

Run ASP.NET Core Web API within Docker Container from Visual Studio

You can run the api within Docker from Visual Studio itself and for this you have to select the Docker profile:

And you will see the API along with Swagger UI and random port number as:

The Swagger UI/Documentation generally enabled for DEVELOPMENT environment and for this you have to inform startup of your program that which environment it is, and here we have used Dockerfile to set the environment as Development:

The ASP.NET Core Environment details are

Once you stop the application from Visual Studio, then it’s not accessible.

Run ASP.NET Core Web API within Docker Container using Commands

With the DockerFile, you can build and run sample ASP.NET Core app using a command mentioned below and execute these commands from the location where your project Solution file present e.g., \OpenAQAir.API\OpenAQAir.API.sln as per screenshot present at Create the ASP.NET Core web API > step# 05

docker build -t sitecoreedgeapi -f OpenAQAir.API\Dockerfile .

docker run --rm -p 5000:80 ` -e DOTNET_URLS=http://+:80 sitecoreedgeapi

And after successful execution of build and run command, you will be able to access the Custom API from HOST machine using the url http://localhost:5000/swagger/index.html

In this section, we learnt that how to independently build and run the Custom API from the Container, and you can use this endpoint on your local machine to replicate the third-party integration environment.

Run ASP.NET Core Web API within Container using DockerCompose

Now, we will try to run Custom ASP.NET Core Web API created at ADD-DOTNET-CORE-MVC-WEB-API repository within container with the help DockerCompose services

In this application, Clean Architecture being used, this patterns always focus on the loosely coupled implementation of the application layers and the same rule applied into the application implementation.

You can find more details about Clean Architecture at Sitecore.Demo.Edge/api at feature/ADD-DOTNET-CORE-MVC-WEB-API · AmitKumar-AK/Sitecore.Demo.Edge (github.com)

The API solution contains following files related to the Docker setup

The Dockerfile at /api/src/Sitecore.Demo.Edge.API/Dockerfile contains the following details

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

        #Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
        #For more information, please see https://aka.ms/containercompat

        FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
        # if not passed from Compose file then enable to show the swagger
        #ENV ASPNETCORE_ENVIRONMENT=Development
        WORKDIR /app
        EXPOSE 80
        EXPOSE 443

        FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
        WORKDIR /src
        COPY ["nuget.config", "."]
        COPY ["src/Sitecore.Demo.Edge.API/Sitecore.Demo.Edge.API.csproj", "src/Sitecore.Demo.Edge.API/"]
        COPY ["src/Sitecore.Demo.Edge.Application/Sitecore.Demo.Edge.Application.csproj", "src/Sitecore.Demo.Edge.Application/"]
        COPY ["src/Sitecore.Demo.Edge.Domain/Sitecore.Demo.Edge.Domain.csproj", "src/Sitecore.Demo.Edge.Domain/"]
        COPY ["src/Sitecore.Demo.Edge.Infrastructure/Sitecore.Demo.Edge.Infrastructure.csproj", "src/Sitecore.Demo.Edge.Infrastructure/"]
        RUN dotnet restore "src/Sitecore.Demo.Edge.API/Sitecore.Demo.Edge.API.csproj"
        COPY . .
        WORKDIR "/src/src/Sitecore.Demo.Edge.API"
        RUN dotnet build "Sitecore.Demo.Edge.API.csproj" -c Release -o /app/build

        FROM build AS publish
        RUN dotnet publish "Sitecore.Demo.Edge.API.csproj" -c Release -o /app/publish

        FROM base AS final
        WORKDIR /app
        COPY --from=publish /app/publish .

        ENTRYPOINT ["dotnet", "Sitecore.Demo.Edge.API.dll"]

This Dockerfile exposes the PORTs and deploy the required project assemblies which referenced in the API project Sitecore.Demo.Edge.API.

The Sitecore.Demo.Edge.API project also have Docker Compose file which using the Dockefile and you can independently run the API service within Container

version: '3.4'

    services:
      sitecore.demo.edge.api:
        image: ${DOCKER_REGISTRY-}sitecoredemoedgeapi
        build:
          context: .
          dockerfile: src\Sitecore.Demo.Edge.API\Dockerfile

You can use execute below command from \Sitecore.Demo.Edge\api\ folder to run API independently within container

docker-compose up -d

The API documentation available at http://localhost:5000/swagger/index.html and you can validate the API methods also

The above output is from POST call to http://localhost:5000/api/home/city/citylist?keyword=Delhi%2C%20London&sortOrder=asc and you can also validate via the POSTMAN

Run ASP.NET Core Web API within Sitecore Container Network Setup

Now, we will try to integrate custom ASP.NET Core Web API with Sitecore Container Sitecore.Demo.Edge setup and for this I have forked this repository and created the ADD-DOTNET-CORE-MVC-WEB-API repository

In the main solution, Environment (.env) file, I have added the hostname for the API endpoint as DOTNET_API_HOST=api.edge.localhost.

This hostname would be used to access the Custom API end point over the HTTPS as https://api.edge.localhost/swagger/index.html on HOST machine or outside of the container, and within container you can access the API endpoint as http://api

The main solution contains DockerCompose Override file at \Sitecore.Demo.Edge\docker-compose.override.yml, which contains API service details which needs to be deployed with Sitecore Container setup on the same network:

  api:
          image: ${DOCKER_REGISTRY-}api:${VERSION:-latest}
          build:
              context: api
              dockerfile: src\Sitecore.Demo.Edge.API\Dockerfile
          environment:
              ASPNETCORE_ENVIRONMENT: "development"
              SITECORE_API_HOST: "http://cm"
          depends_on:
            cm:
              condition: service_healthy
          labels:
            - "traefik.enable=true"
            - "traefik.http.routers.api-secure.entrypoints=websecure"
            - "traefik.http.routers.api-secure.rule=Host(`${DOTNET_API_HOST}`)"
            - "traefik.http.routers.api-secure.tls=true"

In the above API service we are using the same Dockerfile instructions from API folder (which validated in section Run ASP.NET Core Web API within Container using DockerCompose ).

I am also passing the url of API from DOTNET_API_HOST as environment variable to Rendering services so that Rendering (Frontend) application can connect with API.

The above output is from GET call to https://api.edge.localhost/api/country/countrysearch?Keyword=IN%2C%20GB and you can also validate via the POSTMAN

With the help of above details, you can spin-up the custom API instance and consume in any application and can expose the endpoint via API Gateway.

This code base with Custom API present at the GitHub branch

Credit/References:

Introduction to Composable DXP (sitecore.com)	The benefits of a composable digital experience platform (DXP) (sitecore.com)	What is a Digital Experience Platform (DXP) (sitecore.com)
Composable DXP for the developers	Use API gateways in microservices	Add an API manually using the Azure portal \| Microsoft Learn
ASP.NET Core web API documentation with Swagger / OpenAPI	How to optimize your omnichannel content strategy	Sitecore Architect’s Guide to SaaS Migration – XM Jamstack scenario
Composable APIs Paving the Way for the Composable Enterprise	Sitecore PLAY! Summit Demo Edge – GitHub	How APIs Enable the Composable Enterprise Model
Are composable DXPs the future of digital experience?	What is Sitecore composable DXP?	What is composable DXP vs DXP?

Pingback:

Why You Need an API Layer and How To Build It in React	5 Golden Rules for Great Web API Design	Create and use Custom APIs (Microsoft Dataverse)
How APIs Enable the Composable Enterprise Model https://nordicapis.com › Blog	How APIs Are Creating the Composable Enterprise	Designing and implementing API Gateways
Composable Digital Platforms - Sitecore Content Hub	Are composable DXPs the future of digital experience?	What is a Headless CMS? \| Sitecore
The Vision for the Future of a Composable Sitecore Stack	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Jamstack for Sitecore: The What, The How, and The Why
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
sitecore composable	composable cms	sitecore composable future
composable dxp	sitecore composable architecture	sitecore dxp
sitecore dxp suite	sitecore composable stack	sitecore 9 exam questions and answers
Sitecore composable digital experience platform	sitecore composable dxp	composable architecture core data
sitecore docker compose	sitecore component library	sitecore 8.2 compatibility table
sitecore jss deploy component	sitecore-jss	sitecore 10 dependency injection
sitecore 10 certification cost	sitecore 10 helix	sitecore support matrix
sitecore support jobs	sitecore graphql search query	sitecore dxp features
sitecore graphql example	sitecore costs	sitecore training courses
sitecore 10 download	sitecore graphql schema	sitecore graphql server cannot be reached
Sitecore Graphql tutorial	Sitecore Performance Tuning	.net core 6 graphql
sitecore 9 exam questions and answers	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore graphql edge	Sitecore Version 10 - Sitecore Upgrade Process	sitecore graphql api
sitecore xconnect data azure	sitecore xconnect data already exists contact	sitecore.xconnect.xdbsearchunavailableexception
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Sitecore NextJS Component Refactoring and Reusability

2023-02-01T12:00:00.002+05:30

The Sitecore Headless Services provide a different ways to consume the Sitecore Content into your Head application (website) depending on your need:

Sitecore Experience Platform (SXP)

Sitecore Experience Manager

Sitecore XM Cloud

Sitecore Content Hub

Sitecore Content Hub One

The Sitecore Experience Platform is a true Headless Content Management System, and it provides the flexibility to implement a Head application with latest tech stack also, e.g., NextJS using sitecore-jss-nextjs SDK.

We can design Sitecore Renderings / Components with the help of sitecore-jss-nextjs SDK which provides the flexibility to view your web page in WYSIWYG (What You See Is What You Get) editor that allows you to easily make changes to items directly on the page. You can edit all the items that are visible on the page — text, graphics, logos, links, and so on.

Generally, the components developed using sitecore-jss-nextjs SDK are tightly coupled with the Sitecore implementation and developed as a SINGLE entity / object. It means it will not provide the reusability so that one component can be reused on multiple functionalities:

Let’s consider, you have different types of pages or content types in your Sitecore PLAY! Summit Demo Web application:

Session
Speaker
Vendor
Sponsor

All the above content types have some fields which are common, e.g.

Background Image
Heading
Name

And existing UI and component details are:

The component implementation details are:

In the above components details InformationPageHero component being reused in your application in different ways, e.g., to display Sponsor/Vendor/Speaker related content, and internally only one implementation handling all the different variations, so in this case instead of writing the code in one component, we can divide them into small components / renderings.

By this way we can reuse these new components in many places/times, and find below the high level of refactoring details are:

The reusability provides many benefits, and some are:

Easy to maintain
Design from reusable components is likely to cost less
Modularization
Consistency across the ecosystem
Loose Coupling
Ensure Flexibility
Low maintenance

In this article, we will learn how to build the Sitecore Headless Application Front-end applications renderings or components which are loosely coupled (reusable) and can be reused easily.

The refactoring process involved following steps:

Create Sitecore NextJS Main component

Create different NextJS Types

Create Sitecore NextJS components for different content items

Create components to display common information with common UI

Update Sitecore Page Templates

Sitecore NextJS Component Refactoring and Reusability

Create Sitecore NextJS Main component

Create new rendering item Content Hero Banner (/sitecore/layout/Renderings/Project/edgewebsite/Common/ContentHeroBannerComponent) at Sitecore CMS, so that each content type (Sessions/Speakers/Vendors/Sponsors) will use the same rendering item and remove the existing rendering which render the Hero Banner Information e.g., SessionInformationPageHero, SpeakerInformationPageHero, etc..

Now create the NextJS rendering for the ContentHeroBannerComponent at /Website/src/rendering/src/components/Common/ContentHeroBannerComponent.tsx in the rendering code base:

Create different NextJS Types

NextJS Types to store the Sitecore Layout Service Data:

BaseContent

Create the Sitecore NextJS type baseContent to store the common fields at /Website/src/rendering/src/types/Common/ContentBanner/baseContent.ts in the rendering code base:

import { Field, ImageField } from '@sitecore-jss/sitecore-jss-nextjs';

              export interface BaseContent {
                Name: Field<string>;
                Image: ImageField;
              };

              export interface SocialMediaProfiles {
                FacebookProfileLink?: Field<string>;
                TwitterProfileLink?: Field<string>;
                InstagramProfileLink?: Field<string>;
                LinkedinProfileLink?: Field<string>;
              }

contentBannerProps

Create the Sitecore NextJS type contentBannerProps to store the different content types at Website\src\rendering\src\types\Common\ContentBanner\contentBannerProps.ts in the rendering code base:

import { Room } from 'src/types/room';
            import { Day } from 'src/types/day';
            import { Timeslot } from 'src/interfaces/Timeslot';
            import { BaseContent, SocialMediaProfiles } from './baseContent';
            import { Field, ImageField } from '@sitecore-jss/sitecore-jss-nextjs';


            export type ContentBannerProps =
              | SessionInformationPageHeroProps
              | InformationPageHeroProps
              | BannerProps

            export interface SessionInformationPageHeroProps extends BaseContent {
              Rooms: Room[];
              Day: Day[];
              Timeslots: Timeslot[];
              Premium: Field<boolean>;
              TemplateName:string;
            }  
            export interface InformationPageHeroProps extends BaseContent,SocialMediaProfiles {
              Rooms: Room[];
              Day: Day[];
              Timeslots: Timeslot[];
              Premium: Field<boolean>;
              Featured: Field<boolean>;
              Picture: ImageField;
              JobTitle: Field<string>;
              Company: Field<string>;
              Location: Field<string>;
              TemplateName:string;
              Logo: ImageField;
              Level: Field<string>;
            }


            export type BannerProps = BaseContent

types

Create the Sitecore NextJS type types , used to define the fields for common PageContent at Website\src\rendering\src\features\PageContent\types.ts in the rendering code base:

import { Field } from "@sitecore-jss/sitecore-jss-nextjs"

              export type DisplayNameProps =  {
                Name: Field<string>;
              };

              export type DisplayTitleProps =  {
                Title: string;
              };

Create Sitecore NextJS components for different content items

We have created following Sitecore NextJS components which helps to refactor the Hero Banner components:

InformationPageHero

The SitecoreNextJS component InformationPageHero called from the ContentHeroBanner component to render the Hero Banner for the all the Content Type pages:

import {  LayoutServicePageState, Text, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
            import {
              faFacebookF,
              faTwitter,
              faLinkedinIn,
              faInstagram,
            } from '@fortawesome/free-brands-svg-icons';
            import SocialIcon from 'components/NonSitecore/SocialIcon';
            import { InformationPageHeroProps } from 'src/types/Common/ContentBanner/contentBannerProps';
            import SessionHeroBanner from './SessionHeroBanner';
            import DisplayName from 'src/features/PageContent/components/DisplayName';
            import DisplayTitle from 'src/features/PageContent/components/DisplayTitle';


            const InformationPageHero = (props: InformationPageHeroProps): JSX.Element => {
              const { sitecoreContext } = useSitecoreContext();

              const isPageEditing = sitecoreContext.pageState === LayoutServicePageState.Edit;
              let lowerCaseQualificative ="";
              let imageSrc="";
             if(props.TemplateName=="Speaker")
              {
                lowerCaseQualificative = props?.Featured?.value ? 'featured' : '';
                imageSrc =props.Picture.value?.src
              }
              else if(props.TemplateName=="Vendor" || props.TemplateName=="Sponsor")
              {
                lowerCaseQualificative = props?.Level?.value ? props?.Level?.value.toLocaleLowerCase() : '';
                imageSrc =props.Logo.value?.src
              }

              const informations =
                props.JobTitle?.value ||
                props.Company?.value ||
                props.Location?.value ||
                isPageEditing ? (
                  <>
                    {props.JobTitle?.value || isPageEditing ? (
                      <div>
                        <span className="label">Job Title:</span>{' '}
                        <Text field={props.JobTitle} tag="span" />
                      </div>
                    ) : undefined}
                    {props.Company?.value || isPageEditing ? (
                      <div>
                        <span className="label">Company:</span> <Text field={props.Company} tag="span" />
                      </div>
                    ) : undefined}
                    {props.Location?.value || isPageEditing ? (
                      <div>
                        <span className="label">Location:</span>{' '}
                        <Text field={props.Location} tag="span" />
                      </div>
                    ) : undefined}
                  </>
                ) : undefined;  

                const informationsHTML = informations ? (
                  <div className="informations">{informations}</div>
                ) : undefined;

              return props.TemplateName == "Session" ? (
                <SessionHeroBanner Premium={undefined} Rooms={[]} Day={[]} Timeslots={[]} TemplateName={props.TemplateName} {...props} />
              ) : (
                <section
                className={`information-page-hero ${props.TemplateName.toLocaleLowerCase()}-information-page-hero ${lowerCaseQualificative}`}
              >
                <div className="content">
                  <div className="image-container">
                    {/* Purposefully not using a JSS Image component here to avoid width/height HTML attributes on the img tag */}
                    <img src={imageSrc} alt="Image" loading="lazy" />
                  </div>
                  <div className="gradient-container"></div>
                  <div className="content-container">
                    <div className={`container-content-text`}>
                      <div>
                        <DisplayTitle Title={"Meet the <span className='information-type'>" + lowerCaseQualificative + "</span> " + props.TemplateName.toLocaleLowerCase() + ":"} />            
                        <DisplayName Name={props.Name} />
                      </div>
                      {informationsHTML}
                      <div className="external-website-icons">
                        <SocialIcon Icon={faFacebookF} Link={props.FacebookProfileLink} />
                        <SocialIcon Icon={faTwitter} Link={props.TwitterProfileLink} />
                        <SocialIcon Icon={faLinkedinIn} Link={props.LinkedinProfileLink} />
                        <SocialIcon Icon={faInstagram} Link={props.InstagramProfileLink} />
                      </div>
                    </div>
                  </div>
                </div>
              </section>
              )

              /*
              (

                )*/
            };

            export default InformationPageHero;

SessionHeroBanner

The SitecoreNextJS component SessionHeroBanner called from the InformationPageHero component if page item template name is Session, and this component will take care of rendering of Session Page Hero Banner:

import { faCalendar, faClock, faDoorOpen } from '@fortawesome/free-solid-svg-icons';
          import InfoText from 'components/NonSitecore/InfoText';
          import { getSessionDays, getSessionTime } from 'src/helpers/DateHelper';
          import { InformationPageHeroProps } from 'src/types/Common/ContentBanner/contentBannerProps';
          import { Text } from '@sitecore-jss/sitecore-jss-nextjs';
          import DisplayName from 'src/features/PageContent/components/DisplayName';
          import DisplayTitle from 'src/features/PageContent/components/DisplayTitle';

          const SessionHeroBanner = (props: InformationPageHeroProps): JSX.Element => {
            const premiumSessionQualificative = props.Premium.value ? 'premium' : '';
            return (
              <section className={`session-information-page-hero ${premiumSessionQualificative}`}>
                <div
                  className="background-container"
                  style={{
                    backgroundImage: 'url(' + props.Image.value?.src + ')',
                  }}
                >
                  <div className="content">
                    <div
                      className="image-container bg-cover  bg-center flex-1 min-h-full"
                      style={{
                        background:
                          'linear-gradient(to right, rgba(60, 60, 60, 0) 70%, rgba(0, 0, 0, 1) 100%)',
                      }}
                    >
                    </div>
                    <div className="content-container">
                      <div className="container-content-text">
                        <div>
                            <DisplayTitle Title={"Explore the <span className='information-type'>" + premiumSessionQualificative + "</span> session:  "} />
                            <DisplayName Name={props.Name} />
                        </div>
                        <div>
                          {/* Dispaly Multiple Rooms*/}
                          {props?.Rooms && (
                            <InfoText Icon={faDoorOpen}>
                              {props?.Rooms.map((roomDetails, index) => (
                                  <Text style={{marginRight: 1 + 'em'}} key={index} tag="span" field={roomDetails?.fields?.Name} />
                                  ))}                    
                            </InfoText>
                          )}
                          <InfoText Icon={faCalendar}>
                            <span>{getSessionDays(props.Day)}</span>
                          </InfoText>
                          <InfoText Icon={faClock}>
                            <span>{getSessionTime(props.Timeslots)}</span>
                          </InfoText>
                        </div>             
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            );
          };

          export default SessionHeroBanner;

Create components to display common information with common UI

We have created following Sitecore NextJS components which helps to display the common information with common UI, and reused in InformationPageHero and SessionHeroBanner components:

DisplayTitle

The SitecoreNextJS component DisplayTitle called from the InformationPageHero and SessionHeroBanner component to render the Rich Text:

import { RichText } from '@sitecore-jss/sitecore-jss-nextjs';
            import { DisplayTitleProps } from '../types';

            const DisplayTitle = (props: DisplayTitleProps): JSX.Element => (

              <section>
                <p className="title">
                  <RichText field={{ value: props?.Title }} />
                </p>        
              </section>
            );

            export default DisplayTitle;

DisplayName

The SitecoreNextJS component DisplayName called from the InformationPageHero and SessionHeroBanner component to render the Text field:

import { Text } from '@sitecore-jss/sitecore-jss-nextjs';
            import { DisplayNameProps } from '../types';

            const DisplayName = (props: DisplayNameProps): JSX.Element => (
              <section>
                <h1 className="name">
                  <Text key="{props?.fields?.Name.value}" field={props?.Name} />
                </h1>    
              </section>
            );

            export default DisplayName;

Update Sitecore Page Templates

You also need to remove the existing components SessionInformationPageHero/SponsorInformationPageHero/VendorInformationPageHero/SponsorInformationPageHero from page templates of content types (standard values) and need to use ContentHeroBannerComponent component, which will take care of rendering the Hero Banner for different content types.

Above refactoring details are just the one of the way to refactor the existing components in your Sitecore NextJS application code base, and generally refactoring involves lots of time and efforts, so need to be considered as important tasks in your sprint planning.

This refactored code base present at the GitHub branch

This repository is used for the primary demo code base for Sitecore Edge for Content Hub and Experience Management.

And you can check the changes directly at

Credit/References:

Sitecore Demo Portal!

PLAY! Summit Demo – GitHub

Pingback:

sitecore next.js	sitecore jss nextjs	sitecore jamstack
sitecore nextjs sample website	sitecore jss dynamic placeholder	sitecore-jss-nextjs github
Creating a JSS Next.js application with the JSS CLI	The Sitecore Containers template for JSS Next.js apps	Connecting a code-first JSS Next.js application to Sitecore
Setting up a development environment with the Sitecore Containers template for Next.js	Jamstack for Sitecore JSS using Next.js with Uniform SDK	Sitecore JavaScript Rendering SDK (JSS) for Next.js
Prerendering methods and data fetching strategies in JSS Next.js apps	Architecture and APIs for integrating JSS Next.js apps with Sitecore editors	Getting started with JSS for Next.js development
Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Sitecore Experience Edge
next.js sitecore	sitecore node js	next js sitecore
next.js sample project	sitecore query examples	sitecore jss quick start
unit test next js	sitecore nvelocity	sitecore 9 exam questions and answers
nextjs best practices github	next js folder structure best practices	nextjs api best practices
next js logging best practices	next js styling best practices	next js tips
next js routing best practices	next js authentication best practices	next js api best practices
next js best practices	next js css best practices	sitecore graphql ui
sitecore support jobs	sitecore graphql search query	sitecore graphql authentication required
sitecore graphql example	sitecore graphql pagination	sitecore graphql api
sitecore graphql cache	sitecore graphql schema	sitecore graphql server cannot be reached
sitecore graphql configuration	experience accelerator sitecore	sitecore 8 end of life
sitecore 9 end of life	sitecore graphql contextitem	sitecore experience edge api
Building custom Sitecore images	sitecore component graphql query	could not find type sitecore.services.graphql.dependency configurator
sitecore content hub graphql	sitecore xconnect api	sitecore graphql datasource
sitecore graphql extender	sitecore graphql editable	sitecore enable graphql
sitecore jss graphql example	sitecore graphql root element is missing	sitecore xconnect data analysis
sitecore graphql search examples	sitecore graphql filter	sitecore graphql fields
sitecore headless graphql
sitecore integrated graphql	sitecore install graphql	sitecore jss graphql tutorial
sitecore graphql mutation sitecore graphql Fragment	Secure Sitecore JSS Site	sitecore nextjs graphql
Sitecore Graphql tutorial	Sitecore Performance Tuning	.net core 6 graphql
sitecore 9 exam questions and answers	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore graphql edge	Sitecore Version 10 - Sitecore Upgrade Process	sitecore graphql api
sitecore xconnect data azure	sitecore xconnect data already exists contact	sitecore.xconnect.xdbsearchunavailableexception
sitecore xconnect data backup	sitecore analytics	disable sitecore analytics
enable sitecore analytics tracker	sitecore analytics testing tools	sitecore analytics vs google analytics
sitecore analytics database manager	how to enable sitecore analytics	sitecore analytics reports
sitecore analytics not working	sitecore analytics cookie	sitecore analytics custom reports
sitecore analytics api	sitecore analytics ip address	sitecore.analytics.tracker.current.session.identify as
sitecore and google analytics	adobe analytics integration with sitecore	sitecore analytics benefits
best sitecore websites	sitecore analytics power bi	sitecore analytics chrome extension
sitecore analytics.clustername	sitecore analytics.cookiedomain	sitecore analytics configuration
sitecore custom analytics	sitecore commerce analytics	sitecore.analytics.tracker.current is null
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

2023 Sitecore MVP

2023-01-31T20:27:00.000+05:30

Today Sitecore announced that list of the 241 MVPs, selected out of more than 16,000 certified developers and over 30,000 active community participants.

This year’s MVPs were selected by a panel of Sitecore employees for the quality, quantity and impact of the contributions they made in 2022, including the sharing of product expertise and advanced knowledge of the Sitecore platform to support both partners and customers.

I'm grateful to be awarded as Sitecore Most Valuable Professional (MVP) 2023 in the Technology category by Sitecore, fifth time in a row.

I am proud to be one of 137 Sitecore Technology MVPs worldwide and one of 241 Sitecore MVPs altogether (for all categories) this year.

References:

Sitecore announces 2023 Most Valuable Professionals

2023 Sitecore MVP Directory

Sitecore Experience Edge GraphQL Queries

2023-01-23T14:36:00.000+05:30

The Headless development in Sitecore is powered by a layer of services, API endpoints, and rendering SDKs:

Services and API endpoints

Sitecore Headless Services

Sitecore Experience Edge for XM

Rendering SDKs

Sitecore ASP.NET Rendering SDK

Sitecore JavaScript Rendering SDKs (JSS)

In this article, we will explore about Sitecore scalable API layer called Sitecore Experience Edge which provides you a Sitecore-hosted GraphQL (GQL) API. With these Edge GraphQL (GQL) endpoint you can build your solution in any language and pull the required content with the help of GraphQL (GQL).

The major GraphQL APIs of Sitecore Experience Edge are:

Preview API
Delivery API

You can check more details about these APIs at Type of Sitecore Experience Edge API.

GraphQL is a query language for these APIs that gives you a flexible way to query the data. It also provides the flexibility to define API endpoints with custom url's. These endpoints host the schema, which is a strongly typed graph definition where endpoints understand the GraphQL language.

I have explained in detail about Sitecore GraphQL and Sitecore Experience Edge and in my previous blog posts:

Sitecore GraphQL Queries

Quickstart guide - All about Sitecore Experience Edge

This article will provide the details about Sitecore GraphQL Edge queries usage and how it will be useful in creating Sitecore projects especially Sitecore JSS projects. The topics covered under this Sitecore GraphQL Edge queries article are:

Overview of Sitecore GraphQL (GQL)

How to test Sitecore Experience Edge GraphQL (GQL) queries?

How to access Sitecore XM / Sitecore XM Cloud Edge with Sitecore Edge IDE and APIs?

Sitecore Edge GraphQL (GQL) Queries Usage:

Sitecore Edge GraphQL - Get an item by path and show field id and name
Sitecore Edge GraphQL - Return the custom name of field
Sitecore Edge GraphQL - Return the name and value from all fields
Sitecore Edge GraphQL - Return a specific field with Alias
Sitecore Edge GraphQL - Get Child Items using GraphQL
Sitecore Edge GraphQL - Get a typed safe data using GraphQL
Sitecore Edge GraphQL - Get specific Child Items using GraphQL and alias
Sitecore Edge GraphQL - Get the values of Tree-list or Multi-list field type
Sitecore Edge GraphQL - Get the values of Treelist or Multilist field type from child item of current context
Sitecore Edge GraphQL - Get the template field details with values of current item
Sitecore Edge GraphQL - Get the field values using Aliases
Sitecore Edge GraphQL - Get repeated fields using Fragments
Sitecore Edge GraphQL Search - using Search query keyword
Sitecore Edge GraphQL Search - Apply filter not to return items from specific path
Sitecore Edge GraphQL Search – Parameter details
Sitecore Edge GraphQL Search - Hide items based on specific template
Sitecore Edge GraphQL Search – Order By Field and Order by Direction
Sitecore Edge GraphQL Search – AND / OR Condition (ItemSearchPredicateInput) Usage
Sitecore Edge GraphQL Search – Pagination and first/after parameters
Sitecore Edge GraphQL Search – Get all field name of the search result item
Sitecore Edge GraphQL Search – Return a specific field with Alias

Important Notes

Sitecore Edge GraphQL Query Cheat Sheet

Overview of Sitecore GraphQL (GQL)

To get more details about Sitecore GraphQL, you can check my article Sitecore GraphQL Queries:

Sitecore GraphQL Architecture

How to test Sitecore Experience Edge GraphQL (GQL) queries?

You can use interactive browser-based GraphQL Integrated Development Environment (IDE) which based on the GraphQL Playground to validate your queries during the development phase with production schema, and without pushing to PROD environment.

To get more details about Sitecore Edge GraphQL Integrated Development Environment (IDE), you can check my previous article Quickstart guide - All about Sitecore Experience Edge.

How to access Sitecore XM / Sitecore XM Cloud Edge with Sitecore Edge IDE and APIs?

We can access the Edge GraphQL Integrated Development Environment (IDE) with Preview API and Delivery API. The IDEs/APIs URLs are different for both Sitecore XM and Sitecore XM Cloud.

Sitecore Experience Manager (XM)
- Sitecore Edge Preview IDE:
  You have to use the preview IDE URL as https://[WEBSITE HOST ADDRESS]/sitecore/api/graph/edge/ui and preview API URL as https://[WEBSITE HOST ADDRESS]/sitecore/api/graph/edge, and need to replace [WEBSITE HOST ADDRESS] with your Sitecore CM instance host address
  
  To access the conentent:
  You have to pass the API key and check the details at Sitecore Experience Manager (XM) Preview API Key
  Once you have the API key then you have to pass the API key to the HTTP header of the API request
  If you are accessing Edge GQL IDE in Sitecore Experience Platform (SXP) then may be sometimes you have to set the IDE Request Credentials setting and need to use the API Key present at /sitecore/system/Settings/Services/API Keys
- Sitecore Edge Delivery IDE:
  You have to use the delivery IDE URL as https://edge.sitecorecloud.io/api/graphql/ide and delivery API URL as https://edge.sitecorecloud.io/api/graphql/v1:
  
  To access the conentent:
  You have to pass the API key, if you are using Sitecore Demo Portal (this portal are NOT XM Cloud based. They are container environments hosted on AKS) then you can check steps at Sitecore Demo Portal Edge GraphQL API Key to get the API key and if you are using Sitecore SXP then need to use the API Key present at /sitecore/system/Settings/Services/API Keys but you can't use GQL IDE for Sitecore SXP Content Delivery instance because its disabled.
  Once you have the API key then you have to pass the API key to the HTTP header of the API request.

Sitecore Experience Manager (XM) Cloud
- Sitecore Edge Preview IDE:
  You have to use the preview IDE URL as https://[WEBSITE HOST ADDRESS]/sitecore/api/graph/edge/ide and preview API URL as https://[WEBSITE HOST ADDRESS]/sitecore/api/graph/edge, and need to replace [WEBSITE HOST ADDRESS] with your Sitecore XM Cloud CM instance host address
  
  To access the conentent:
  You have to pass the API key and check the details at Sitecore Experience Manager (XM) Cloud Preview API Key
  Once you have the API key then you have to pass the API key to the HTTP header of the API request
- Sitecore Edge Delivery IDE:
  You have to use the delivery IDE URL as https://edge.sitecorecloud.io/api/graphql/ide and delivery API URL as https://edge.sitecorecloud.io/api/graphql/v1:
  
  To access the conentent:
  You have to pass the API key, if you are using Sitecore XM Cloud Portal then you can check steps at Sitecore XM Cloud Edge GraphQL Delivery API Key to get the API key.
  Once you have the API key then you have to pass the API key to the HTTP header of the API request.

Sitecore Edge GraphQL (GQL) Queries Usage:

For this article, I am using following Sitecore Content Trees:

Sitecore Demo Portal Content Tree:

Sitecore XM Portal Content Tree:

The examples of Sitecore Edge GraphQL queries are:

Sitecore Edge GraphQL - Get an item by path and show field id and name

query GQLQuerySamples( $contextItem: String!) {
               #----Get an item by path and show field id and name:: Start ::------
                GQLType1: item(path: $contextItem, language:"en"){
                id,
                name
              }
              #----Get an item by path and show field id and name:: End ::------
            }

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

            # {"contextItem" :"/sitecore/content/Website/Website1/Home"}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Return the custom name of field

query GQLQuerySamples( $contextItem: String!) {
              #----Custom name for a field, test contain the id value:: Start ::------
                  GQLType2: item(path: $contextItem,, language:"en") {
                    id
                    name
                    ItemId: id
                  }
                #----Custom name for a field, test contain the id value:: End ::------
              }

              # in the above query, mind the ",," it will work.

              #--- Sitecore Edge Graphql Query Variables ------::Start::------
                 #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                      # and place in the QUERY VARIABLES section

                      # {"contextItem" :"/sitecore/content/Website/Website1/Home"}
              #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Return the name and value from all fields

query GQLQuerySamples( $contextItem: String!, $language: String!) {
              #----Return the name and value from all fields:: Start ::------
                GQLType3: item(path: $contextItem,language:$language) {
                    fields  {
                    name
                  value
                 }
                }  
              #----Return the name and value from all fields:: End ::------  
            }


            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/Website/Website1/Home",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

With the help of this you can get the list of available fields.

Sitecore Edge GraphQL - Return a specific field with Alias

query GQLQuerySamples( $contextItem: String!, $language: String!) {
                    #----Return a specific field, in this case field "Title" with Alias:: Start ::------  

                    GQLType4: item(path: $contextItem,language:$language) {
                        PageTitle:field(name  : "Title") {
                       MyPageTitle:value
                      }

                    }  
                  #----Return a specific field, in this case field "Title" with Alias:: End ::------  
                }


                #--- Sitecore Edge Graphql Query Variables ------::Start::------
                   #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                        # and place in the QUERY VARIABLES section

                        # {
                        #  "contextItem" :"/sitecore/content/Website/Website1/Home",
                        #  "language" :"en"
                        #}
                #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Get Child Items using GraphQL

query GQLQuerySamples( $contextItem: String!, $language: String!) {
              #----Get a children: You can access only common values :: Start ::------
                #child specific values or get all field values as per Example# 3
                GQLType5: item(path: $contextItem,language:$language) {
                  id
                  name
                     children
                  {
                            results
                    {
                        id
                      name
                                fields  {
                            name
                            value
                            }          
                    }

                  }
                }  
              #----Get a children: You can access only common values :: End ::------ 
            }


            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/Website/Website1/Home",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

In the above example, we are trying to get the child items of HOME node.

Sitecore Edge GraphQL - Get a typed safe data using GraphQL

query GQLQuerySamples( $contextItem: String!, $language: String!) {
                #----Get a typed safe data on the basis of template :: Start ::------
                  GQLType6: item(path: $contextItem,language:$language) {
                       children
                    {
                              results
                      {
                        ... on Speaker
                        {
                          id
                          name
                          sponsors {value}
                          vendors {value}
                          sessions {value}
                          description {value}
                          role {value}
                          picture {value}
                        }

                      }

                    }
                  }
                #----Get a typed safe data on the basis of template :: End ::------ 
              }


              #--- Sitecore Edge Graphql Query Variables ------::Start::------
                 #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                      # and place in the QUERY VARIABLES section

                      # {
                      #  "contextItem" :"/sitecore/content/EdgeWebsite/home/speakers",
                      #  "language" :"en"
                      #}
              #--- Sitecore Edge Graphql Query Variables ------::End::------

If you have multiple items based on different templates then it will return result based on typed data if present (no error message) otherwise not, and you can combine multiple templates in one query.

Sitecore Edge GraphQL - Get specific Child Items using GraphQL and alias

query GQLQuerySamples( $contextItem: String!, $language: String!) {
              #----Get only specific children on the basis of Template :: Start ::------
                GQLType7: item(path: $contextItem,language:$language) {
                 #-- Get only  Webpage
                     children (includeTemplateIDs: ["6DB09CEF64A852A3A98038408109C4D7"])
                  {
                            results
                    {
                      template{id
                      name
                      }
                      name
                      displayName

                      ... on Webpage
                      {
                            pageTitle {value}
                      }

                    }

                  }
                }
             #----Get only specific children on the basis of Template :: End ::------ 
            }


            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/EdgeWebsite/home",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Get the values of Tree-list or Multi-list field type

query GQLQuerySamples( $contextItem: String!, $language: String!) {
              #----Get value of multi-list field from item :: Start ::------
                GQLType8: item(path: $contextItem,language:$language) {
                            ... on Speaker
                    {
                      id
                      name
                      sessions
                      {
                        SessionList:targetItems
                        {
                                        ... on Session
                         {
                            SessionId: id
                            SessionName: name
                            SessionPageTitle: pageTitle {value}
                            description {
                              id
                              value
                              jsonValue
                              definition {type}
                            }
                        }
                        }

                      }

                    }
                }  
              #----Get value of multi-list field from item :: End ::------
            }


            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/EdgeWebsite/home/speakers/Alex Mena",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Get the values of Treelist or Multilist field type from child item of current context

query GQLQuerySamples( $contextItem: String!, $language: String!) {
            #----Get children of multi-list field from child item of current context :: Start ::------
                GQLType9: item(path: $contextItem,language:$language) {
                            ... on Speaker
                    {
                      id
                      name
                      sessions
                      {
                        SessionList:targetItems
                        {
                                        ... on Session
                           {
                              SessionId: id
                              SessionName: name
                              SessionPageTitle: pageTitle {value}
                              # using Parent item to get its child
                              parent 
                               {
                                 id
                                 path
                                 # Get only some child items, if many different template item present
                                 children (includeTemplateIDs: ["{D8AA73E1-C275-4EEE-BB9D-333925E51952}"])
                                  {
                                    results
                                     {
                                       id
                                       name
                                       path
                                     }
                                  }
                               }
                           }
                        }

                      }

                    }
                }  
              #----Get children of multi-list field from child item of current context :: End ::------
            }


            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/EdgeWebsite/home/speakers/Alex Mena",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Get the template field details with values of current item

query GQLQuerySamples( $contextItem: String!, $language: String!) {
                #----Get the template field details with values of current item :: Start ::------

                GQLType10: item(path: $contextItem,language:$language) {
                            ... on Speaker
                    {
                      id
                      name
                                 __typename
                      templateName:template
                       {
                        id
                        name
                      }
                      # Fields  present on specific item
                      ... on Item 
                          {
                            fields {
                              id
                              name
                              value
                            }
                          }          
                    }
                }  
             #----Get the template field details with values of current item :: End ::------ 
            }


            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/EdgeWebsite/home/speakers/Alex Mena",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Get the field values using Aliases

query GQLQuerySamples( $contextItem: String!, $language: String!) {
            #----Get the field values using Aliases :: Start ::------
              GQLType11: item(path: $contextItem,language:$language) {
                          ... on Speaker
                  {
                    id
                    SpeakerName: name
                    # You can add aliases to field attributes also
                              role  {Speaker_Role:value}      
                  }
              }  
          #----Get the field values using Aliases :: End ::------ 
          }


          #--- Sitecore Edge Graphql Query Variables ------::Start::------
             #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                  # and place in the QUERY VARIABLES section

                  # {
                  #  "contextItem" :"/sitecore/content/EdgeWebsite/home/speakers/Alex Mena",
                  #  "language" :"en"
                  #}
          #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL - Get repeated fields using Fragments

query GQLQuerySamples( $contextItem: String!, $language: String!) {
            #---------Use this part to test Fragment Query Example-----------::Start::------------
               GQLType12: item(path: $contextItem,language:$language) {
                            ... on Speaker
                    {
                      id
                      name
                      sessions
                      {
                       ... Sessions
                      }

                    }
                }  
            }


            fragment Sessions on MultilistField {
              SessionList:targetItems {
              name
              id
                     ... on Session
                {

                  SessionId: id
                  SessionName: name
                  SessionPageTitle: pageTitle {value}
                  rooms
                  {
                    # Use of Fragment at child items
                    ... Rooms
                  }
                }
              }
            }


            fragment Rooms on MultilistField {
              RoomList:targetItems {
              name
              id
                     ... on Room
                {

                  RoomId: id
                  RoomName: name
                  RoomDescription: description {value}
                }
              }
            }


              #---------Use this part to test Fragment Query Example-----------::End::------------

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section

                    # {
                    #  "contextItem" :"/sitecore/content/EdgeWebsite/home/speakers/Alex Mena",
                    #  "language" :"en"
                    #}
            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL Search - using Search query keyword

#1. Sitecore Edge GraphQL Search Query _path usage
            # you will get all items under the /sitecore/content/EdgeWebsite/home/speakers {1F4B781B-F2A5-5647-99DF-C0C369162C4D}
            # and _path accept only GUID (with or without braces). 
            # It will return records from /page-components also

            query {
              pageOne: search(
                 where: {
                   AND: [
                     {
                       name: "_path"
                       value: "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                       operator: CONTAINS
                     }

                   ]
                 }
                 # defaults to 10
                 first: 10
               ) {
                 total
                 pageInfo {
                   endCursor
                   hasNext
                 }
                 results {
                   url {
                     path
                   }
                 }
               }
             }

Sitecore Edge GraphQL Search - Apply filter not to return items from specific path

#2. Sitecore Edge GraphQL Search - Apply filter not to return items from specific path
# To filter not to return child items from particular path we can use 
# NCONTAINS operator
# If we want to exclude items under specific locations, e.g., need to hide items which are present under /sitecore/content/EdgeWebsite/home/speakers/Page Components:
 # GUID of /sitecore/content/EdgeWebsite/home/speakers/Page Components {81347F0C-A6F8-4A09-8D0A-0600485D5894}
# It will not return records under the /Page Components 
query SearchQuery (
  $pageSize: Int = 10
  $language: String = ""
  $rootpath: String = ""
) {
  pageOne: search(
     where: {
       AND: [
         {
           name: "_path"
           value:$rootpath
           operator: CONTAINS
         }
          {
          name: "_path"
          value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
          operator: NCONTAINS
        } 
        {
          name: "_language"
          value: $language
        } 
       
       ]
     }
     # defaults to 10
     first: $pageSize
   ) {
     total
     pageInfo {
       endCursor
       hasNext
     }
     results {
        id
      path
      
      fields{name
      __typename
      }
     }
   }
 }
 
#--- Sitecore Edge Graphql Query Variables ------::Start::------
   #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
        # and place in the QUERY VARIABLES section
        #   {
        #    "pageSize": 30,
        #    "language": "en",
        #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
        #  }
        
#--- Sitecore Edge Graphql Query Variables ------::End::------

In the above search query, i am using fields attribute to get the list of FIELDS from Search Result Item. With this you can find list of available fields.

Sitecore Edge GraphQL Search – Parameter details

#3. Sitecore Edge GraphQL Search - Apply filter not to return items from specific path
            # To filter not to return child items from particular path we can use 
            # NCONTAINS operator
            # If we want to exclude items under specific locations, e.g., need to hide items which are present under /sitecore/content/EdgeWebsite/home/speakers/Page Components:
             # GUID of /sitecore/content/EdgeWebsite/home/speakers/Page Components {81347F0C-A6F8-4A09-8D0A-0600485D5894}
            # It will not return records under the /Page Components 
            query SearchQuery (
              $pageSize: Int = 10
              $language: String = ""
              $rootpath: String = ""
            ) {
              pageOne: search(
                 where: {
                   AND: [
                     {
                       name: "_path"
                       value:$rootpath
                       operator: CONTAINS
                     }
                      {
                      name: "_path"
                      value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
                      operator: NCONTAINS
                    } 
                    {
                      name: "_language"
                      value: $language
                    } 

                   ]
                 }
                 # defaults to 10
                 first: $pageSize
               ) {
                 total
                 pageInfo {
                   endCursor
                   hasNext
                 }
                 results {
                    id
                  path

                  fields{name
                  __typename
                  }
                 }
               }
             }

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section
                    #   {
                    #    "pageSize": 10,
                    #    "language": "en",
                    #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                    #  }

            #--- Sitecore Edge Graphql Query Variables ------::End::------

In the above search query, we are having following parameters:
total: represent total number of records
first: this repsresent the page size of the search results and you can change as per your need
endCursor: Contains the encoded value of the cursor pointing to the last hit of a page
hasNext: this represents that next page present or not

Here total records are 21 and page size is 10 so total number of pages would be 3. If i will set the page size as 30 then hasNext should come as false, it means only ONE page.

Sitecore Edge GraphQL Search - Hide items based on specific template

#4. Sitecore Edge GraphQL Search - Hide items based on specific template
          query SearchQuery (
            $pageSize: Int = 10
            $language: String = ""
            $rootpath: String = ""
          ) {
            pageOne: search(
               where: {
                 AND: [
                   {
                     name: "_path"
                     value:$rootpath
                     operator: CONTAINS
                   }
                    {
                    name: "_path"
                    value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
                    operator: NCONTAINS
                  } 
                  {
                    # Item based on Folder template, e.g., Page Components
                    name: "_templates"
                    value: "{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"
                    operator: NCONTAINS
                  } 
                  {
                    name: "_language"
                    value: $language
                  } 

                 ]
               }
               # defaults to 10
               first: $pageSize
             ) {
               total
               pageInfo {
                 endCursor
                 hasNext
               }
               results {
                  id
                path

                fields{name
                __typename
                }
               }
             }
           }

          #--- Sitecore Edge Graphql Query Variables ------::Start::------
             #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                  # and place in the QUERY VARIABLES section
                  #   {
                  #    "pageSize": 30,
                  #    "language": "en",
                  #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                  #  }

          #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL Search – Order By Field and Order by Direction

#5. Sitecore Edge GraphQL Search – Order By Field and Order by Direction
            query SearchQuery (
              $pageSize: Int = 10
              $language: String = ""
              $rootpath: String = ""
              $orderByField: String!  
              $orderDirection: OrderByDirection = ASC  
            ) {
              pageOne: search(
                 where: {
                   AND: [
                     {
                       name: "_path"
                       value:$rootpath
                       operator: CONTAINS
                     }
                      {
                      name: "_path"
                      value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
                      operator: NCONTAINS
                    } 
                    {
                      # Item based on Folder template, e.g., Page Components
                      name: "_templates"
                      value: "{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"
                      operator: NCONTAINS
                    } 
                    {
                      name: "_language"
                      value: $language
                    } 

                   ]
                 }
                 # defaults to 10
                 first: $pageSize
                orderBy: { name: $orderByField, direction: $orderDirection }
               ) {
                 total
                 pageInfo {
                   endCursor
                   hasNext
                 }
                 results {
                    path
                    ... on Speaker
                      {
                        jobTitle {value}
                      }
                 }
               }
             }

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               # Root path is /sitecore/content/EdgeWebsite/home/speakers
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section
                    #   {
                    #    "pageSize": 30,
                    #    "language": "en",
                    #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                    #     "orderByField": "JobTitle", 
                    #     "orderDirection": "ASC"
                    #  }

            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL Search – AND / OR Condition (ItemSearchPredicateInput) Usage

#6. Sitecore Edge GraphQL Search – AND / OR Condition (ItemSearchPredicateInput) Usage
            # You can add AND / OR clause to search query with different field names
            # if you are using the CONTAINS clause then it will search the keyword in field content and return the results, and keyword case (UPPER or LOWER case) wouldn't affect the search results

            query SearchQuery (
              $pageSize: Int = 10
              $language: String = ""
              $rootpath: String = ""
              $orderByField: String!  
              $orderDirection: OrderByDirection = ASC  
              $searchKeyword: String = "" 
              $valueAfter: String = "" 
            ) {
              pageOne: search(
                 where: {
                   AND: [
                     {
                       name: "_path"
                       value:$rootpath
                       operator: CONTAINS
                     }
                      {
                      name: "_path"
                      value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
                      operator: NCONTAINS
                    } 
                    {
                      # Item based on Folder template, e.g., Page Components
                      name: "_templates"
                      value: "{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"
                      operator: NCONTAINS
                    } 
                    {
                      name: "_language"
                      value: $language
                    } 
                    {
                                OR: [
                        {
                          name: "JobTitle"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        {
                          name: "pageTitle"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        {
                          name: "Description"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        ]          
                    }       
                   ]
                 }
                 # defaults to 10
                first: $pageSize
                after:$valueAfter
                orderBy: { name: $orderByField, direction: $orderDirection }
               ) {
                 total
                 pageInfo {
                   endCursor
                   hasNext
                 }
                 results {
                    path
                    ... on Speaker
                      {
                        jobTitle {value}
                        pageTitle{value}
                        description{value}
                      }
                 }
               }
             }

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               # Root path is /sitecore/content/EdgeWebsite/home/speakers
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section
                    #   {
                    #    "searchKeyword": "alex", 
                    #    "pageSize": 30,
                    #    "language": "en",
                    #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                    #     "orderByField": "JobTitle", 
                    #     "orderDirection": "ASC",
                    #     "valueAfter": ""
                    #  }

            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL Search – Pagination and first/after parameters

#7. Sitecore Edge GraphQL Search – Pagination and first/after parameters
# For pagination we need to use the parameter 'after' and we need to pass the value returned in "'pageInfo/endCursor'".
#At FE app we can use "'pageInfo/hasNext'" to validate that next page present or not.

#When you are executing initial request then 'after' parameter value would be empty and if query returned more than one page then we have to use the exact value returned in 'pageInfo/endCursor'" in 'after' parameter
query SearchQuery (
  $pageSize: Int = 10
  $language: String = ""
  $rootpath: String = ""
  $orderByField: String!  
  $orderDirection: OrderByDirection = ASC  
  $searchKeyword: String = "" 
  $valueAfter: String = "" 
) {
  pageOne: search(
     where: {
       AND: [
         {
           name: "_path"
           value:$rootpath
           operator: CONTAINS
         }
          {
          name: "_path"
          value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
          operator: NCONTAINS
        } 
        {
          # Item based on Folder template, e.g., Page Components
          name: "_templates"
          value: "{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"
          operator: NCONTAINS
        } 
        {
          name: "_language"
          value: $language
        } 
        {
 					OR: [
            {
              name: "JobTitle"
              value: $searchKeyword
              operator: CONTAINS
            }         
            {
              name: "pageTitle"
              value: $searchKeyword
              operator: CONTAINS
            }         
            {
              name: "Description"
              value: $searchKeyword
              operator: CONTAINS
            }         
      		]          
        }       
       ]
     }
     # defaults to 10
    first: $pageSize
    after:$valueAfter
    orderBy: { name: $orderByField, direction: $orderDirection }
   ) {
     total
     pageInfo {
       endCursor
       hasNext
     }
     results {
        path
        ... on Speaker
          {
            jobTitle {value}
            pageTitle{value}
            description{value}
          }
     }
   }
 }
 
#--- Sitecore Edge Graphql Query Variables ------::Start::------
   # Root path is /sitecore/content/EdgeWebsite/home/speakers
   #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
        # and place in the QUERY VARIABLES section
        #   {
        #    "searchKeyword": "alex", 
        #    "pageSize": 30,
        #    "language": "en",
        #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
        #     "orderByField": "JobTitle", 
        #     "orderDirection": "ASC",
        #     "valueAfter": ""
        #  }
        
#--- Sitecore Edge Graphql Query Variables ------::End::------

For pagination we need to use the parameter 'after' and we need to pass the value returned in 'pageInfo/endCursor'.

At FE app we can use 'pageInfo/hasNext' to validate that next page present or not.

When you are executing initial request then 'after' parameter value would be empty and if query returned more than one page then we have to use the exact value returned in 'pageInfo/endCursor' in 'after' parameter.

In the above query, i am trying to access the Page TWO content by passing the value of 'pageInfo/endCursor' received from INITIAL search request to 'after'.

Now, if i will try to use the value of 'pageInfo/endCursor' received from above search results to 'after' parameter then i will get the EMPTY results:

Sitecore Edge GraphQL Search – Get all field name of the search result item

#8. Sitecore Edge GraphQL Search – Get all field name of the search result item

            query SearchQuery (
              $pageSize: Int = 10
              $language: String = ""
              $rootpath: String = ""
              $orderByField: String!  
              $orderDirection: OrderByDirection = ASC  
              $searchKeyword: String = "" 
              $valueAfter: String = "" 
            ) {
              pageOne: search(
                 where: {
                   AND: [
                     {
                       name: "_path"
                       value:$rootpath
                       operator: CONTAINS
                     }
                      {
                      name: "_path"
                      value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
                      operator: NCONTAINS
                    } 
                    {
                      # Item based on Folder template, e.g., Page Components
                      name: "_templates"
                      value: "{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"
                      operator: NCONTAINS
                    } 
                    {
                      name: "_language"
                      value: $language
                    } 
                    {
                                OR: [
                        {
                          name: "JobTitle"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        {
                          name: "pageTitle"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        {
                          name: "Description"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        ]          
                    }       
                   ]
                 }
                 # defaults to 10
                first: $pageSize
                after:$valueAfter
                orderBy: { name: $orderByField, direction: $orderDirection }
               ) {
                 total
                 pageInfo {
                   endCursor
                   hasNext
                 }
                 results {
                    template {
                      id
                      name
                    }
                    id
                    name
                    path
                    ... SearchResultsItems
                 }
               }
             }

            fragment SearchResultsItems on Item {
                 fields
                  {
                    name
                    value
                  }  
            }

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               # Root path is /sitecore/content/EdgeWebsite/home/speakers
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section
                    #   {
                    #    "searchKeyword": "alex", 
                    #    "pageSize": 30,
                    #    "language": "en",
                    #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                    #     "orderByField": "JobTitle", 
                    #     "orderDirection": "ASC",
                    #     "valueAfter": ""
                    #  }

            #--- Sitecore Edge Graphql Query Variables ------::End::------

When you start writing the Sitecore Edge GraphQL Search Queries, you would not be aware about the name of the fields which you have to use, because you wouldn't be having access to Search Engine provider.

In this case, the starting should be to get the list of all fields of all templates which you are going to use in your search queries.

Sitecore Edge GraphQL Search – Return a specific field with Alias

#9. Sitecore Edge GraphQL Search – Return a specific field with Alias
            # You can provide user friendly name or alias to the field name as per your requirement.

            query SearchQuery (
              $pageSize: Int = 10
              $language: String = ""
              $rootpath: String = ""
              $orderByField: String!  
              $orderDirection: OrderByDirection = ASC  
              $searchKeyword: String = "" 
              $valueAfter: String = "" 
            ) {
              pageOne: search(
                 where: {
                   AND: [
                     {
                       name: "_path"
                       value:$rootpath
                       operator: CONTAINS
                     }
                      {
                      name: "_path"
                      value: "{81347F0C-A6F8-4A09-8D0A-0600485D5894}"
                      operator: NCONTAINS
                    } 
                    {
                      # Item based on Folder template, e.g., Page Components
                      name: "_templates"
                      value: "{A87A00B1-E6DB-45AB-8B54-636FEC3B5523}"
                      operator: NCONTAINS
                    } 
                    {
                      name: "_language"
                      value: $language
                    } 
                    {
                                OR: [
                        {
                          name: "JobTitle"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        {
                          name: "pageTitle"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        {
                          name: "Description"
                          value: $searchKeyword
                          operator: CONTAINS
                        }         
                        ]          
                    }       
                   ]
                 }
                 # defaults to 10
                first: $pageSize
                after:$valueAfter
                orderBy: { name: $orderByField, direction: $orderDirection }
               ) {
                 total
                 pageInfo {
                   endCursor
                   hasNext
                 }
                 results {
                    template {
                      id
                      name
                    }
                    id
                    name
                    path
                    ... SearchResultsItems
                 }
               }
             }

            fragment SearchResultsItems on Item {
                 JobTitle: field(name  : "JobTitle") {
                       value
                      }  
                 fields
                  {
                    name
                    value
                  }  
            }

            #--- Sitecore Edge Graphql Query Variables ------::Start::------
               # Root path is /sitecore/content/EdgeWebsite/home/speakers
               #--- To use below Sitecore Edge Graphql Query Variables you have to uncomment 
                    # and place in the QUERY VARIABLES section
                    #   {
                    #    "searchKeyword": "alex", 
                    #    "pageSize": 30,
                    #    "language": "en",
                    #    "rootpath": "{1F4B781B-F2A5-5647-99DF-C0C369162C4D}"
                    #     "orderByField": "JobTitle", 
                    #     "orderDirection": "ASC",
                    #     "valueAfter": ""
                    #  }

            #--- Sitecore Edge Graphql Query Variables ------::End::------

Sitecore Edge GraphQL Query Cheat Sheet

Please find below list of Sitecore Edge GraphQL queries:

Important Notes

Sitecore Experience Manager (XM) Edge Preview API Key
The API key for Sitecore CMS Present at /sitecore/system/Settings/Services/API Keys/ location, and if not present then you can create new API Key (using template /sitecore/templates/System/Services/API Key):
Sitecore Edge GraphQL Preview Request-Credentials
If you are accessing the Sitecore Edge GraphQL IDE on Sitecore XP (SXP) then sometimes you will received Authentication failed related errors then you have to update the Request Credentials setting from omit to same-origin in IDE:
Sitecore Edge GraphQL IDE HTTP Headers
If you are accessing the Sitecore Edge GraphQL IDE the you have to pass the API key to the HTTP header of API request, and you can directly set the API key in IDE:
Sitecore Experience Platform (SXP) Edge GraphQL API Key
The API key for SXP Present at /sitecore/system/Settings/Services/API Keys/ location, and if not present then you can create new API Key (using template /sitecore/templates/System/Services/API Key):
You have to publish this API Key before using it.
Sitecore Demo Portal Edge GraphQL API Key
You can find API key for Sitecore Demo Portal at instance details section:
Sitecore XM Cloud Edge GraphQL Delivery API Key
To access the Sitecore XM Cloud Delivery API, you have to generate the API key for XM Cloud, and for this first you have to request a JWT for Experience Edge XM using OAuth:
Request an access token for the Experience Edge APIs by using a POST request
For example, request the JWT using the curl client:
```
curl --request POST --url "https://auth.sitecorecloud.io/oauth/token" --header "content-type: application/x-www-form-urlencoded" --data grant_type=client_credentials --data client_id=<clientid> --data client_secret=<clientsecret> --data audience=https://api.sitecorecloud.io
              
```
In this you have the pass the end-point as https://auth.sitecorecloud.io/oauth/token instead of https://one-sc-production.eu.auth0.com/oauth/token, and audience url as https://api.sitecorecloud.io instead of https://delivery.sitecore.cloud/[tenant-id].

Currently, the url mentioned at Sitecore official documentation Request a JWT for Experience Edge XM using OAuth are incorrect, and team is working on to correct these urls.

For example, request the JWT using the POSTMAN client:
You can generate client id and client secret for your Sitecore XM Cloud instance by following the steps present at Generate an Edge administration client for an XM Cloud environment.
After getting the JWT token you can follow the steps at Create the API key to generate the Sitecore XM Cloud Delivery API Key and you can check sample postman request details to generate the Sitecore XM Cloud Delivery API Key:

Credit/References:

Managing XM Cloud authentication clients	Create the API key for Sitecore XM Cloud	Sitecore GraphQL Query Example
Request a JWT for Experience Edge XM using OAuth	Sitecore GraphQL Cheat Sheet	What is Sitecore Experience Edge?
XM Cloud Introduction	How to optimize your omnichannel content strategy	Sitecore Slack Conversations
Sitecore Content Hub Edge GraphQL IDE	Sitecore Authoring and Management GraphQL API	Sitecore Experience Edge for XM Preview GraphQL endpoint
Sitecore Experience Manager	Deliver headless content at scale with Sitecore Experience Edge	How to optimize your omnichannel content strategy
Sitecore Content Hub One	Sitecore Headless Services and APIs	Sitecore GraphQL (GQL)
Sitecore Experience Edge for XM	Experience Edge for XM APIs	Overview of headless development with Sitecore
Experience Edge for Content Hub	Sitecore Experience Edge for Content Hub	Limitations and restrictions of Experience Edge for XM Cloud
Sitecore Experience Edge for XM Cloud Preview GraphQL endpoint	The Experience Edge schema for Sitecore XM	Sitecore Experience Edge for XM Cloud
Test queries of Sitecore Experience Edge for XM Cloud	Experience Edge for XM APIs	Sitecore Content Hub ONE Documentation
Experience Edge for XM	sitecore experience edge connector	sitecore experience edge architecture

Pingback:

Query examples - Sitecore Documentation	Start using Sitecore GraphQL API - Sitecore Documentation	Test your queries
Useful example of GraphQL Query in Sitecore context	GraphQL Search Query non-Edge	What built-in/standard fields are available on the Sitecore GraphQL Search Query
Create / Update / Delete items in Sitecore via GraphQL	GraphQL Component Query does not effect Layout Service	Sitecore GraphQL query - custom image prefix
Challenges with Sitecore's GraphQL tooling	How do I write a query in Sitecore?	How to Write GraphQL Query for Sitecore JSS?
GraphQL and Sitecore	experience edge sitecore	Prefetch Sitecore data with React Query
GraphQL for (Headful) Sitecore	Queries and Mutations - GraphQL	Making GraphQL requests on your frontend with Next.js
Starting with Sitecore JSS Integrated GraphQL	How to build a simple navigation with Sitecore JSS using GraphQL	sitecore graphql
sitecore graphql endpoint	sitecore graphql playground	sitecore graphql ui
sitecore support jobs	sitecore graphql search query	sitecore graphql authentication required
sitecore graphql example	sitecore graphql pagination	sitecore graphql api
sitecore graphql cache	sitecore graphql schema	sitecore graphql server cannot be reached
sitecore graphql configuration	experience accelerator sitecore	sitecore 8 end of life
sitecore 9 end of life	sitecore graphql contextitem	sitecore experience edge api
Building custom Sitecore images	sitecore component graphql query	could not find type sitecore.services.graphql.dependency configurator
sitecore content hub graphql	sitecore xconnect api	sitecore graphql datasource
sitecore graphql extender	sitecore graphql editable	sitecore enable graphql
sitecore jss graphql example	sitecore graphql root element is missing	sitecore xconnect data analysis
sitecore graphql search examples	sitecore graphql filter	sitecore graphql fields
sitecore headless graphql
sitecore integrated graphql	sitecore install graphql	sitecore jss graphql tutorial
sitecore graphql mutation sitecore graphql Fragment	Secure Sitecore JSS Site	sitecore nextjs graphql
Sitecore Graphql tutorial	Sitecore Performance Tuning	.net core 6 graphql
sitecore 9 exam questions and answers	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore graphql edge	Sitecore Version 10 - Sitecore Upgrade Process	sitecore graphql api
sitecore xconnect data azure	sitecore xconnect data already exists contact	sitecore.xconnect.xdbsearchunavailableexception
sitecore xconnect data backup	sitecore analytics	disable sitecore analytics
enable sitecore analytics tracker	sitecore analytics testing tools	sitecore analytics vs google analytics
sitecore analytics database manager	how to enable sitecore analytics	sitecore analytics reports
sitecore analytics not working	sitecore analytics cookie	sitecore analytics custom reports
sitecore analytics api	sitecore analytics ip address	sitecore.analytics.tracker.current.session.identify as
sitecore and google analytics	adobe analytics integration with sitecore	sitecore analytics benefits
best sitecore websites	sitecore analytics power bi	sitecore analytics chrome extension
sitecore analytics.clustername	sitecore analytics.cookiedomain	sitecore analytics configuration
sitecore custom analytics	sitecore commerce analytics	sitecore.analytics.tracker.current is null
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Quickstart guide - All about Sitecore Experience Edge

2022-12-30T08:34:00.002+05:30

Nowadays, many monolithic applications which developed earlier as a packaged solution to provide all the digital experience as single product being converted into a composable product suite in the digital transformation journey.

It means the individual component operates independently in a modular way, and communicate with other component of whole echo system via APIs.

With this idea in mind during digital transformation, organizations are moving away from the typical .NET based implementation to Headless implementation so that at any given point of time there should be no dependency on any component.

To support the composable journey of your organization in the recent past, Sitecore invested more in outstanding products to become a market leader in the composable digital experience platform (DXP) space. With these products, we can have inbound/outbound integrations with Sitecore in terms of Content Management, Personalization, Analytics, Campaign, or we can say that in the Digital Marketing space:

Solution	Product
Commerce Merchandizing and Storefronts	Sitecore OrderCloud
Commerce Product Discovery	Sitecore Discover
Content Management and Operations	Sitecore Content Hub
Commerce Merchandizing and Storefronts	Sitecore OrderCloud
Customer Data Management	Sitecore CDP
Digital Asset Management (DAM)	Sitecore Content Hub
Marketing Automation	Sitecore Send
Personalization	Sitecore Personalize
Reference: Introduction to Composable DXPs

You can integrate components from above which are required by your DXP architecture.

In order to meet current market need, organizations moving towards the true headless CMS offering to build modern applications to support omnichannel experiences.

Once you have decided to move implementation of your web application in the headless way instead of ASP.NET MVC then after that most important architectural point is how you are going to develop decoupled applications by utilizing Sitecore services, APIs, and software development kits (SDKs) and access Sitecore data as a headless content management system (CMS).

Headless development in Sitecore is powered by a layer of services, API endpoints, and rendering SDKs:

Services and API endpoints

Sitecore Headless Services

Sitecore Experience Edge for XM

Rendering SDKs

Sitecore ASP.NET Rendering SDK

Sitecore JavaScript Rendering SDKs (JSS)

In this article, we will explore about Sitecore scalable API layer called Sitecore Experience Edge which provides Sitecore content and to understand the details Sitecore Experience Edge for XM product would be used:

What is Sitecore Experience Edge?

Benefits of Sitecore Experience Edge

Sitecore Experience Edge availability

Type of Sitecore Experience Edge API

What is Sitecore Experience Edge Preview API?

What is Sitecore Experience Edge Delivery API?

Data caching at Sitecore Experience Edge

How to test Sitecore Experience Edge GraphQL (GQL) queries?

Personalization support for Sitecore Experience Edge

Custom Code support for Sitecore Experience Edge for XM

Security of Sitecore Experience Edge

Limitations of Sitecore Experience Edge

What is Sitecore Experience Edge?

The Sitecore Experience Edge is a globally scalable SaaS API service offering from Sitecore, which provides the contents of Sitecore products and content can be items, layout, data model, and media.

While using Sitecore Experience Edge, the content would not be published to the Content Delivery environment, instead of that it would be published to Sitecore hosted (SaaS) Content Delivery Network (CDN) called Sitecore Experience Edge in the cloud.

Sitecore Experience Edge is a set of services on Sitecore's SaaS platform which helps organisations to deliver headless content at scale with significantly faster time-to-market.

The Sitecore Experience Edge is a highly scalable Content as a Service (CaaS) delivery platform that enables you to build Jamstack architectures on the Sitecore platform.

Please find below High-level view of Sitecore Experience Edge which explain components/process involves to publish content to Sitecore Managed Content as a Service (CaaS)

If you are using Sitecore XM then Sitecore Experience Edge will replace Content Delivery layer.
Sitecore Experience Edge is not Layout Service but it's a CDN cache and snapshot of Layout Service response which published to Experience Edge and accessible via GraphQL API.

The Experience Edge advantages and Sitecore products

Benefits of Sitecore Experience Edge

The Sitecore Experience Edge is a set of services on Sitecore's SaaS platform and it's a win-win for both marketers and developers:

It's provides faster content delivery and data caching
Flexibility to select a tech stack
Decrease architectural complexity
Extremely scalable delivery and globally replicated platform which provides content delivery using high-performing Sitecore-hosted GraphQL APIs
Support to create static Sitecore JSS sites
Sitecore Experience Edge is a centralized distribution layer to manage the content
With Sitecore Experience Edge, you don't require the Sitecore Web Database and Sitecore Content Delivery Server
Consume by any channel and application platform
Support of Jamstack architectures to build a static website creation and deployed to Vercel then we can utilize Vercel's all-in-one platform with global content delivery networks (CDNs) which support the deployment and delivery of static and Jamstack apps

Sitecore Experience Edge availability

The Sitecore Experience Edge is a scalable content delivery service in the cloud available for following Sitecore Products

Sitecore Experience Manager

Sitecore XM Cloud

Sitecore Content Hub

Sitecore Content Hub One

Type of Sitecore Experience Edge API

This global Content Delivery environment (Experience Edge) provides you a Sitecore-hosted GraphQL (GQL) API. With these Edge GraphQL (GQL) endpoint you can build your solution in any language and pull the required content with the help of GraphQL (GQL).

The major GraphQL APIs of Sitecore Experience Edge are:

Preview API
Delivery API

The Preview and Delivery APIs are GraphQL endpoints, and these APIs are globally replicated and scalable, and provide fastest content/media delivery near to the user's location.

GraphQL is a query language for these APIs that gives you a flexible way to query the data. It also provides the flexibility to define API endpoints with custom url's. These endpoints host the schema, which is a strongly typed graph definition where endpoints understand the GraphQL language.

What is Sitecore Experience Edge Preview API?

For example, if we are using the Sitecore JSS Rendering SDK with Sitecore Experience Manager (CMS-only mode) for Headless development then Sitecore Headless Services provide a GraphQL (GQL) API end points that mirrors the schema and behavior of Experience Edge, based on the Sitecore GraphQL API.

This Sitecore Experience Edge for XM Preview GraphQL API endpoint enables, preview, editing, and local development without publishing to Experience Edge (SaaS instance) and you can utilize your self-hosted Sitecore XM instance.

This GQL API endpoint mirrors the GQL Schema of Sitecore Experience Manager (XM) GQL Production schema (this shema will work on both Sitecore CM and Sitecore CD- here Content Delivery is Sitecore Experience Edge) so that development team can do the development without relying on the Sitecore Experience Edge SaaS instance.
To get more information about Sitecore Experience Edge Preview API for different Sitecore Products, you can check below URL's

Sitecore Experience Manager

Sitecore XM Cloud

Sitecore Content Hub

Sitecore Content Hub One

What is Sitecore Experience Edge Delivery API?

The Sitecore Experience Edge Delivery API is a GraphQL API that used to deliver approved and published content and media to any app on any channel.

This API is optimized for performance and high availability, and support scaling and serve content faster. We will use this API for all production-related actions and provides a unified and strongly typed interface to access the published items.

To get more information about Sitecore Experience Edge Delivery API for different Sitecore Products, you can check below URL's

Sitecore Experience Manager

Sitecore XM Cloud

Sitecore Content Hub

Sitecore Content Hub One

Data caching at Sitecore Experience Edge

The Sitecore Experience Edge is Sitecore managed, optimized and scalable CaaS (CDN) offering, which caches content items/layout snapshot/media items located close to the users to serve content faster.

The Sitecore Experience Edge only acts as a CDN for content items/layout snapshot/media items that are within Content Management Role, and it will not do anything for Static HTML.

Every publishing of content from source (Content Management) invalidate the cached content at Sitecore Experience Edge CDN.

The media items (images/videos) stored in the Content Management (CM) Role and referenced in content items, would also be published to Experience Edge, and cached to Sitecore CDN. The media link url would be from Sitecore CDN not from Content Management (CM) Role.

For example, if we are using the Sitecore JSS Rendering SDK with Sitecore Experience Manager (CMS-only mode) for Headless development and using NextJS Client-side framework to build the Front-end and deployed to Vercel then we can utilize Vercel's all-in-one platform with global content delivery networks (CDNs) which support the deployment and delivery of static and Jamstack apps.

In the above diagram, NextJS app deployment to Vercel is not part of Sitecore XM Cloud.

How to test Sitecore Experience Edge GraphQL (GQL) queries?

To get more information about Sitecore Experience Edge GraphQL IDE for different Sitecore Products, you can check below URL's

Sitecore Experience Manager

Sitecore XM Cloud

Sitecore Content Hub

Sitecore Content Hub One

Personalization support for Sitecore Experience Edge

The Sitecore Experience Edge has snaphshot of Layout Service output, so Experience Edge can not execute or support Sitecore personalization rules or content testing capabilities of Sitecore XM or Sitecore XP.

We can use Sitecore CDP and Sitecore Personalize on static websites for tracking and personalization purpose instead of Sitecore XP Personalization offerings.

If you are using Experience Edge for XM Cloud then on Content Management (CM) Role:

You will get Sitecore embedded Personalization (tenant of Sitecore CDP and its thin layer of Sitecore Personalize)
You will get limited support of personalization on Sitecore XM Cloud CM role and you don't get access to the full Sitecore Personalize tenant and would be using per-build templates to segregate/segment the end user's for content variation
You will get the advantage of User Interface (UI) for your pages to add personalization to your website (to reflect on your Head application) which not present in other Sitecore SaaS offerings
Full Sitecore Personalize license required

We can implement personalization using Edge middleware from the client-side framework, e.g., Sitecore JavaScript Rendering SDK (JSS) for Next.js and with the release of Next.js 12.2, Vercel Edge Middleware for Next.js available for all customers:

These Edge middleware works as Edge Functions
These Edge functions would be called before getting the data from edge cache and execute before a request is processed on a website
With middleware we can effectively implement personaliztion on statically generated content by execution of custom logic/rewrite/redirect/security check in server side logic at the edge

Please find below flow to implement, how you can use Edge Middleware to provide speed and personalization to your users:

Custom Code support for Sitecore Experience Edge for XM

For example, if we are using the Sitecore JSS Rendering SDK with Sitecore Experience Manager (CMS-only mode) for Headless development and using NextJS Client-side framework to build the Front-end and to get a custom response from component/rendering if you are using Custom Rendering Contents Resolver then it will work on Sitecore Experience Edge for XM.

During publishing to XM Edge, the layout of the pages is computed on the CM and Custom Rendering Contents Resolver also, then resulting layout service JSON would be send/published to XM Edge CDN for delivery.

If any changes at source, then you have to republish the pages.

Security of Sitecore Experience Edge

The Sitecore Experience Edge provides many ways to secure the content and some options are:

Sitecore Experience Manager	You can utilize JSON Web Token (JWT) for authorization purpose to execute any operation in any of Experience Edges protected APIs other than the Delivery API You can use API Key to authenticate Experience Edge several APIs, and for this first use OAuth to obtain a JWT before you create an API key, and after that pass the API key to perform the operation on GQL APIs You can secure call of Experience Edge by using server side code execution on Client-side framework e.g. Next.Js getServerSideProps
Sitecore XM Cloud	You can utilize JSON Web Token (JWT) for authorization purpose to execute any operation in any of Experience Edges protected APIs other than the Delivery API You can use API Key to authenticate Experience Edge several APIs, and for this first use OAuth to obtain a JWT before you create an API key, and after that pass the API key to perform the operation on GQL APIs You can secure call of Experience Edge by using server side code execution on Client-side framework e.g. Next.Js getServerSideProps
Sitecore Content Hub	You need an authentication API key to access both the Preview API and the Delivery API You can create a key using the token API or from the Sitecore Content Hub UI The API keys operation lets you create an authentication API key to access either the Preview API or the Delivery API
Sitecore Content Hub One	You can utilize API key to use both Preview API and Delivery API You must authenticate with an API key. The key must be provided in HTTP requests to the API as an HTTP header with the name X-GQL-Token. To obtain an API key, use either the Content Hub ONE app or Content Management API

Limitations of Sitecore Experience Edge

The Sitecore Experience Edge has following high-level limitations and restrictions, and for details you can check Limitations and restrictions of Experience Edge of Sitecore XM / Sitecore XM Cloud:

The Sitecore Experience Edge not support personalization capabilities of Sitecore XM and Sitecore XP
The Experience Edge schema can't be extended
You can't customize (custom indexes) the index schema in Experience Edge because Solr indexes are not accessible via Edge or XM Cloud, and they are only used by the Content Management Admin UI
You wouldn't be getting Sitecore Web Database
The Experience Edge GraphQL (GQL) search queries are quite limited and support basic search, but for the advance search support you have to rely on third party search providers like Coveo, SearchStax or utilize Sitecore Search

Credit/References:

Edge Middleware	Edge Functions Examples	Sitecore Experience Edge for XM Preview GraphQL endpoint
The architecture of Sitecore Experience Edge for XM	We’re thrilled to announce groundbreaking Sitecore Experience Edge	Limitations and restrictions of Experience Edge for XM
XM Cloud Introduction	How to optimize your omnichannel content strategy	Sitecore Slack Conversations
Sitecore Content Hub Edge GraphQL IDE	Sitecore Authoring and Management GraphQL API	Sitecore Experience Edge for XM Preview GraphQL endpoint
Sitecore Experience Manager	Deliver headless content at scale with Sitecore Experience Edge	How to optimize your omnichannel content strategy
Sitecore Content Hub One	Sitecore Headless Services and APIs	Sitecore GraphQL (GQL)
Sitecore Experience Edge for XM	Experience Edge for XM APIs	Overview of headless development with Sitecore
Experience Edge for Content Hub	Sitecore Experience Edge for Content Hub	Limitations and restrictions of Experience Edge for XM Cloud
Sitecore Experience Edge for XM Cloud Preview GraphQL endpoint	The Experience Edge schema for Sitecore XM	Sitecore Experience Edge for XM Cloud
Test queries of Sitecore Experience Edge for XM Cloud	Experience Edge for XM APIs	Sitecore Content Hub ONE Documentation
Experience Edge for XM	sitecore experience edge connector	sitecore experience edge architecture

Pingback:

Sitecore Slack Conversations	sitecore experience edge connector	sitecore experience edge architecture
sitecore experience edge subscription	sitecore experience edge for xp	sitecore experience edge preview
sitecore job description	sitecore examples	sitecore developer salary
sitecore edge	experience edge for xm	sitecore experience commerce
sitecore experience accelerator download	experience edge sitecore	experience edge
experience editor sitecore	edge-core	sitecore experience explorer
sitecore experience editor not editable	sitecore experience manager	sitecore experience profile
sitecore xp features	what is sitecore experience edge	sitecore view rendering example
sitecore support jobs	experience editor sitecore not working	sitecore experience editor
experience profile sitecore	sitecore experience platform	sitecore experience accelerator
sitecore horizon vs experience editor	sitecore experience edge xm	xp vs xm sitecore
edge-core switch	experience accelerator sitecore	sitecore 8 end of life
sitecore 9 end of life	itecore experience edge customization	sitecore experience edge api
Building custom Sitecore images	Copying Files To And From Docker Containers - Baeldung	Understanding Docker Volumes
sitecore xconnect data	sitecore xconnect api	Sitecore Docker images repository
sitecore disable xconnect	Sitecore xconnect core	xConnet api
sitecore xconnect data access	sitecore xconnect data api	sitecore xconnect data analysis
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore xconnect data analyst	Sitecore Version 10 - Sitecore Upgrade Process	sitecore xconnect data architecture
sitecore xconnect data azure	sitecore xconnect data already exists contact	sitecore.xconnect.xdbsearchunavailableexception
sitecore xconnect data backup	sitecore analytics	disable sitecore analytics
enable sitecore analytics tracker	sitecore analytics testing tools	sitecore analytics vs google analytics
sitecore analytics database manager	how to enable sitecore analytics	sitecore analytics reports
sitecore analytics not working	sitecore analytics cookie	sitecore analytics custom reports
sitecore analytics api	sitecore analytics ip address	sitecore.analytics.tracker.current.session.identify as
sitecore and google analytics	adobe analytics integration with sitecore	sitecore analytics benefits
best sitecore websites	sitecore analytics power bi	sitecore analytics chrome extension
sitecore analytics.clustername	sitecore analytics.cookiedomain	sitecore analytics configuration
sitecore custom analytics	sitecore commerce analytics	sitecore.analytics.tracker.current is null
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Apply Custom CSS Styles to Sitecore Rich Text Editor

2022-11-28T16:20:00.001+05:30

The Sitecore Content Management System (CMS) is a simple and centralized content management system to manage the content. It provides a single source of truth for Content delivery because you can create content once and reuse across multiple channels.

The Sitecore CMS also provides flexibility to the content creation team so that they can create content for target audiences to engage them.

Recently I had a discussion with Content Authoring Team and UX Team, and they raised the concern that it’s very difficult to verify the look & feel of styling provided by UX Team while creating the content.

I thought of having the Content Preview instance and had discussion with the team, and due to time/budget need to drop the idea, so I suggested to add the Cascading Style Sheets (CSS) to the Sitecore Rich Text Editor to provide matching style as per the HTML mock-up for components.

Regarding this I searched over the internet and found useful articles present in Credit / Reference section.

I have gone through the resources, and thought to give a try on following Technical Stack:
• Sitecore Environment: Sitecore Experience Platform 10.2
• Sitecore Implementation: Sitecore Headless Services (using ReactJS)

I followed below steps to add the custom cascading style sheets (CSS) to the Sitecore rich text editor:

Things to consider:

The Sitecore Default Cascading Style Sheets (CSS) file present at <Web Root Folder>\default.css

You don’t need to do update the ToolsFile.xml file located at <Web Root Folder>\sitecore\shell\Controls\Rich Text Editor\ folder to add css class entries in <classes> node

You don’t need to update source property of rich text editor field

The Sitecore patch configuration file, if you are planning to deploy new Cascading Style Sheets (CSS) file instead of <Web Root Folder>\default.css then it should deploy only to Sitecore Content Management Role (at /App_Config/Include/zzz/zz.Sitecore.Custom.RTE-Styles.config ):

If you want to include new Cascading Style Sheets (CSS) file into Sitecore Default Cascading Style Sheets (CSS) file, then you can

<!-- Including new css file into <Web Root Folder>\default.css file -->
  @import "/assets/css/Sitecore.Custom.RTE-Styles.css";

Please keep in mind that it will first load the new file css classes then default.css file css classes, so changes of default.css file would be applied.

If you are adding any new style at Sitecore CMS CSS file then same name CSS class for different devices support needs to be added into the Front-end web app CSS file:

@media only screen and (max-width: 1279px) {
    h1.CT {
      /* H1 */
      color: #ffffff;
      font-family: "Arial";
      font-style: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 20px;
    }
    
  }
  
  @media only screen and (min-width: 1280px) {
    h1.CT {
      /* H1 */
      color: #ffffff;
      color: #ffffff;
      font-family: "Arial";
      font-style: normal;
      font-weight: 700;
      font-size: 30px;
      line-height: 50px;
    }
  }

You can’t verify styles for different devices in Sitecore RTE as per styles mentioned in previous steps so it can have changes like this:

h1.CT {
      /* H1 */
      color: #ffffff;
      font-family: "Arial";
      font-style: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 20px;
    }

To verify custom styles in RTE your RTE profile should have Style option enabled

If you update Front-end web app CSS file in terms of styling, then you have to apply same changes to Sitecore CMS CSS file so that Content Authoring team have updated changes for styling

During Sitecore upgrade process your changes would be overridden so you have to append the details from new /default.css file into to your custom Sitecore CMS CSS file and deploy to location as per config file present at App_Config/Include/zzz/zz.Sitecore.Custom.RTE-Styles.config

After deployment of custom styling changes to Sitecore Content Management role and go to any RTE profile where Styles enabled then you can check custom CSS styles:

Credit/References:

Separated .css file for Sitecore Rich Text Editor - Stack Overflow	User Specific or Multi Site Specific CSS styles in Sitecore Rich Text Editor \| jammykam (wordpress.com)	Apply CSS classes in Rich Text Editor \| Learn Sitecore Basics. (wordpress.com)
Adding custom CSS Class to Sitecore Rich Text Editor – The Relentless FrontEnd – Aackose Lal's Blog

Pingback:

sitecore rich text editor add css class	sitecore rich text editor css class	sitecore custom rich text editor
add css classes to sitecore rich text editor	sitecore customize rich text editor	sitecore customize rich text editor
adding custom css class to sitecore rich text editor	sitecore rich text editor custom button	rich text editor sitecore
rich text sitecore	sitecore rich text editor full	sitecore rich text editor javascript
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore xconnect data analyst	Sitecore Version 10 - Sitecore Upgrade Process	sitecore xconnect data architecture
sitecore rich text editor profiles	sitecore rich text editor	sitecore rich text editor snippets
sitecore html editor profiles	rich text editor profiles sitecore	custom rich text editor sitecore
sitecore rich text editor configuration	sitecore rich text editor javascript	sitecore rich text editor full
rich text editor features	sitecore rich text editor button	best rich text editor for website
sitecore rich text editor customization	sitecore rich text editor custom css	sitecore rich text editor css
sitecore change rich text editor profile	sitecore rich text editor links	sitecore rich text editor location
sitecore rich text editor options	sitecore rich text editor p tag	sitecore set rich text editor
sitecore rich text editor script	sitecore rich text editor table	Apply Custom CSS Styles to Sitecore Rich Text Editor
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Capture Sitecore xConnect data at runtime

2022-09-28T15:19:00.001+05:30

The Sitecore Experience Platform is an all-in-one solution for web applicant tracking with GDPR compliance capability.

The Sitecore enables you to track the user’s activities in different ways via Sitecore xConnect service layer. This micro service API end point available between the Sitecore xDB Collection database and Sitecore xDB index, and only trusted client or device can access Sitecore xConnect API endpoint. No other system has direct access to the xDB Collection database or the xDB index

When any visitor accessing your website then request will go to Sitecore Content Delivery Server to return the request, and Sitecore CD server internally interacting with Sitecore xConnect Service layer to track/return personalized content for requested users.

In order to capture the every foot print of a user, a Sitecore based website implementation generally captures user’s event as per Track events in JSS apps using the Tracking API (sitecore.com).

After data capturing, the main purpose of collected Sitecore Analytics Data is provide view which helps Business User’s to understand how Sitecore Website content is performing.

Sometime, Sitecore Out-of-the-box Sitecore Experience Analytics Reporting offering would not be helpful to target audiences. In those cases, we have to share/sync Sitecore Analytics Data (Sitecore xDB) captured via Sitecore xConnect micro services.

The one of the ways to capture the Sitecore Analytics data at run-time is using Sitecore xConnect Service Plugins.

With Sitecore xConnect Service Plugins (AmitKumar-AK/PowerBIPushIntegration -github.com) you can track following xConnect events:

├── Events
       ├── Batch executed
        ├── Batch executing
        ├── Batch execution failed
        ├── Operation added
        ├── Operation completed
        ├── Operation executing

In order to understand the utilization of the Sitecore xConnect Service Plugin you can consider the below flow in which during the registration process you are creating Sitecore Contact with custom facets and saving to Sitecore Experience Database (Sitecore XDB) via Sitecore xConnect offering. During this time, once you save the Sitecore Contact data, then on Operation Completed event request will come to the Sitecore xConnect Service Plugin and you can perform the required operation to capture the data and send to any data source for saving.

I would like to thanks Alexei Vershalovich and Artsem Prashkovich for sharing useful information related to Sitecore xConnect Service Plugin at Real-Time Power BI Dashboard from Sitecore xDB, Sitecore xConnect How-to: Service Plugin Implementation and PowerBIPushIntegration GitHub Repo.

I have updated the GitHub repo at AmitKumar-AK/PowerBIPushIntegration (github.com):
•    Sitecore XP 10.1.0 ready
•    Use of PackageReference in solution
•    Use of Microsoft.Build.CentralPackageVersions
•    Added the support for Contact Tracking and capture Sitecore OOTB Contact Facets and Sitecore Custom Contact Facets

After saving Sitecore Analytics data at run-time to your choice of data source with proper mapping (or data orchestration) you can create different reports for Business user’s which provide the application insight to them using any reporting tool like Microsoft Power BI.

You can find more information about Sitecore Tracking at:
• Tracking analytics via Sitecore Headless Services | AssureX
• Ways to track user web activity on Sitecore Headless Implementation | AssureX

Sitecore Project Solution on GitHub

Credit/References:

Real-time Power BI Dashboard from Sitecore xDB (brimit.com)	Sitecore xConnect How To: Service Plugin Implementation (brimit.com)	avershalovich/PowerBIPushIntegration (github.com)
Sitecore xConnect Service plugins (sitecore.com)	AmitKumar-AK/PowerBIPushIntegration (github.com)

Pingback:

Building custom Sitecore images	Copying Files To And From Docker Containers - Baeldung	Understanding Docker Volumes
sitecore xconnect data	sitecore xconnect api	Sitecore Docker images repository
sitecore disable xconnect	Sitecore xconnect core	xConnet api
sitecore xconnect data access	sitecore xconnect data api	sitecore xconnect data analysis
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore xconnect data analyst	Sitecore Version 10 - Sitecore Upgrade Process	sitecore xconnect data architecture
sitecore xconnect data azure	sitecore xconnect data already exists contact	sitecore.xconnect.xdbsearchunavailableexception
sitecore xconnect data backup	sitecore analytics	disable sitecore analytics
enable sitecore analytics tracker	sitecore analytics testing tools	sitecore analytics vs google analytics
sitecore analytics database manager	how to enable sitecore analytics	sitecore analytics reports
sitecore analytics not working	sitecore analytics cookie	sitecore analytics custom reports
sitecore analytics api	sitecore analytics ip address	sitecore.analytics.tracker.current.session.identify as
sitecore and google analytics	adobe analytics integration with sitecore	sitecore analytics benefits
best sitecore websites	sitecore analytics power bi	sitecore analytics chrome extension
sitecore analytics.clustername	sitecore analytics.cookiedomain	sitecore analytics configuration
sitecore custom analytics	sitecore commerce analytics	sitecore.analytics.tracker.current is null
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

Mind the order of instructions in a Dockerfile for Sitecore Containers

2022-06-21T06:37:00.004+05:30

The Sitecore provides flexibility and different deployment for Sitecore development, and one of the modern ways is Docker Container based Sitecore development and deployment to Kubernetes.

Sitecore provides full support for deploying solutions in a containerized environment of your choice and knowledge articles.

There are some cases which are project specific and may not be covered in Sitecore Official Documentations, and in this blog, I will be sharing one of the use case.

Problem Statement:

In Sitecore Experience Platform, there are flavours which can be utilized by individuals to deploy the application as per their need like Sitecore XP Single/Sitecore XP Scaled/Sitecore XM Scaled , and according to these topologies sometime you have to deploy files into Specific Sitecore Roles.

Credit: Sitecore

Solution:

The deployment of files mostly depends upon the way you have designed/structured your project code base. Some will follow three layered architecture/ Sitecore helix principles / Sitecore Helix Project Solution Template. Based on your requirements, you will write a logic into a specific layer. In my case, I have some configuration which needs to be deployed into a specific Sitecore Role in Containers from one image to a different image and different role. The Visual Solution structure is like:

├── src                                              # Main Source Folder
       ├── Environment                          # Environment related code base
               ├── platform                       # Source files which deployed to CM and CD
               ├── sitecore                          # Source files which deployed to CM
               ├── xdbcollection                # Source files which deployed to xdbcollection
├── docker                                        # Source files for docker build
       ├── build                                    # Docker build related files
               ├── cd                                  # CD Build folder
               ├── cm                               # CM Build folder
               ├── xdbcollection                # xDBCollection Build folder
               ├── xdbsearch                   # xDBSearch Build folder
├── docker-compose.override.yml   # Custom docker-compose file
├── Dockerfile                                    # Main Docker build file

For example, some configuration file which also needs to be xDBSearch which is present in xdbcollection source folder and deployed to xdbcollection role only via xdbcollection deployment.

I have tried to explain the flow of Main Docker Build file, which will build required artifacts and copy to specific environment folder in Solution Image, which is later used to build different Sitecore Containers:

Every Sitecore role has their own Dockerfile which will be used to deploy required artifacts on top of base/parent Sitecore Role image.

Our requirement is to deploy xDBCollection related artifacts into xDBSearch Role. The default xDBCollection and xDBSearch docker file:

Now, we have to deploy models from xConnect folder from Solution Image into xDBSearch. In this case, we have to update the xDBSearch Dockerfile present at \docker\build\xdbsearch\Dockerfile:

If you execute the docker-compose command, then you will get the following error :

COPY --from=solution /artifacts/xconnect/App_Data/Models/ ./App_Data/Models/ invalid from flag value solution: pull access denied for solution, repository does not exist or may require 'docker login': denied: requested access to the resource is denied ERROR: Service 'xdbsearch' failed to build : Build failed

The above error was encountered due to the wrong order of image used in Sitecore xDBSearch Dockerfile, e.g. we are trying to access the Solution image after the Parent image.

To resolve the error, we have to provide the correct order of images which we wanted to use:

By considering the correct order, you can deploy any file from any image into any Sitecore Roles.

Credit/References:

Run your first Sitecore instance	Build Sitecore solutions	Docker icons created by Freepik - Flaticon
Container icons created by Nhor Phai - Flaticon	Cloud icons created by kosonicon - Flaticon

Pingback:

Building custom Sitecore images	Copying Files To And From Docker Containers - Baeldung	Understanding Docker Volumes
Sitecore/docker-examples: Companion code for the	Containers in Sitecore development	Sitecore Docker images repository
Installing / Running the Examples \| Sitecore Helix Examples	Best practices for writing Dockerfiles \| Docker Documentation	Docker: adding a file from a parent directory - Stack Overflow
Optimizing Your Dockerfile. The ordering of instructions in a… \| by Erik Kristensen \| Medium	Dockerfile Cheat Sheet - Kapeli	A tutorial on building a Docker image for Sitecore
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Speed Up Sitecore Upgrade with PackageReference
Upgrade to Sitecore 9	Sitecore Version 10 - Sitecore Upgrade Process	Sitecore 10 Upgrade
sitecore docker	sitecore docker images	sitecore docker examples
github sitecore docker images	sitecore docker registry	sitecore docker getting started
sitecore docker github	sitecore docker cheat sheet	sitecore docker tools
sitecore docker compose	sitecore docker for traefik container is unhealthy	sitecore with docker
sitecore docker access to the path is denied	sitecore on docker	sitecore and docker
sitecore docker container	sitecore docker azure	sitecore-docker-tools-assets
sitecore 10 docker architecture	sitecore docker containers	sitecore docker container registry
sitecore docker custom images	sitecore docker container unhealthy	sitecore docker documentation
Sitecore JavaScript Rendering SDK (JSS) for Next.js	sitecore headless architecture	sitecore jss docker
sitecore disconnected mode	sitecore first jss	sitecore jss headless
sitecore jss helix	sitecore jss nextjs	sitecore nodejs
sitecore nextjs	sitecore ssr	next js sitemap
sitecore cancel publish	next js static site regeneration	next.js or gatsby
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services

API Reference: next.config.js Options \| Next.js (nextjs.org)	next.config.js Options: rewrites \| Next.js (nextjs.org)	Making Use of APIs in Your Front End \| by Patrick Pierre \| The Startup \| Medium
Setting up proxy in Next.js for DEV environment - DEV Community	next.config.js Options: rewrites \| Next.js (nextjs.org)	API client patterns every front-end developer need to know \| by Prasad Jayakumar \| Vue.js Developers \| Medium
How to use a proxy in Next.js - LogRocket Blog	javascript - Proxy to backend with default Next.js dev server - Stack Overflow	Next.JS — How To Proxy To Backend Server \| by Bhargav Bachina \| Bachina Labs \| Medium
Sitecore PLAY! Summit Demo Edge – GitHub	ChatGPT openai

Enlighten with Amit

Boost Sitecore Performance: Vercel Caching Strategies for XM Cloud Rendering Host

Table of contents

Sitecore Headless Website Architecture : Sitecore Headless CD, CM, and Headless Frontend Domains

Table of contents

How to Generate Dynamic Sitecore Packages Using PowerShell Scripts with Regex Filtering

Table of contents

How to Migrate Your Next.js App from Sitecore JSS to Content SDK

Table of contents

Site should load:

How to Fix Sitecore Content Serialization Errors (SCS) for Duplicate Items with Sitecore PowerShell (SPE)

Table of contents

Mastering ASP.NET MVC Deployment: How .wpp.targets Files Revolutionize Sitecore Project Publishing

Table of contents

Insights into Sitecore Search: A Definitive Introduction

Sitecore Experience Manager Cloud (XM Cloud) Building blocks

Streamlining Sitecore XM Development: Exploring Sitecore XM0 Topology Container Images

Elevating Your Sitecore Next.js App with Tailwind CSS: A Perfect Union of Design and Performance

Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container

Table of Contents

Troubleshooting Steps to Resolve the "Invalid Username or Password" Error in Sitecore Docker setup

Unlocking the Power: Utilizing API Proxies in Sitecore JSS Next.js Applications

Building a Non-Sitecore Page with Sitecore JSS and NextJS: A Step-by-Step Guide

How to upgrade Sitecore Containers setup

Why you need an API Layer in Sitecore Composable Architecture?

Sitecore NextJS Component Refactoring and Reusability

2023 Sitecore MVP

Sitecore Experience Edge GraphQL Queries

Quickstart guide - All about Sitecore Experience Edge

Apply Custom CSS Styles to Sitecore Rich Text Editor

Capture Sitecore xConnect data at runtime

Mind the order of instructions in a Dockerfile for Sitecore Containers