Sitecore has launched Sitecore Experience Edge for Content Hub, a solution using the Content Marketing Platform (CMP) to build static sites. This time, we demonstrated this solution in action.
Content Hub - Sitecore Experience Edge for Content Hub Demo
Digital Asset ManagementPublished: 2021-05-19
Check related information
For the purposes of this issue, it is assumed that you understand the following
The following licenses are also required
- Sitecore Content Hub - Content Marketing Platform
- Sitecore Experience Edge for Content Hub
Let us begin immediately.
Sitecore Content Hub CMP + Jamstack
As previously mentioned, information on the Sitecore Content Hub could be accessed via GraphQL.
Delivery of Content
The following pages are helpful regarding content delivery.
We have extracted the images shown on this page.
The points are as follows
- Data on product information can be retrieved via the Deliver Platform
- Sitecore CMP content is also provided through the Delivery Platform
- For Sitecore DAM data, images can be displayed via public link
This means that the data can be retrieved via the Delivery Platform and considered necessary by external channels.
Content collection
A new mechanism for Sitecore CMP is the addition of content collections.
The content that is added here can be used to manage the content that is published through the Delivery Platform. Of course, a workflow is provided for content to be added here, and only content that has been approved can be deployed.
This data can then be accessed through GraphQL endpoints.
Jamstack
As mentioned above, information is stored in the Sitecore Content Hub and can be accessed through GraphQL endpoints. As a mechanism to work together there, we provide a sample that supports Next.js, one of Jamstack's solutions.
What is Jamstack?
- JavaScript
- APIs
- Markup
The technical term is an acronym for the delivery of Markup data through an API using JavaScrip. While there are a variety of Jamstack solutions available, the following are some of the advantages of Next.js
- Able to build static sites
- Supports SSR (Server Side Rendering)
- React-based
One commonality in Sitecore development is that we also provide Next.js templates that work with the Sitecore Experience Platform, so you can build your website using the same technology.
Above all, because it is based on a static site, it is compatible with CDNs, and if personalization and other mechanisms are not required, it is possible to reduce the cost of stable operation.
Running the demo
Preparing for Sitecore Content Hub
Prepare the Sitecore Content Hub environment that is running in the previous article.
- Publishing must be enabled in the configuration.
- Valid API key is ready
- GraphQL endpoints can be accessed to retrieve results
Assuming you are in this state, proceed to the next step.
Repository Preparation
To get the Sitecore Experience Edge demo working, please keep a clone of the following repository on hand.
Create a file named .env in the root of this repository. The file should contain only two lines of configuration.
Plain Text
CH_TOKEN="<<CH_PREVIEW_TOKEN>>"
CH_URL="<<CH_PREVIEW_URL>>"
It does not actually work, but it is written as follows
Plain Text
CH_TOKEN="L0pYRkx6bmVYOWZtZmsxSVZqSkNuTm1YcU9jK2wwRXE4eTJBVFZYNkdkST18bGlnaHRob3VzZTQwMWph"
CH_URL="https://your-instance-name/api/graphql/"
Execution.
When using the repository locally, be sure to execute the following commands for the first time.
PowerShell
npm install
This can be done only the first time.
For actual execution, execute the following commands.
PowerShell
npm run dev
The following screen will appear
You can access the sample by going to http://localhost:3000, but the demo site will give you an error.
This error indicates that there is no data for the target content type after throwing a Query. Now all that is left is to prepare the content type in the Sitecore Content Hub - CMP and it will work. This part will be introduced later.
Summary
Unfortunately, the demo only showed an error because the sample data was not similar to the Content Hub side, but we were able to confirm that the Edge Portal demo built with the Next.js sample was referencing data from the Sitecore Content Hub. I was able to find some time to actually run the demo. I hope to find time to introduce additional steps to actually get it working.