Creating a CMS-Powered Website with React and Storyblok

When I was just starting out in web development, I was attracted to Wordpress for its built-in power, and because it had a massive developer community where you could find answers to figure out how to do pretty much anything. I wasn't very technical at the time, but I was eager to start building things and Wordpress felt like a pretty good place to start.

Web development has changed significantly, and over the years I saw a major shift in how websites were developed. Node.js became immensely popular as well as other JS libraries like AngularJS and then React. I remember I went to a local interactive workshop in Boston and learned about Yeoman and how you could easily create a MEAN, (Mongo, Express, Angular, Node) project by typing npm install -g generator-mean-stack and yo mean-stack in your console. I didn't really know a lot about what technologies made it possible to do that but I was pretty excited about the streamlined project creation after spending a lot of hours struggling to get projects up and running because of configuration issues.

I started to think about this newer way I wanted to work and how I could apply it to my current project workflow, but I was really used to starting with Wordpress and didn't want to lose the powerful CMS framework that it provided. What I wanted though was something much simpler that could provide the CMS and nothing else, allowing me more easily deal with the visual presentation via React. It didn't take me long to find Storyblok, and boy was I happy.

I'm going to teach you how to setup a simple React app and feed it content from Storyblok. Let's get started.

Installing React

To install a fresh React project, type in your console:

npx create-react-app my-app --template typescript

This will install the typescript flavor of React which is totally optional but I couldn't live without Typescript now. After all the packages are downloaded, you can test to make sure your new app is running with:

npm start

If everything is good, you should see something like this in a new browser tab:

If you run into issues in the console, you might want to check to make sure you're running the correct version of node node -v. I'm using v14.17.0 at the time of this writing.

Installing Storyblok

Next, you need to install the Storyblok client package along with Axios, so you can request content from its api and feed it to your React app.

npm install storyblok-js-client axios -s

At this point, before we write any more code, you should go ahead and sign up for a free Storyblok account. Once you have the account created, you need to create at least one piece of content to use in the following example. You can start by adding a "Page", give the page a title, add a new block and call it "Text", and finally add a new field called "Body". It should look something like this:

Once the field is added, you can enter some text into the "Body" field shown in the main editor view. (I prefer to use the form as apposed the visual editor which can be configured in the tab "Config".

Once you've got some text in the Body field, you can Publish the page and exit the editor. Take note of the "Slug" information shown in the right-hand sidebar of the editor. We're going to use that to fetch the page from the api in the next steps.

Next you'll need to grab your API key from the Storyblok settings main tab. Copy and paste the "public" API key which is shown in the example below.

Fetching Storyblok Content from React

Back in your React app, open App.tsx and add the following lines:

Below the other imports at the top of the file, add: import StoryblokClient from "storyblok-js-client";

Now, within the App() main function, add:

const Storyblok = new StoryblokClient({
  accessToken: "YOUR-PUBLIC-TOKEN",
  cache: {
    clear: "auto",
    type: "memory",
  },
})

Storyblok.get('cdn/stories/demo').then(result => {
  console.log('result: ', result)
})

Replace the accessToken value with your public key from the previous step, and make sure the JavascriptStoryblok.get('cdn/stories/demo') line matches the slug to your Storyblok page.

Your App.tsx file should look something like this now:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import StoryblokClient from "storyblok-js-client";

function App() {

  const Storyblok = new StoryblokClient({
    accessToken: "YOUR-PUBLIC-TOKEN",
    cache: {
      clear: "auto",
      type: "memory",
    },
  })

  Storyblok.get('cdn/stories/demo').then(result => {
    console.log('result: ', result)
  })

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Once that is saved, go to your app running in the browser and look at the console, you should see the data returned from the Storyblok API!

That is really all there is to it. As a next step you could review the Storyblok API documentation, it will show you many more advanced ways to search for specific content, add paging, and other magic. There are many more advanced things you can do with Storyblok, but hopefully this was enough to get a feel for setting up a basic React + Storyblok project.

Cheers!