Forem: Jay Bonning

Sitecore Symposium Day 1

Jay Bonning — Thu, 17 Oct 2024 15:03:40 +0000

Well, it was my day 1 and think the key take away is AI everywhere. It will be key to delivering your organization's vision out to the world.

Sitecore Stream

Sitecore Stream looks to do amazing work for anyone doing digital marketing. Being able to coordinate your brand with Gen AI on the back end looks to button up how your organization presents sounds like a dream come true. This will even be coming to XP!

Content Hub

AI is going to be helping you with your content as well. Sitecore Steam will be able to be integrated directly into content hub, or if you already have a brand aware AI tool you will be able to integrate that. Providing a lot of help to content authors who have to do the crucial work of augmenting the metadata on content to make it easier to use/reuse. Many thanks to Jennifer Johnson and Heather Nicholis who shared their journey through around this.

Changes to SEO

Tiffany Laster and Megan Mueller Jensen brought an important lesson about the changes in SEO. Don't forget to be human. We have a ton of tooling, AI or not, to help generate content. This can lead to some bland/boring content that people don't engage with. Your voice needs to come through to maintain high rankings when it comes to people finding and interacting with your brand.

Setup and Use Sitecore CMP Connector. Part 1

Jay Bonning — Thu, 06 Jun 2024 19:16:22 +0000

That sure is a nice Sitecore Content Hub you've got there. It is a good bet that you would like to use some of that content on XM Cloud. So lets do that.

This might get a bit long. So, briefly, here is what I am going to be describing how to do:

Setup an Action and Trigger inside of Content Hub
Setup the CMP connector inside of your XM Cloud application
Setup data mappings for the content hub items.
List some issues I had along the way and how they were overcome.

Assumptions:

You have access to create Triggers and Actions in Content Hub.
The content item you need to sync has already been created. I will show off what the sample one looks like, but I will not go into its creation.
You have access to add variables to your Sitecore XM Cloud project.
You already setup an Oauth connection string setup in Content Hub that is being used to connect to the DAM. We will reuse this for the cmp connection, but these can be different if you have difference security requirements.

Content Hub Actions and Triggers

Create an action

Actions are the way we communicate between the two systems and triggers are ways to cause the action to fire.

The action we are going to want to setup is a service bus action. There are two types supported.

Azure Service Bus - An azure service bus setup and maintained by you. So some of this setup can be useful for any other downstream application that might want to use the date being emitted by Content Hub.
M Azure Service Bus - A service bus topic setup and maintained by Sitecore.

For this we are going to be using the 'M Azure Service Bus' because I don't want to have to setup and maintain anything myself. When you add a new action select the Type "M Azure Service Bus" and choose "Topic" as the Destination Type.

Make sure to copy the values that are generated in "Hub In" and "Hub Out". you will be using these later to setup the connection in XM Cloud.

Now we have a way to send the data, we need a way to trigger the information exchange to happen.

Create a trigger

We now need to tell Content Hub to actually send the message. For this instance we are publishing out a simple new article which has already been defined as a content item. The news article we are syncing between systems has a title and a rich text body.

It is also worth noting right now that this is also where we can see all the related taxonomy for content items in the system.

Setting up the trigger is fairly simple. We define basic information about the trigger. Here I want to make sure I check all the objectives, since I might be mutating the object later, and the execution type as "in background" so it does not stall out any of the processing.

The conditions can become quote specific. In this example I want to sync the object when a user has fully published the news item. The content item of "M.Content" has the information about the publish state and there is a separate publish flag that was added on the news item itself. I need to make sure both of these conditions are matched before I perform my action.

Now all we have to do is tie in the action we created earlier and we are all set to start sending out information.

Setup the CMP connection on XM Cloud

In your Sitecore XM Cloud deploy portal you will need to setup a few values to get your CMP functionality working.

SITECORE_AppSettings_cmpEnabled_define - Enables the CMP connector in the system. (yes or no)
Sitecore_ConnectionStrings_CMP_dot_ContentHub - Connection string to content hub. You can reuse your DAM OAuth connection string here.
Sitecore_ConnectionStrings_CMP_dot_ServiceBusSubscription - Name of the azure service bus subscription. More on this later.
Sitecore_ConnectionStrings_CMP_dot_ServiceBusEntityPathOut - HUB IN connection string from the service bus action that was setup.
Sitecore_ConnectionStrings_CMP_dot_ServiceBusEntityPathIn - HUB OUT connection string from the service bus action that was setup

This will cause the CMP items to start showing up inside of Sitecore.

Before:

After:

Now your application should be setup to receive information from Content Hub.

Some problems we ran into

The value for Sitecore_ConnectionStrings_CMP_dot_ServiceBusSubscription

It was not immediately apparent what the value of this was meant to be. If you are not familiar with how a topic works on Azure service bus it is basically a way to allow multiple "receivers" to handle the messages posted to a topic.

