An introduction to Sitecore Content Hub ONE for developers

/ Miguel Minoldo

In this post, I will share the initial steps for embarking on your development journey with Content Hub ONE. As I recently got the opportunity to explore and get my hands on Sitecore’s latest light headless CMS SaaS offering, I am excited to pass on my knowledge and insights.

Content Hub ONE represents a cutting-edge solution that empowers developers and content creators alike to unleash their full potential. By combining the flexibility of a headless CMS with the convenience of a Software-as-a-Service (SaaS) platform, Sitecore has revolutionized the way we approach content management and delivery.

Content Hub ONE in a nutshell

Content Hub ONE stands as a cloud-native, agile headless Content Management System (CMS) designed to empower developers and marketers in launching centrally managed, reusable omnichannel experiences with utmost efficiency. It gives the ability to swiftly create, manage, and distribute content across diverse channels, regardless of its type. Offers business users an intuitive modern interface for content management, while developers can leverage its extensive APIs and SDKs to craft and deliver seamless omnichannel experiences.

Content Hub ONE main features:

  • A powerful content modeling user interface for creating structured, modular content
  • A modern, user-centric content authoring experience
  • Media management for image assets
  • Content management Swagger OpenAPI for developers to manage the content model and content items with full CRUD permissions
  • Preview and Delivery GraphQL API delivered through a geographically distributed layer (Sitecore Experience Edge) for the consumption of content into multi-channel experiences, at scale
  • JavaScript and Client SDK for developers to leverage a rich set of developer tools
  • Command line interface (CLI) to serialize and source control content and content types

Architecture

  • All data is sent and received as JSON. You can use the API tool of your choice with the Content Hub ONE APIs.
  • Content Hub ONE is integrated into Sitecore Experience Edge, which is a Sitecore-hosted platform that lets you publish your content and expose it through APIs. You can then query and deliver content and media using the Preview and Delivery APIs. You can also use the Content Management API to create, manage, and deliver content and media. Content Hub ONE also includes a Software Development Kit (SDK) and a Command Line Interface (CLI).
  • Delivery API and Preview API: these GraphQL APIs provide the functionality required to deliver content for consumption by the apps you develop. The Preview API lets you see uncached, in-progress content in a staging or test environment allowing you to see content updates quickly. The Delivery API is optimized for delivery and scale, handling published content in a production environment and using caching.
  • Content Management API: this REST API lets you create and manage content types, content items, as well as media items.
  • Content Hub ONE SDK: this SDK provides a unified set of APIs and tools that you can use to develop apps.
  • Content Hub ONE CLI: this CLI lets you deliver content and media from a Content Hub ONE instance to other systems through the SDK and APIs.

Getting started

Sitecore offers a range of starter kits tailored for various frameworks, serving as invaluable resources that greatly facilitate the initial stages of learning and development on this exciting new platform. These kits prove instrumental in getting started and taking those crucial first steps, providing a solid foundation for starting your development journey.

The primary objective of this post is to offer a concise yet comprehensive overview of Content Hub ONE, its development workflow, and the benefits derived from utilizing the provided starter kits. By grasping these key concepts, you will be well-equipped to embark on your Content Hub ONE journey with confidence.

In this case, I will utilize the Next.js starter kit, available here in Github, to demonstrate how easily one can get started. This tutorial will cover creating a new component from scratch and highlight key implementation considerations.

Steps

  1. The first step is to install the ContentHub One CLI:
choco install Sitecore.ContentHubOne.Cli --source https://nuget.sitecore.com/resources/v2/Net
  1. Then, we need to connect the CLI to our Tenant, for this, we need to give the Tenant information to the command:
ch-one-cli tenant add \
--organization-id <Organization ID> \
--tenant-id <Tenant ID> \
--client-id <Client credentials: OAuth client ID> \
--client-secret <Client credentials: OAuth client secret>

Note: you can find this information from the settings menu:

  1. After cloning the repository, we then need to install all dependencies, for that we run the install command:
npm install
  1. The next step is to duplicate the .env.example file and rename it to .env. Now we provide the following values to the variables:
  • SITECORE_CLIENT_ID –> You can find the Client Id in the Content Hub ONE app under ‘Settings’>’OAuthClient’>’ Client Credentials’
  • SITECORE_CLIENT_SECRET –> You can find the Client Secret in the Content Hub ONE app under ‘Settings’>’OAuthClient’>’ Client Credentials’

Now, we are ready to start pushing the starter kit content to our tenant. For doing this, there is a JS file provided

node setup

This script is going to perform the following actions:

  1. Create media assets (uploading the assets from ./setup folder).
  2. Create Content Types (from serialization/contentTypes folder).
  3. Push Content Items (from seralization/contentItems folder).

Note: check the scripts provided by the starter kit to accomplish most of the needed development functionalities, and the serialized content as yaml files.

If we go back to our tenant in the portal, we can see that the content types, content items, and media are now present:

We’re almost set, now we need to publish content types, content, and media. We can do it from CH1 interface or use the provided script, for the last option we simply run

node publish

