This guide will show you how to connect your Gatsby Cloud site to Drupal via manual configuration.
Prerequisites
This guide assumes you already:
- have a Gatsby project in a GitHub repository
- have a Drupal backend with content that your Gatsby project understands
- are familiar with how to create a Gatsby Cloud site from a repository
- are familiar with how to install Drupal modules
If you are unfamiliar with how to install Drupal modules, checkout Drupal's guide.
If you are starting a Gatsby project from scratch, check out the Create a Site from a Template tutorial instead.
1. Configure Environment Variables
In Gatsby Cloud, start creating a site using the Import from a Repository flow. Once you reach step 5, "Configure Environment Variables," add any environment variables necessary for the site to build.
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.
2. Configure Webhooks
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.
3. Install the Gatsby Live Preview Module
You can install the Gatsby Live Preview Module via the command line or the Drupal Admin.
Install via Command Line
If you know how to install modules through the command line, you can use Drush
drush en gatsby
or Composer
composer require drupal/gatsby
Install via Drupal Admin
First, visit the the Gatsby Live Preview project on Drupal.org. In the Downloads section at the bottom of the page, copy the URL for the tar file containing the module.
Next, log into your Drupal admin interface. Then, go to the Manage > Extend tab.
Press the Install new module button and enter the module URL you copied previously into the Install from a URL field. Then click the Install button.
Installing this module will also install the JSON:API module if you haven’t already installed it.
Finally, to install, we’ll select the “Gatsby Live Preview” module in our Extend view and press the “Install” button.
4. Configure Gatsby Live Preview module
In Gatsby Cloud, go to the CMS Preview tab for your site then copy the preview instance URL.
In Drupal Admin, go to the Manage > Extend tab. Next, click the Help icon under the Gatsby Live Preview module.
Click Gatsby Live Preview Settings, then paste your Gatsby Cloud preview instance URL into the Gatsby Preview Server URL field.
