Gatsby App Guide (Deprecated)

Deprecation Warning

The Gatsby App is no longer available for new installations. Gatsby Cloud has been deprecated, and it is recommended that you use Netlify instead.

Overview

The Gatsby app connects to Gatsby Cloud which lets you see updates to your Gatsby site as soon as you change content in Contentful. This makes it easy for content creators to see changes they make to the website before going live.

The Gatsby app provides the following functionality:

• Allows users of a space to preview a build of a Gatsby site.

• Optionally trigger a manual build of a Gatsby site.

Requirements

To use this app, you will need a Gatsby website, which is pulling content from Contentful.

Under the hood

Internally, the app will:

1. Authenticate with Gatsby.

2. Add a new sidebar widget in Contentful which links to your site preview.

3. Optionally trigger a build manually if you provided a Webhook URL.

Usage

Step 1: Install and configure

Provide the URLs of Preview Webhook and Content Sync in your Gatsby Preview instance.

Step 2: Use the Gatsby widget from the entry editor

The Gatsby app creates a custom widget for the content preview experience. The widget shows an Open Preview button that takes you to the preview of your Gatsby site.

To navigate to the preview instance, click “Open Preview.” A webhook is sent to your Gatsby Cloud Preview site every time you open your preview. As your preview content is being built, Content Sync will display a loading page. This will automatically locate and redirect you to the correct page when it's available to view.

FAQ

What is Content Sync for Contentful?

Content Sync is a tool that allows content editors to open links by clicking “Open Preview” and routing them to the correct URL. As a service that handles the loading/error state of builds, it helps content editors see the preview status. For example, when a change has been made or to check if anything is wrong. 

NOTE: For now, you can still use legacy Previews without Content Sync as an option, but we will remove them in future versions. To set up legacy Previews according to the old flow, go to the “Advanced Settings.” Add the frontend URL of your Gatsby Cloud Preview site to the "CMS Preview" field by leaving the "Content Sync" field blank.

What happens with the Authentication token in the Contentful web app?

The token is used during communications with Gatsby to trigger new builds of your Gatsby site when content on Contentful is updated.

Who will be able to trigger Gatsby builds with this app?

The app triggers builds when content is updated. If you'd like to manually trigger builds, you will need to provide a Webhook URL on the app configuration page. A button will appear in the Gatsby sidebar widget to allow you to trigger the build.