It was not the name of the action in Content Hub.
It was not derived from the action name.

after opening a ticket with Sitecore we did find out ours was named 'hub_out_subscription'. You can try this if you are having issue with your application receiving information. you might have to open a support request to get the name of yours though.

If you are setting up your own service bus, this will not be a problem.

Authentication / SSO

Working to get this up and going we also ran into an issue with authentication. Our content hub was originally setup to ONLY accept connections over SSO. This was causing the OAuth connection between Content Hub and XM Cloud to fail. We needed to go into Content Hub settings and set 'EnableBasicAuthentication' to true.

Setting up data mappings coming in part 2

Setup XM Cloud Multi-site on Netlify

Jay Bonning — Wed, 17 Apr 2024 17:06:59 +0000

We had some interesting struggles getting XM Cloud multi-site to work on Netlify. We would like to make it easier for other people to get this setup and running. Many thanks to Richard Seal for his help getting this all setup correctly.

A couple of notes before we start

This solution will pertain to a single Netlify environment that will be hosting several different websites at once.
Some of the solutions recommended below are known issues with Sitecore, and may not be steps you need to take in the future. At the time of writing this the application was on version 21.6.4 of Sitecore JSS. I will try to remember to indicate this, but I make no promises ahead of time.
Several images will contain information that is blurred out to maintain the confidentiality of the environment. Many pixels were harmed in the creation of this post.
There might be some sarcasm along the way.

Setup and The Problem

For this implementation the customer was looking to simplify the deployment of their smaller sites. So we setup several sites within one XM Cloud tenant.

Each of those had the site grouping setup with the appropriate Hostname, sitename, Predefined application rendering host, etc.

SXA Site Manager was even showing green lights across the board.

The problem that manifested is that when we would attempt to load any of the sites, we would get a continual reload of the page. Several times a second it would send a new request to the server. This didn't seem like an ideal solution.

If you page is doing this, open the developer tools in the browser. You will likely see it is attempting to get resources from the wrong website.

The Solution

Netlify Setup

So everything above is setup how it is supposed to be setup. Let's go to Netlify setup and pull out some juicy details.

FETCH_WITH : Usually going to be "GraphQL". We are not sure if this is really needed, but it does not hurt
PUBLIC_URL : This should be set to nothing. The field should be empty. See I am not lying
SITECORE_EDGE_CONTEXT_ID : This is the context id you get from the Sitecore deploy site.
SITECORE_SITE_NAME : This should correspond to the name of one of the sites above. Just one, no more. The rest is taken care of by the Nextjs multi-site plugin.

Code Changes

With that, Netlify should be setup. But wait, there's more, this is also what might be fixed in the version of the code you are using. So this may not be applicable.

We need to create an .env file with no values set. So open up the directory with your Nextjs application. (e.g. /src/'project name'/.env). I chose to copy the starter.env file because it had all the fields we needed to set. All the fields should be cleared though. In essence what happening is we are creating some default values for the websites in Netlify, and then using the Netlify environment variables to overwrite these defaults.

Here is a sample of that .env file in case you had deleted it:

# For development purposes, note Next.js supports a .env.local
# file, which is already configured to be git ignored.
# Read more about Next.js support of environment variables here:
# https://nextjs.org/docs/basic-features/environment-variables

# The public URL to use for absolute URLs, which are required when
# the Next.js app is run within Sitecore editors.
# This should match the `serverSideRenderingEngineApplicationUrl`
# in your Sitecore configuration (see \sitecore\config\sxastarter.config).
# Be sure to update these values accordingly as your public endpoint changes.
# See https://jss.sitecore.com/docs/fundamentals/services/view-engine
PUBLIC_URL=

# To secure the Sitecore editor endpoint exposed by your Next.js app
# (`/api/editing/render` by default), a secret token is used. This (client-side)
# value must match your server-side value (see \sitecore\config\sxastarter.config).
# We recommend an alphanumeric value of at least 16 characters.
JSS_EDITING_SECRET=

# Your Sitecore API key is needed to build the app. Typically, the API key is
# defined in `scjssconfig.json` (as `sitecore.apiKey`). This file may not exist
# when building locally (if you've never run `jss setup`), or when building in a
# higher environment (since `scjssconfig.json` is ignored from source control).
# In this case, use this environment variable to provide the value at build time.
SITECORE_API_KEY=

# Your Sitecore API hostname is needed to build the app. Typically, the API host is
# defined in `scjssconfig.json` (as `sitecore.layoutServiceHost`). This file may
# not exist when building locally (if you've never run `jss setup`), or when building
# in a higher environment (since `scjssconfig.json` is ignored from source control).
# In this case, use this environment variable to provide the value at build time.
SITECORE_API_HOST=

# Your GraphQL Edge endpoint. This is required for Sitecore Experience Edge.
# For Sitecore XM, this is typically optional. By default, the endpoint is calculated using
# the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
GRAPH_QL_ENDPOINT=

