DOCSEARCHbyAlgolia
Submit Docs

Serge van den Oever's Weblog

website·Indexed 33 days ago

https://www.sergevandenoever.nl

A technical blog focusing on Sitecore development, including Sitecore JSS 9.1, SXA, XM Cloud, and React components in TypeScript. The site provides guides on Next.js on Azure, SXA CLI custom themes, Web Components with StencilJS, and various NodeJS and Azure Function implementations.

Tokens
48.6K
Snippets
183
Records
313
Agent score
62%

What's inside Serge van den Oever's Weblog

  1. Overview of the Sitecore XM Cloud Components Style Library

    The Style Library in Sitecore XM Cloud Components is a centralized repository used to manage and apply design elements across digital properties. It serves as the foundation for a design system by allowing teams to define design primitives and build comprehensive style rules that ensure visual uniformity and brand consistency.

    Key Capabilities:

    • Design Primitives: Define and organize foundational elements such as fonts, colors, graphics, and breakpoints.
    • Style Rules: Create reusable rules for typography, decorations, fills, and spacings based on the primitives.

    Benefits for Developers and Designers:

    • Consistency: Ensures all components adhere to a unified design language.
    • Efficiency: Reduces redundancy by allowing the swift application of predefined styles.
    • Scalability: Facilitates the expansion of design systems as new components and pages are added.
    • Maintenance: Centralized management allows updates to propagate uniformly across all components.

  2. Overview of the XM Cloud Deploy REST API

    The XM Cloud Deploy REST API (also known as the Sitecore XM Cloud GitOps API) allows for the automation of Cloud CMS modifications deployment to XM and frontend code deployment to the internal editing host. It is the same API used by the XM Cloud Deploy web UI. Requests to this API require an Authorization header with a bearer token.
    GET https://xmclouddeploy-api.sitecorecloud.io
Authorization: Bearer <token>

  3. Overview of Sitecore XM Cloud Components

    XM Cloud Components is a Front End as a Service (FEaaS) composer within the Sitecore ecosystem. It allows marketers, designers, and developers to collaboratively create, manage, and reuse visual components for digital experiences across various channels and devices.

  4. Overview of Umbrella for Sitecore JSS starter project

    Umbrella for Sitecore JSS is a starter kit designed for developing and hosting websites using the Sitecore JSS SDK and Sitecore as a headless CMS. It introduces several architectural improvements over the standard Sitecore JSS React starter, including:

    • Use of TypeScript for development.
    • Decoupling the frontend from the Sitecore CD server.
    • Hosting the frontend in Linux Docker containers using Node.js, Express, PM2, and NGINX.
    • Support for 'disconnected mode', allowing the site to run without a live Sitecore installation by embedding exported Sitecore items and media in the Docker container.

  5. Deploy Next.js on Azure Functions for Sitecore JSS

    To run Next.js on Microsoft Azure while maintaining support for Incremental Static Regeneration (ISR) and Sitecore JSS, use a consumption-based Azure Functions architecture combined with Azure CDN for page expiration. This setup allows the frontend to remain within the Azure ecosystem while leveraging Next.js features.
    Reference implementation available at: https://github.com/macaw-cad/nextjs-on-azure

  6. Use Cline for autonomous coding in Visual Studio Code

    Cline is an open-source Visual Studio Code extension that acts as an autonomous coding agent. It can create and edit files, execute commands, and use the browser with user permission. It supports 'Bring Your Own Model' (BYOM), allowing integration with various LLMs, including Azure OpenAI via an 'Open AI Like' API integration (e.g., when proxied through LiteLLM).

  7. Create a new SXA module using Helix architecture

    SXA modules should be created following the Sitecore Helix solution architecture. Use Insert > Module at one of the following layer paths:

    • Foundation: /sitecore/System/Settings/Foundation
    • Feature: /sitecore/System/Settings/Feature
    • Project: /sitecore/System/Settings/Project

    When creating the module, ensure the following container folders are generated:

    • Templates: /sitecore/templates/<layer>/<module>
    • Branches: /sitecore/templates/branches/<layer>/<module>
    • Settings: /sitecore/system/settings/<layer>/<module> (includes <module> site setup and <module> tenant setup items)
    • Renderings: /sitecore/layout/renderings/<layer>/<module>
    • Placeholder Settings: /sitecore/layout/placeholder settings/<layer>/<module>
    • Layouts: /sitecore/layout/layouts/<layer>/<module>
    • Media Library: /sitecore/media library/<layer>/<module>

  8. Troubleshoot missing XM Cloud Components access

    If the 'Components' tool is not visible in the XM Cloud Tools overview, try the following steps:

    1. Direct URL Access: Navigate directly to https://components.sitecorecloud.io. This should automatically redirect you to the correct organization and library.
    2. Verify Permission Claims: If the direct URL fails, verify that your user account has the required cmp. claims.
      • Capture the Authorization bearer token from a request to the Sitecore portal.
      • Decode the token using a tool like jwt.io.
      • Check the scope field in the JSON payload for claims starting with cmp. (e.g., cmp.components:read, cmp.components:create).
    // Required claims for XM Cloud Components access include:
