Gatsby Live Preview with Drupal and Gatsby Cloud

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.

Select the option to Add my own 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.