This is just going to schedule the publishing, meaning that those won’t be available immediately and the script can take some time to finish.

Note: you can find also the unpublish.js and remove.js scripts that will take care of cleaning up the starter kit content.

Now we are set! Let’s start the app by running:

npm run dev

Creating a new component from scratch

With the starter kit demo site up and running, it’s time to delve into the core implementation concepts and kickstart the creation of our own component.

Previously, we explored the setup scripts provided by the starter kit, which expedited the Next.js project setup process. Now, let’s take a closer look at the additional resources it offers to facilitate our development journey.

For this example, we will focus on building a Promo Block component, adding some simple fields that will enhance our comprehension of the development workflow.

Creating the Content-Type

We start by creating a new type for the Promo Block component. From the CH1 interface, navigate to “Content Types” from the main menu, and then click on the “Add type” button. Give it a name and a description (optional), then we create three fields (Title, Description, and Image) with the following field types.

  • Title: Short text
  • Description: Rich text
  • Image: Media

Now, we want to add this component to the Homepage, so we edit the Homepage content type, click on “Add field” and choose “Reference” as type:

Entering the content

Now that we have the updated Homepage type, we can go to the content section and edit Homepage, adding, click on “Choose record” -> “Create new record” and finally choose the newly created “PromoBlock”.

This action will create a new content item for the PromoBlock type, you can now enter the content:

Note that CH1 provides a useful way of previewing the JSON output for every type or content we create:

Adding Media

For the Image field, we want to upload a new asset, for doing that we simply go to the “Media” section and clock in the “Upload assets” button. When is uploaded we can get back to the PromoBlock content and select the image we just uploaded.

We are done with the changes, we need now to publish the new content and focus in the front-end implementation.

Next.js app implementation

Adding the content type implementation

We will create the content type class for our Promo Block, since in this example the component is part of the Homepage, I’ll create it under the “types/Homepage” folder, so I create a new file called promoblock-type.ts

import {MediaResults} from "../Common/media-type" 
import { JSONContent } from "@tiptap/core";

type PromoBlock = {
    Title: string
    id: string
    Name: string
    Description: JSONContent
    Image: MediaResults
  }
export default PromoBlock

export type PromoBlockResults = {
  total: string;
  results: PromoBlock[];
}

Note that Title and Name fields come as text but Description is HTML (rich text) so then we use the JSONContent type. Also, note that Promo comes as an array of objects:

We also need to update the homepage-type.ts to reflect the changes we made in CH1 (add the PromoBlock):

Adding the component implementation

Now, we are ready to implement the component, again, as this is part of the Homepage, I’m creating it under the “components/Homepage” folder. Add a new file called promoblock-component.tsx

import stylesHp from '../../styles/Homepage/Homepage.module.css'
import { PromoBlockResults } from '../../types/Homepage/promoblock-type'
import { richTextProfile } from "../../lib/Common/richTextConfiguration";
import { generateHTML } from "@tiptap/html";
import Image from 'next/image'

type Props = {
  allPromoBlocks: PromoBlockResults;
}

const PromoBlock = ({allPromoBlocks}:Props) => {
  const promoBlock = allPromoBlocks.results[0];
  const output = generateHTML(promoBlock?.Description,[richTextProfile]);
  
  return(
      <div key={promoBlock.id} className={stylesHp.promoBoxOuter}>
        <h2>{promoBlock.Title}</h2>
        <div className={stylesHp.promoBox}>
            <Image 
                alt=''
                src={promoBlock?.Image?.results[0].fileUrl}
                width='250'
                height= '250'
                className={stylesHp.promoImage}
            />
            <p className={stylesHp.promoBoxText} dangerouslySetInnerHTML={{ __html: output }}>
            </p>
        </div>
      </div>
)
}

export default PromoBlock

Please note that the starter kit provides already a way to handle Rich text fields as you can see above. I’ve also created some CSS classes for this component, so it’s just a matter of adding those to the styles/Homepage/Homepage.module.css

Adding the needed changes to the GraphQL query

We need to update the query a bit so that it takes the new component and fields into account. For that, we add the “promo” component to the HOMEPAGE_QUERY in graphQl/Homepage/homepage-query.ts as follows:

Update the Homepage

Now that we are all set, we can go and add the component to the Homepage, we simply edit pages/index.tsx with the new Promo Block component:

Check the Next.js app

The newly created component is present with the content we provided.

Conclusion

We have thoroughly explored Content Hub ONE, delving into its main aspects, features, and architecture. Throughout this article, we have gained valuable insights into the development and implementation process, while also having the opportunity to create a component from scratch using the Next.js starter kit.

I hope this helps you as a developer to embark on your own projects with Content Hub ONE, leveraging its powerful capabilities and streamlined development experience.

References:

2 thoughts on “An introduction to Sitecore Content Hub ONE for developers”

  1. Pingback: Content Hub ONE: The Media Upload API + Adding AI to the recipe with Sitecore Connect and OpenAI | Miguel Minoldo

  2. Pingback: Introducing a New Integration for Builder.io: Content Hub ONE Data Plugin | Miguel Minoldo

Leave a comment