Sitecore Content Hub One Development: A Step-by-Step Guide

Sitecore Content Hub One is a powerful platform designed to centralize and streamline content creation, management, and distribution across various channels. Whether you’re a developer new to Sitecore or experienced in content management, this guide will walk you through the essential steps for getting started with Sitecore Content Hub One development.

Why Sitecore Content Hub One?

Sitecore Content Hub One offers a flexible, API-first approach, allowing developers to integrate and distribute content seamlessly across digital platforms. Its headless architecture ensures that content is reusable, scalable, and adaptable to various channels and devices, making it ideal for modern content-driven applications.

Here’s a basic guide to development steps for working with Sitecore Content Hub One:

1. Set Up Your Sitecore Content Hub One Environment

• Access Sitecore Content Hub One: Ensure you have access to the platform. You’ll need a valid subscription to access the content management features and API.
• Create or Access Content Types: Navigate to the Sitecore Content Hub One admin dashboard to create or manage content types (e.g., blog posts, articles). Content types define the structure of the content you’ll be working with (text fields, images, rich text, etc.).

• Choose the Model content option as shown above, and create a new content type. For instance -

• After the content type is created, return to the dashboard and select the ‘Create content’ option. Click on ‘Create content item’ and choose the content type we just created in the previous step.

• Then, click ‘Continue’ to proceed and create the content item. For example —

2. Understand the API and Content Model

• GraphQL API: Sitecore Content Hub One uses GraphQL as its primary API for querying content. Familiarize yourself with how GraphQL works, as it allows you to specify exactly what data you want.
• Content Models: You’ll define and query content types (e.g., blog posts, articles, or pages) using Sitecore’s content models. Each model will have fields like text, images, or rich text, structured based on your business needs.

3. Generate an API Key

• Create an API Key: In the Sitecore Content Hub One dashboard, navigate to the API Keys section. Create a new API key, ensuring that it has the correct permissions to access the data and content you need.
• Security Note: Store this API key securely, and be mindful when sharing it in public repositories.

• In this example, we have generated an API key for the Preview endpoint. Be sure to save the key somewhere, as it will no longer be visible after creation.

• Next Step: Open the GraphQL IDE and retrieve the Blog Post item we created using a GraphQL query. For example—

query {
  demoPage(id: "P_t3Qzk8ckW13OTDzccCHw" ) {
    id
    name
    title
    description
    author
  }
}

HTTP HEADERS
{
  "X-GQL-Token":"YOUR_API_KEY"
}

• If everything is set up correctly, you should receive the query result as shown below:

Great! So far, we’ve successfully fetched the data using the GraphQL IDE. Now, let’s create a React demo app that will use the same GraphQL query and display the result on a page.

4. Setup React App (Frontend)

• Set up a basic React app using a tool like Create React App.

npx create-react-app sitecore-app
cd sitecore-app
npm start

• Install Apollo Client (for interacting with GraphQL) and graphql package.

npm install @apollo/client graphql

• In your React app, configure Apollo Client to communicate with Sitecore Content Hub One GraphQL API. In your src directory, create a new file called ApolloClient.js to set up the Apollo Client and replace the key and GraphQL endpoint with your actual value.

// src/ApolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://BASE_URL.sitecorecloud.io/api/content/v1/preview/graphql', // Replace with your GraphQL endpoint
    headers: {
       'X-GQL-Token':`YOUR_API_KEY`
    },
  }),
  cache: new InMemoryCache(),
});

export default client;

• Next, create a BlogPosts.js page and write your GraphQL queries to fetch data from Sitecore Content Hub One. For instance, if you're querying for a blogpost by ID, the query might look like this:

// src/BlogPosts.js
import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_BLOG_POSTS = gql`
  query GetBlogPosts {
    demoPage(id: "P_t3Qzk8ckW13OTDzccCHw") {
    id
    name
    title
    description
    author
    }
  }
`;

const renderDocContent = (doc) => {
  return doc.content.map((block, index) => {
    if (block.type === 'paragraph') {
      return (
        <p key={index}>
          {block.content.map((textBlock, textIndex) => {
            if (textBlock.type === 'text') {
              return (
                <span key={textIndex} style={{ fontWeight: textBlock.marks?.[0]?.type === 'bold' ? 'bold' : 'normal' }}>
                  {textBlock.text}
                </span>
              );
            }
            return null;
          })}
        </p>
      );
    }
    return null;
  });
};

const BlogPosts = () => {
    const { loading, error, data } = useQuery(GET_BLOG_POSTS);
  
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

   console.log(data.demoPage.description);

    return (
        <div style={{width:'70%'}}>
          <h1>My Blog Post</h1>
          <h2>{data.demoPage.title}</h2> 
          <div>{renderDocContent(data.demoPage.description)}</div>
          <b>Author: </b>{data.demoPage.author}
        </div>
      );
    };
    
    export default BlogPosts;

• In your App.js file, wrap your app with the ApolloProvider and display the BlogPosts component.
• Use CSS or a styling library like styled-components to style your content and match your design requirements.

import './App.css';
import { ApolloProvider } from '@apollo/client';
import client from './ApolloClient';
import BlogPosts from './BlogPosts';

function App() {
  return (
    <ApolloProvider client={client}>
    <div className="App">
      <header className="App-header">
        <BlogPosts />
      </header>
    </div>
    </ApolloProvider>
  );
}

export default App;

Step 5: Start the App

Run the app with npm start. You should see a blog post fetched from your Sitecore Content Hub One instance using GraphQL. Something like this -

Key Concepts to Remember:

1. GraphQL Queries: Fetch data using GraphQL to retrieve only the content fields you need.
2. API Key Management: Securely manage API keys and ensure proper authorization.
3. Content Models: Design and utilize content types based on the structure of your content in Sitecore Content Hub One.
4. Rendering Rich Text: If your content includes rich text, parse and render it appropriately in React.

You can find my other blogs here.

Thank you!