Contact us
Back to all articles

Drupal and Gatsby Live Preview

Picture of Jesus Manuel Olivas
Jesus Manuel Olivas

Table of contents

After attending Decoupled Days at NYC and watching Shane Thomas talking about Live Preview with Gatsby and Drupal and showing the Drupal Gatsby Live Preview module. I got excited about it and decided to try the module and invest time improving some features. I also decided to add this feature to weKnow contributed Boina projects to make it more straightforward for people to try Drupal and Gatsby, including live preview. The live preview means that a content editor can update Drupal content and immediately after saving it. The editor will be able to see what it will look like on the Gatsby site before it gets deployed. In this video, you can watch a demo of Drupal and Gatsby Live Preview module. On the left side of the screen, you can see content added and updated using the Drupal GUI. On the right side, you can see the Gatsby site updating immediately based on content changes happening on Drupal. Starting now you can try Drupal with Gatsby including Live Preview by using the two Boina projects.

Drupal Boina Distribution

The Boina distribution comes with everything you need (code, configuration, and even default content). All of that will be added to your site during the installation process so you can start working with a Headless Drupal installation immediately.

Which modules include the Boina distribution?

  • Toast UI Editor: This module provides Markdown WYSIWYG Editor integration for Toast UI Editor. You can use this module to make sure Drupal JSON-API returns markdown to take advantage of as example the gatsby-transformer-remark plugin when using GatsbyJS.
  • Build Hooks: This module allows you to trigger a build hook on any service provider that supports build hooks. This module mainly provides privileged users with a UI to Trigger deployments of the connected static site(s) at will, or automatically via cron or when an entity is modified.
  • JSON-API Extras: This module provides zero-configuration out of the box. Use JSON:API Extras to customize your API. JSON:API Extras provides a means to override and provide limited configurations to the default zero-configuration implementation provided by the JSON:API module.
  • Gatsby Live Preview: This module provides support to live preview capabilities in Gatsby of Drupal content creation and edition.

Where do I find this project?

Github repository is located at https://github.com/weknowinc/drupal-boina

Project dependencies

Clone repository

git clone https://github.com/weknowinc/drupal-boina

Copy .env file

cp .env.dist .env

Add hostname entry in your /etc/hosts file

127.0.0.1    drupal-boina.develop

Start containers

ahoy up

Install Composer dependencies

ahoy composer install

Install Boina distribution

ahoy drupal boina:install

After following these instructions, you will have a fully functional Drupal site running at your local system via docker at http://drupal-boina.develop URL.

NOTE: If you do not have ahoy installed locally in your computer. You can replace the ahoy command using docker-compose exec.

Gatsby Boina Starter

The Boina starter ships with the main Gatsby configuration files you might need to get up and running on your Gatsby site integrated out-of-the-box with your Headless Drupal.

Which features the Gatsby Boina starter provides?

  • React components to render home, blog, and taxonomy pages.
  • Pre-configured RSS feed available at /drupalplanet.xml (make sure you use the drupal tag on your blog pages or make the proper changes on your .env files.
  • The starter uses the @weknow/gatsby-theme-drupal-boina theme as a base, which allows you to keep receiving updates and also to override look and feel.

Which plugins include the Boina starter?

Where do I find this project?

Github repository is located at https://github.com/weknowinc/gatsby-starter-drupal-boina

Project dependencies

Install Boina starter

gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina
cd boina

Copy environment file

cp .env.dist .env.development

NOTE: You should use .env.production for a production environment.

Update environment variables

DRUPAL_HOST=http://drupal-boina.develop/

Start Gatsby in development mode

gatsby develop

After following these steps, you will have a fully functional Gatsby site running locally via npm at http://localhost:8000 URL.

NOTE: if you are not using the provided docker configuration to run Drupal, you may need to configure the Gatsby Live Preview Drupal module under /admin/config/gatsby/settings. In this form will be able to update the URL value using http://localhost:8000 into the ‘Gatsby Preview Server URL’ field in Drupal and save to store configuration.