Experience Edge Connector in a Docker based Sitecore Solution

No comments

In the last article overview on Experience Edge and in this article we will see how it is configured in a docker based setup and how to test it out.

Configuring Experience edge Connector

1. Configuring Connection string and CM service

First step is to add Experience edge connector module in the CM instance and setting up environment variables associated to it.

Create a custom Connectionstrings.config.xdt (under ./docker/build/cm/transforms/app_config), which will have XE connectionstrings for the Publishing Target that needs to be created (Make sure to create it and copy the id which will be set in docker-compose file below)

<?xml version="1.0" encoding="utf-8"?>
<connectionStrings xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
<!-- Had to include two connectionstrings as "experienceedge" is used for publishing target and the "experienceedge.authority" is used for setting up connection during publishing, without this there is an issue while publishing -->
 <add name="experienceedge.authority" connectionString="" xdt:Locator="Match(name)" xdt:Transform="InsertIfMissing" />
  <add name="experienceedge" connectionString="" xdt:Locator="Match(name)" xdt:Transform="InsertIfMissing" />
</connectionStrings>

2. Configuring Exp edge module in CM service (usually in docker/cm/dockerfile path):

ARG SOLUTION_IMAGE
ARG TOOLING_IMAGE
ARG SMS_IMAGE
ARG SPE_IMAGE
ARG EXPERIENCE_EDGE_CONNECTOR_IMAGE
ARG HEADLESS_SERVICES_IMAGE

FROM ${SOLUTION_IMAGE} as solution
FROM ${SMS_IMAGE} AS sms
FROM ${SPE_IMAGE} as spe
FROM ${HEADLESS_SERVICES_IMAGE} as headless_services
FROM ${EXPERIENCE_EDGE_CONNECTOR_IMAGE} AS exp_edge_connector
FROM ${BASE_IMAGE}

SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
COPY --from=sms  C:\module\cm\content ./
# Add the SPE module
COPY --from=spe /module/cm/content ./

# Configure Experience Edge Connector
COPY --from=exp_edge_connector C:\module\cm\content C:\inetpub\wwwroot
# Copy additinal files to container
COPY ./Transforms/ C:\module\xdt

# Copy and init the Headless Services module
COPY --from=headless_services C:\module\cm\content C:\inetpub\wwwroot
COPY --from=headless_services C:\module\tools C:\module\tools
RUN C:\module\tools\Initialize-Content.ps1 -TargetPath C:\inetpub\wwwroot; `
C:\module\tools\xdt\Invoke-XdtTransformations.ps1 -TargetPath C:\inetpub\wwwroot -XdtPath C:\module\xdt; `
Remove-Item -Path C:\module -Recurse -Force;

# Add solution website files
COPY --from=solution /artifacts/sitecore/ ./

3. Setting up Environment variables in CM service in docker-compose.override.yml

cm:
    image: XE-registry/xm1-cm:${VERSION:-latest}
    build:
      context: ./docker/build/cm
      args:
        BASE_IMAGE: scr.sitecore.com/sxp/sitecore-xm1-cm:${SITECORE_VERSION}
        SMS_IMAGE: scr.sitecore.com/sxp/modules/sitecore-management-services-xm1-assets:${SMS_VERSION}
        TOOLING_IMAGE: scr.sitecore.com/tools/sitecore-docker-tools-assets:${TOOLING_VERSION}
        SOLUTION_IMAGE: XE-registry/xm1-solution:${VERSION:-latest}
        SPE_IMAGE: scr.sitecore.com/sxp/modules/spe-assets:${SPE_VERSION}
        HEADLESS_SERVICES_IMAGE: scr.sitecore.com/sxp/modules/sitecore-headless-services-xm1-assets:${HEADLESS_SERVICES_VERSION}
        EXPERIENCE_EDGE_CONNECTOR_IMAGE: scr.sitecore.com/sxp/modules/sitecore-experience-edge-connector-xm1-assets:${EXP_EDGE_CONNECTOR_ASSET_VERSION}
    depends_on:
      - solution
    volumes:
      - .\docker\deploy\sitecore:C:\deploy
      - .\docker\data\cm:C:\inetpub\wwwroot\App_Data\logs
      - .\docker\data\license:c:\license
    environment:
      SITECORE_LICENSE_LOCATION: c:\license\license.xml
      SITECORE_DEVELOPMENT_PATCHES: DevEnvOn,CustomErrorsOff,DebugOn,DiagnosticsOff,InitMessagesOff,RobotDetectionOff
      Sitecore_AppSettings_exmEnabled:define: "no" # remove to turn on EXM
      RENDERING_HOST_EDITING_ENDPOINT_URI: http://rendering:3000/api/editing/render
      RENDERING_HOST_PUBLIC_URI: "https://sc-rendering-host-url"
      JSS_EDITING_SECRET: xxxx-xxxx-xxx
      ## XE connection string should look something like below
	  ## url=https://${XE-Endpoint}/oauth/token;client_id=${client_id};client_secret={XE-Client-Secret};audience={XE-Delivery-Node}
	  ## you should receive Authority, CDNUri , CDN Prefix, Delivery endpoint from Sitecore
      Sitecore_ConnectionStrings_ExperienceEdge.Authority: "${XE_ConnectionString}"
      Sitecore_ConnectionStrings_ExperienceEdge: "${XE_ConnectionString}"
      Sitecore_ExperienceEdge_CDNUri: "${XE_CDN_URI}"
      Sitecore_ExperienceEdge_CDNMediaPrefix: "${XE_CDN_MEDIA_PREFIX}"
      Sitecore_ExperienceEdge_DeliveryEndpoint: "${XE_DELIVERY_ENDPOINT}"
      Sitecore_ExperienceEdge_SolrCoreName: "${SOLR_CORE_PREFIX_NAME}_master_index"
      Sitecore_ExperienceEdge_DeliveryEndpoint_CircuitBreakerAttemptsBeforeBreak: "12"
      Sitecore_ExperienceEdge_DeliveryEndpoint_CircuitBreakerDurationOfBreak: "00:15:00"
      Sitecore_ExperienceEdge_DeliveryEndpoint_TransientFailureRetryCount: "3"
      Sitecore_ExperienceEdge_DeliveryEndpoint_TransientFailureSleepTime: "00:00:10"
      Sitecore_ExperienceEdge_EnableItemLanguageFallback: "false"
      Sitecore_ExperienceEdge_EnableFieldLanguageFallback: "false"
	  ## Publishing Target ID for XE-Edge
      Sitecore_ExperienceEdge_PublishingTargetId: "{xxx-xxx-xxx-xxx-xxx}"
    entrypoint: powershell.exe -Command "& C:\tools\entrypoints\iis\Development.ps1"

4. Configuring Rendering Host (NextJS) app to use Experience Edge GraphQL Endpoint

Final step is to configure Rendering Host to use Experience Edge GraphQL Endpoint, it can simply be done through Environment settings section for Rendering Host service.

Add below set of settings in Environment section of Rendering service. Please refer to this Sitecore Documenation to create an API key which will be used by rendering host to query contents in Experience Edge.

      GRAPH_QL_ENDPOINT: "http://edge.sitecorecloud.io/api/graphql/v1"
      SITECORE_API_KEY: "{API-KEY}"
      DEBUG=sitecore-jss: "*"
      DEBUG_DEPTH: "20"

That’s it – – you can now publish to the new publishing target , i.e to Experience Edge 😀 . After publishing, you can test out using GraphQL playground that is available in Edge.

Image from Sitecore : Graphql Playground in Experience Edge

Hope you got an idea how Experience edge connector is configured with Sitecore !! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.