Gatsby Cloud Docs

Adding Gatsby Cloud Extension to Sanity.io

See how to setup a preview button in Sanity

Table of Contents

Sanity Dashboard Widget: Gatsby

Installing this Sanity Studio dashboard widget will make it easier for content editors to access Preview from Sanity. The widget triggers Gatsby Cloud instances.

Prerequisites

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

Installing

Installing the dashboard plugin

If you haven’t installed the Sanity dashboard plugin yet, you’ll need to install it to get dashboard support in Sanity Studio in general. Run this command inside the studio folder:

sanity install @sanity/dashboard

Installing the Gatsby widget plugin

Then, install the Gatsby widget plugin by running this command inside the studio folder:

sanity install dashboard-widget-gatsby

Configuring

Implement your own dashboardConfig by following these steps:

  1. In your studio/sanity.json file, append the following line to the parts array:
{
  "implements": "part:@sanity/dashboard/config",
  "path": "src/dashboardConfig.js"
}
  1. Find the dashboardConfig.js file, which should be at the path specified in the previous step. The dashboardConfig.js and sanity.json should point to the same location. Add the gatsby widget config:
export default {
  widgets: [
    {
      name: "gatsby",
      options: {
        instances: [
          {
            instanceUrl: "<previewInstanceUrl>",
          },
        ],
      },
    },
  ],
}

Note: You can change the order of the widgets to change how they look in the studio dashboard. See Sanity docs here for more details.

Widget options

  • instanceUrl - The Gatsby Cloud instance url

What the widget should look like inside Sanity Studio

Now, when anyone opens Sanity Studio, they can access the button from the dashboard!

Image of the Gatsby Preview widget in the Sanity Studio dashboard