- Help center home
- Getting started
- Content model
- Managing content
- Working with entries
- Working with media
- Working with translations
- Managing users
- Roles
- Account settings
- Administration
- Content orchestration
- Compose
- Launch
- Workflows
- How to get help and support
- Guides
- Contentful certification
- Contentful glossary
- Manage cookie consent
- Apps
- Usage Limit
- Marketplace
Gatsby App Guide
On this page
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.
![Apps Gatsby Preview](https://images.ctfassets.net/aeu1amk9b600/5F7ijxnpvQNiD3tHYTD9AI/636b2961e46303611f064723a4c11334/gatsby-preview.png)
Overview
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:
Authenticate with Gatsby.
Add a new sidebar widget in Contentful which links to your site preview.
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.
![gatsby-content-sync](https://images.ctfassets.net/aeu1amk9b600/5r385YmVlRgZNzeLzPetsq/173bbd8fb9b668665346627b7c97bf74/gatsby-content-sync.png)
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.
![Apps Gatsby Preview](https://images.ctfassets.net/aeu1amk9b600/5F7ijxnpvQNiD3tHYTD9AI/636b2961e46303611f064723a4c11334/gatsby-preview.png)
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.