# Your Sitecore app name (also used as the default site name). Overrides 'config.appName' defined in a package.json
# Get this from the site > Settings > Developer settings , eg: 'brandstudio'
SITECORE_SITE_NAME=

# Your default app language.
DEFAULT_LANGUAGE=

# How many times should GraphQL Layout, Dictionary and ErrorPages services retry a fetch when endpoint rate limit is reached
GRAPH_QL_SERVICE_RETRIES=

# The way in which layout and dictionary data is fetched from Sitecore
FETCH_WITH=

# Indicates whether SSG `getStaticPaths` pre-render any pages
# Set the environment variable DISABLE_SSG_FETCH=true
# to enable full ISR (Incremental Static Regeneration) flow
DISABLE_SSG_FETCH=

# Sitecore JSS npm packages utilize the debug module for debug logging.
# https://www.npmjs.com/package/debug
# Set the DEBUG environment variable to 'sitecore-jss:*' to see all logs:
#DEBUG=sitecore-jss:*
# Or be selective and show for example only layout service logs:
#DEBUG=sitecore-jss:layout
# Or everything BUT layout service logs:
DEBUG=

# An optional Sitecore Personalize scope identifier.
# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
NEXT_PUBLIC_PERSONALIZE_SCOPE=

# Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=

# Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=

#Get this context from the 
SITECORE_EDGE_CONTEXT_ID=

That is just about it. You will likely need to do a build and deploy on Netlify to pick everything up. Publishing might not be a bad idea either.

I welcome your comments or questions. Together we make more time to do the fun things around implementations.

Add CSP to XMCloud

Jay Bonning — Mon, 11 Mar 2024 21:14:37 +0000

It is common that you are going to need to pull in external content and use or display it with your website. So, we need to tell the browser where those assets can come from by setting a few values in the header.

The Plugin

This new file will be based on the cors-header.js that is part of the base packages for XMCloud. So we need to create a new plug-in file. I named mine 'csp-header.js'.

src\<project name>\src\lib\next-config\plugins\csp-header.js

const config = require('../../../temp/config');

/**
 * @param {import('next').NextConfig} nextConfig
 */
const cspHeader = (nextConfig = {}) => {
  if (!config.sitecoreApiHost) {
    return nextConfig;
  }
  return Object.assign({}, nextConfig, {
    async headers() {
      const extendHeaders = typeof nextConfig.headers === 'function' ? await nextConfig.headers() : [];

      var fullCSP = '';

      fullCSP = fullCSP.concat(concatAttributes('default-src', config.customCSPDefault));
      fullCSP = fullCSP.concat(concatAttributes('img-src', config.customCSPImg));


      if(fullCSP.length > 0) {
        return [
          ...(await extendHeaders),
          {
            source: '/:path*',
            headers: [
              {
                key: 'Content-Security-Policy',
                value: fullCSP,
              },
            ],
          }
        ];
      }
      else { return [ ...(await extendHeaders) ];}
    },
  });
};

function concatAttributes(cspType, cspValue) {
  var returnAttribute = '';
  if(cspValue !== 'undefined' && cspValue.length > 0) {
    returnAttribute = cspType.concat(' ', cspValue.replace(/\\/g, ''), ';');
  }
  return returnAttribute;
}

module.exports = cspHeader;

There are a couple of things to point out here. I chose to pull this information in from a config so it could be changed. You could easily just put your CSP values in place of these lines

fullCSP = fullCSP.concat(concatAttributes('default-src', config.customCSPDefault));
fullCSP = fullCSP.concat(concatAttributes('img-src', config.customCSPImg));

It is also worth noting that you can also customize which pages this applies by adjusting the source.

source: '/:path*',

The last thing that you will need to know is you will need top stop and start your instance before this plugin is picked up by the application. Expect a decent amount of up.ps1 and down.ps1 while you are doing your testing.

Adding Config Entries

Working through this on a docker instance. I wanted to be able to place a value directly in the .env similar to how it would get set when you are setting up a hosting environment.

CUSTOM_CSP_DEFAULT="\'self\' \'unsafe-inline\' \'unsafe-eval\' data:"
CUSTOM_CSP_IMG="\'self\' data:"

I added these to my .env, but they need to wired into the config to be used by the plugin. To do this you will need to edit the file:

src\<project name>\scripts\generate-config.ts

I removed some lines and replaced them with ... below, but you will want to add an entry for each config line you want incorporated. Note that you can use the parameter directly, or use the constantCase function to pull it in. It will make the translation between the value CUSTOM_CSP_DEFAULT to customCspDefault when it is called.

const defaultConfig: JssConfig = {
...
  customCSPDefault: process.env[`${constantCase(`customCspDefault`)}`],
  customCSPImg: process.env[`${constantCase(`customCspImg`)}`],
...
};

Thanks

A lot of this came from help I received in the Sitecore Slack community. If you are not already there, I suggest you sign up.

Also the people on my team who put up with me on a daily basis.