Local Gatsby Live Preview with Drupal

By shane
Fri, 2019-09-27 21:05
comments
GatsbyJS, React
Series: 
Introduction To Gatsby
Daily Dose of Drupal Episode #7

Share with Others

In this episode, you will learn how to set up Gatsby Live Preview with Drupal on a local development environment. We will walk through how to install and configure the Gatsby Drupal module as well as how to get the module talking to your Gatsby development site. Using this combination, you will be able to immediately preview your content on your Gatsby site after editing the content on your Drupal site, all within your local development environment.

View Full Text Transcript

Start by going through the past episode to learn how to get live preview working with Gatsby cloud. In order to set up local live preview with Gatsby, you need to make sure your Drupal site can communicate directly with your locally running Gatsby Development server over port 8000. If you are using something like Lando, DDev, or other docker based solutions, you will need to do some networking to ensure your Drupal site can access a locally running Gatsby development server.

If you want to make it easy, you can use Ngrok to create a local tunnel to your local development environment. Start by making sure you have your Gatsby development server running.

gatsby develop

Once you have Ngrok installed, you can run the following command in a new terminal window to get a Gatsby preview URL.

ngrok http 8000

Now take that URL provided and paste it on the Gatsby Live Preview Settings page in your Drupal 8 development website. You will now be able to live preview your content on your local Gatsby website!