Gatsby Live Preview with Drupal and Gatsby Cloud

By shane
Thu, 2019-09-26 23:36
comments
Daily Dose of Drupal Episode #6

Share with Others

In this episode, you will learn how to set up Gatsby Live Preview with Drupal using Gatsby Cloud. We will walk through how to install and configure the Gatsby Drupal module as well as how to get your Gatsby site working in Gatsby cloud. Using this combination, you will be able to immediately preview your content on your Gatsby site after editing the content on your Drupal site.

First, we need to add our Gatsby Site to Gatsby Cloud. To do this, go to the root directory of your Gatsby project and use git to commit all your recent changes. You will need to be able to push your git repository to Github so make sure you have a repo created in your Github account for this Gatsby project (the repository can be private or public).


cd [gatsby-project-folder]
git add .
git commit -m “Adding recent changes”
git push

Next, go to Gatsbyjs.com and click on the Gatsby Preview link to get started. Click the 14-day free trial and sign in with your Github account.

Once you are logged in, click the purple Create Site button.

Gatsby Create Site Button

Select the option to Add my own site.

Gatsby Add Site

Select the correct Github repository from the list and click the Next button. You don’t need to add any integrations so click Next. Note the preview URL as we will need that on our Drupal site.

Now it’s time to open up your Drupal site. We need to download and install the Gatsby Drupal module.

composer require drupal/gatsby

Once the module is installed, go to the Gatsby configuration page which is located under Admin > Configuration > System > Gatsby Live Preview settings.

Add the preview URL from your Gatsby Cloud account and click save. That’s it! You can now start editing content on your site and it will be sent to the Gatsby Live Preview server.

If it is not working, double check you are passing only the id into your page templates on your Gatsby site and building your pages by pulling all the data from a graphql page query in your page component. Go through the previous lessons for more information on how to correctly set up your Gatsby site to work with Live preview.