Gatsby Cloud Docs

Add the Gatsby Preview extension to the Contentful Sidebar

See how to add the Gatsby Preview extension for faster preview updates

Table of Contents

Add the Gatsby Preview extension to the Contentful Sidebar

Adding this extension to the Contentful sidebar will make your preview edits update faster.

Prerequisites

The site must be set up with a Gatsby Preview instance. Please see “Getting Started with Gatsby Preview and Contentful”.

There are two ways to install the extension, through the Contentful Marketplace and manually. Both instructions are listed below.

Installing via Contentful Marketplace

To install the sidebar extension in your Contentful space via the Contentful Marketplace follow the steps below.

  1. Log in to your Contentful Dashboard

  2. In a new tab, visit the Gatsby Preview extension page on the Contentful Marketplace and click “Install Now”. Install extension from the Contentful Marketplace

  3. You should see a modal open titled, “Install from GitHub”, click install and you will be navigated to configure the extension. Select install from GitHub

  4. Select the “Field types” you would like to use the extension on. We recommend adding all of them. Select field types

  5. Fill in the input labeled “The url of your Gatsby Preview instance” with the URL of your Gatsby preview instance. You can find this on ‘/dashboard/sites’ or in the settings for the Preview instance.

  6. Fill in the input labeled “The url of the webhook to rebuild your Gatsby Preview instance” with the webhook URL of your Gatsby preview instance. You can find this in the settings for the Preview instance. Set URLs

  7. (Optional) Fill in the input labeled “Optional Authentication token for private Gatsby Cloud instances” with an authToken. This is necessary for Gatsby Preview instances that require the user to login before they can view the Preview. Set URLs and optional authToken

  8. Click Save in the top right corner to finish configuring the extension.

  9. Navigate to the Content Model configuration page. content model configuration page

  10. Select a content model and navigate to the “Sidebar” tab.

  11. Select “Use custom sidebar” and click the “+” button to add the Gatsby Preview extension to the sidebar. sidebar selection

  12. Click save to finalize the configuration of the Content Model. You can add the sidebar to each content model you would like to update in your preview.

  13. Navigate to a piece of content within Contentful. The sidebar will be installed and displayed to the right. button-on-sidebar-installed

You can navigate to the preview instance by clicking “Open preview”. Automatic updates are debounced 1000ms.

Manual Installation

To install the sidebar extension in your Contentful space manually, follow the steps below:

  1. Log in to your Contentful Dashboard.

  2. In the navbar, click Settings > Extensions.

  3. On the extensions page, click “Add extension” and within the dropdown click “Install from GitHub”. settings-extensions-selection

  4. You should see a modal open titled, “Install from GitHub”. In the URL input paste https://github.com/contentful/extensions/blob/master/samples/gatsby-preview/extension.json, and click install. You will be navigated to configure the extension. install-from-github-URL

Follow steps 5 through 13 from the Installing via Contentful Marketplace instructions above.