Drupal this requires a manual integration.
Signing in to Gatsby Cloud
Select Sign in with GitHub. You’ll be asked to authorize the Gatsby Cloud app with your GitHub account. If you need to request access to one or more repositories, you can click “request access” here or later, when creating an instance.
Once signed in, configuring Gatsby Cloud with Drupal requires several steps that are walked through below.
Creating an instance
Once you’ve authenticated with Cloud and GitHub, you can create an instance from the “Create a new Gatsby Cloud site” page.
Use the “I already have a Gatsby site” flow to setup your existing site.
Pick your Gatsby site from the list of GitHub repositories. You can use the search input to narrow down the list.
If you don’t see your site, it might be because it belongs to a GitHub organization, rather than your personal account. You can connect a new GitHub Organization.
Note: Repositories must contain one Gatsby project configured at their root to be enabled. Gatsby Cloud works best with Gatsby version 2.20.16 and higher.
Select branch and publish directory
You’ll need to select a branch and then indicate the publish directory where the gatsby-config.js lives. If you leave the field blank, it defaults to the root of the site. Optionally, you may change the site name.
Once the branch and base directory are correct, select “Next.”
Create the instance
Manual Setup
First, click “Skip this step” to configure Drupal.
Gatsby Cloud will automatically try and detect environment variables necessary in your gatsby-config.js. However — you may need to add any additional variables that automatic detection missed. See “Setting up Environment Variables” for more info.
Note that you will be able to add, delete, or update these later on in “Site Settings”.
Once you’ve added the necessary environment variables, you can press “Create site” which will create your instance in Gatsby Cloud!
Setting up Environment Variables
If you have enabled authentication for your Drupal instance, you will want to add any necessary environment variables (e.g. DRUPAL_USERNAME, DRUPAL_PASSWORD, etc.) so that Gatsby Cloud can expose these variables to your application.
Adding the webhook to Drupal
To live-preview content from Drupal, you will need to do several things, specifically:
- Install the “Gatsby Live Preview” module
- Pass the Gatsby Cloud instance URL to the “Gatsby Live Preview” module
Doing each of these allows Gatsby Cloud to receive content updates from Drupal without refreshing or rebuilding. Excellent! Let’s get started.
Installing the “Gatsby Live Preview” module
In Drupal, modules can be installed in several ways.
If you know how to install modules through the command line, you can use Drush (drush en gatsby) or Composer (composer require drupal/gatsby).
If you’re unsure how to install modules, please proceed.
First, log on to your Drupal admin interface. Next, go to the “Extend” tab.
This view will allow us to install community modules (“Gatsby Live Preview” in this case).
Press the “Install new module” button and we’ll use the “Install from a URL” method.
At the time of this writing, the URL is https://ftp.drupal.org/files/projects/gatsby-8.x-1.0-alpha1.tar.gz, but please check the “Gatsby Live Preview” project for the latest version.
Installing this module will also install the JSON:API module if you haven’t already installed the JSON:API module.
Finally, to install, we’ll select the “Gatsby Live Preview” module in our Extend view and press the “Install” button.
Configure “Gatsby Live Preview” module
In “Create the instance” we created a Gatsby Cloud instance which exposes a preview URL. We’ll use that URL now. Let’s add this URL to our “Gatsby Live Preview” module.
In the “Extend” tab, tap “Help” on the “Gatsby Live Preview” module.
Tap “Gatsby Live Preview Settings”, paste the Preview URL, and tap “Save configuration.”
Note: We only need the base URL instance here, not the webhook URL.
Wrapping Up
At this point, you now have a Drupal instance configured to best support Gatsby Cloud. Edit content, and watch it appear live in Gatsby Cloud!