Headless CMS for React

Adding CMS capabilities to any React application is not that hard. In this brief tutorial, we will show you how to add ContentChef as your headless cms solution. You just need a working React/NextJS app or start a new one with our NextJs starer.

Setting up

Every trial account of ContentChef comes packed with example contents, so to get started, you need to start the 30-day free trial. After signing up just login and note down your SpaceId and Online API key that you find right in your dashboard home page.

The channel ID that for this demo is "example-ch".

And this is an example of the payload of content JSON we will get from our Delivery API, it's a simple content repesenting a website with a url, a title and a image.

    {
        "title": "ContentChef",
        "description": "Accelerate content management for any digital experience.",
        "url": "https://www.contentchef.io",
        "image": "demo-xxx/7vZXiMPqEg7/contentChef-logo"
    }

To use this content you don't have to do nothing as it's alredy defined and published, so it's ready to use!

Now just add the ContentChef Javascript SDK with a simple npm command(you can skip thi step if you are using our starter!):

# install it using npm
npm i --save @contentchef/contentchef-node

# or if you use yarn
yarn add @contentchef/contentchef-node

#or just run install if you are using our starter
npm install

Adding content to a React component

Start by creating a support js file where you can instantiate the ContentChef client with the data you have noted down before. We also create a little helper function to transalte the image publicID we get in the JSON payload in a full URL that can be used by our presentation layer. This is the example from our starter.

import ContentChefClient, { createUrl } from '@contentchef/contentchef-node';

class ContentChef {
  client;
  targetDate;
  defaultChannel = 'example-ch';
  onlineChannel;

  constructor() {
    this.client = ContentChefClient({
      spaceId: 'your-contentChef-spaceId',
    }, this.targetDate);
    this.onlineChannel = this.client.onlineChannel('your-contentChef-api-key', this.defaultChannel);
  }

  setTargetDate = (targetDate) => {
    this.targetDate = targetDate;
  }

  searchContents = async () => {
    try {
      return (await this.onlineChannel.search({
        skip: 0,
        take: 10,
        contentDefinition: 'top-site',
        sorting: '+onlineDate'
      })).data.items
    } catch (e) {
      console.log('an error occurred retrieving your contents');
      return Promise.resolve([])
    }
  }

  getContent = async (publicId) => {
    try {
      const result = await this.onlineChannel
        .content({
          publicId
        });
      return Promise.resolve(result.data);
    } catch (e) {
      console.log(`an error occurred retrieving your content ${publicId}`);
      return Promise.resolve(null);
    }
  }

  getImageUrl = (publicId) => {
    return createUrl(publicId);
}
}

export const contentChef = new ContentChef();

We created and exported a simple service with some utility methods and a serach method that is using the onlineChannel to find contents with a specific definition top-site and order them by the online-date property.

And now, let's integrate into a page component , by loading a list of contents from ContentChef and rendering them.

import React from 'react';
import { contentChef } from '../services/contentChefClient'
import { Card } from "../components/card";
import Layout from "../components/layout";
import Link from "next/link";

const Home = ({ topSites }) => (
  <Layout
    title={'ContentChef Top Sites'}
  >
    <div>
      <h1 className="title">
        Welcome to <a href="https://contentchef.io">ContentChef!</a> + <a href="https://nextjs.org">Next.js</a> tutorial
      </h1>
      <p className="description">
        Top Sites
      </p>
    </div>

    <div style={{ width: "80%" }}>
      {topSites.map((site, index) => (
        <Link
          key={`top-site-${index}`}
          href={'/top-site/[publicId]'}
          as={`/top-site/${site.publicId}`}
        >
          <a style={{ textDecoration: 'initial' }}>
            <Card
              key={`top-site-${index}`}
              image={contentChef.getImageUrl(site.payload.image)}
              title={site.payload.title}
              description={site.payload.description}
              url={site.payload.url}
            />
          </a>
        </Link>
      ))}
    </div>
  </Layout>
);

export async function getServerSideProps(context) {
  const result = await contentChef.searchContents();
  return {
    props: { topSites: result }
  }
}

export default Home

Now you have wired ContentChef and your NextJS app. If you want to test the complete example please clone or have a look to our NextJs starer, where you will find the other components missing here!

And now you have evritying in place and start the server with:

npm run dev

Your NextJS page component now ready and powered by ContentChef Delivery API, also enabled for Server Side Rendering!

Headless CMS for several frontend stacks including

Svelte, VueJs, React Native, Go, Java, Kotlin, Swift, and many more!