Adding Gatsby Cloud Extension to Sanity.io

⚠️ This is a legacy help doc. Please install the new Preview Extension for Sanity Studio.

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"
   }
   

2. 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: { sites: [{ siteUrl: "<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

• siteUrl - The Gatsby Cloud Preview url

What the widget should look like inside Sanity Studio

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