cmp.sites:create, cmp.sites:read, cmp.sites:update, cmp.sites:delete
cmp.collections:create, cmp.collections:read, cmp.collections:update, cmp.collections:delete
cmp.components:create, cmp.components:read, cmp.components:update, cmp.components:delete
cmp.datasources:create, cmp.datasources:read, cmp.datasources:update, cmp.datasources:delete
cmp.variants:create, cmp.variants:read, cmp.variants:update, cmp.variants:delete, cmp.variants:style, cmp.variants:stage, cmp.variants:configure, cmp.variants:publish
cmp.styles:create, cmp.styles:read, cmp.styles:update, cmp.styles:delete, cmp.styles:stage, cmp.styles:publish
cmp.proxy:read
cmp.blobs:create

  9. Create a new site in the Sitecore Portal

    After configuring the XM Cloud environment, you must create a site to begin authoring.

    1. Navigate to the Sitecore Portal and locate the specific XM Cloud environment (e.g., 'dev') under the project overview.
    2. Select Open app to enter the XM Cloud environment.
    3. Select Create site. You can choose to start with an empty site or use a template, such as the Skate Park template.
    4. Configure the site details:
      • Site Name: The name of the site (e.g., 'skatepark').
      • Language: Select the primary language (e.g., English).
      • Site Identifier: Optionally provide a unique identifier used for analytics.
    5. Complete the creation process (typically takes up to 2 minutes).

    Note: The site is created within a 'Headless Site Collection' that typically shares the same name as the site.

  10. Understand XM Cloud Pages design hierarchy

    XM Cloud Pages uses a hierarchical structure for defining page layouts:

    • Partial Designs: Reusable parts of a page design composed of components. These are the smallest building blocks.
    • Page Designs: Combinations of partial designs that determine the overall layout of a page type.
    • Page Templates: Define the content to be displayed on a page via a Page Design. Templates are used in the Pages editor when creating new pages.

  11. Handle publishing events with Sitecore webhooks

    Sitecore provides specific webhooks to track the lifecycle of a publishing operation. These events provide metadata about the publisher's options and the current status of the process.

    Available publishing events:

    • publish_begin: Triggered when the publishing process starts.
    • publish_end: Triggered when the publishing process completes.
    • publish_fail: Triggered if the publishing process fails.
    • publish_statusUpdated: Triggered periodically to provide updates on the number of processed items and the current state.
    // Example publish:begin payload
{
    "EventName": "publish:begin",
    "PublisherOptions": {
        "CompareRevisions": false,
        "Deep": true,
        "Mode": "SingleItem",
        "SourceDatabaseName": "master",
        "TargetDatabaseName": "master",
        "RootItemId": "1e7a632b-3b98-4f6f-b3e3-e8155be4c9ae",
        "UserName": "sitecore\\serge@macaw.nl",
        "Languages": [ "en" ]
    },
    "WebhookItemId": "14d2921a-aab4-458f-bd9b-70ae7a5fb0ae",
    "WebhookItemName": "Webhook Test Event Handler"
}

  12. Use LiteLLM as an OpenAI-compatible gateway for cloud and local models

    LiteLLM is an open-source gateway that provides a unified OpenAI API interface for interacting with over 100 LLMs, including cloud providers (Azure OpenAI, Gemini, Anthropic) and local runners (Ollama, LM Studio). This allows tools that support "OpenAI Like" APIs (where a custom URL and API key are provided) to connect to various model backends without needing native support for each provider.