# React-Based Contentful UI Extension

This is a boilerplate for a React-based UI Extension for [Contentful](https://www.contentful.com/developers/docs/concepts/uiextensions/).

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/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.

![screenshot](https://user-images.githubusercontent.com/1427475/34419128-1f9a6662-ebd0-11e7-966d-7a9c09069a27.png)

## 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](#setup) instructions below.

Configure your `extension.json`. More info in the [Configuration](#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](#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](https://github.com/contentful/contentful-extension-cli#descriptor-files).

## Building your extension

By default, `App.js` does the following:
1. Initialize the [Contentful UI Extensions SDK](https://github.com/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