React-Based Contentful UI Extension

This is a boilerplate for a React-based UI Extension for Contentful.

This project was bootstrapped with Create React App. It was then "ejected" in order to add the HtmlWebpackInlineSourcePlugin plugin to our production webpack configuration, which allows us to inline all Javascript and CSS into a single index.html file. This is a requirement since UI Extensions expects all content to be in a single file.

Features

• Fully fledged React app, which is ideal for non-trivial UI extensions where a simple static web page just won't cut it.
• Local development mode with mocked Extension SDK.
• Simple build and deploy scripts.

Using this boilerplate

Clone this repository into a new project:

git clone git@github.com:shiftlab/contentful-react-ui-extension.git your-new-ui-extension
cd your-new-ui-extension

Follow the Setup instructions below.

Configure your extension.json. More info in the Configuration section.

Change the origin remote for this project to your own Git repository and push it up.

Build up your extension in App.js. More info in the Building your extension section.

Setup

Clone this project.

Install dependencies by running yarn.

Configure an .env file:

SPACE_ID={space id from contentful admin}
CONTENTFUL_MANAGEMENT_ACCESS_TOKEN={management token from contentful admin}

Configuration

UI Extension configuration options are provided with a descriptor file called extension.json.

Details on configuring this file can be found here.

Building your extension

By default, App.js does the following:

1. Initialize the Contentful UI Extensions SDK
2. Retrieve the current value of the field from the SDK
3. Shows that value in an input field
4. Provides a simple "Update" button which updates the field

So when your start this app for the first time, you will simple see this:

<input type="text" value="A value" />
<button>Update</button>

When you are running this app in development mode, you'll see the value as "A value". "A value" comes from a call to our mocked SDK, which is defined in api.js.

api.js currently mocks out two methods in development mode; getValue and setValue. Calls to getValue will always return a static value configured inside of api.js. setValue will simply return an empty Promise, also defined in api.js.

For other methods from the SDK that are not mocked out, you can easily provide your own mock implementation in api.js as you need them. Ex:

  space: {
    // Mocks https://contentful.github.io/contentful.js/contentful/5.0.5/ContentfulClientAPI.html#.getEntry
    getEntry: id => {
      return Promise.resolve(mockEntry);
    }
  }

As your app grows, you'll want to evolve the mock api to include behavior consistent with what you'd actually experience when deployed.

Styling

Use styles provided by https://contentful.github.io/ui-extensions-sdk/cf-extension.css

Available commands

• yarn start - Start server in development mode for local development
• yarn build - Builds deployable UI extension
• yarn deploy - Deploys extension to Contentful