Easy content creation with Gatsby Live Preview Drupal module
It’s great to live at a time when a robust CMS can share its content with an ultrafast JavaScript front-end.
One of the best examples of this is combining Drupal and GatsbyJS. We are happy to see a new tool for it that is fresh from the oven — Gatsby Live Preview module for Drupal 8.
It provides Drupal editors with easy content creation workflows, making Drupal and Gatsby integration a more lucrative idea for developers and website owners.
GatsbyJS: a great companion for Drupal
The GatsbyJS modern site generator inspires the Drupal community more and more for many reasons. Here are at least a few:
- It is based on the hottest technologies such as the ReactJS front-end framework, the GraphQL query language, and the Webpack JavaScript module bundler.
- It is amazingly fast and provides real-time content updates. Every static Gatsby site is, in fact, a full-fledged React app.
- It comes packed with 1250+ source plugins to retrieve data from particular data sources. This includes the Drupal source plugin that connects your Drupal site as a data source to your Gatsby site.
- It has 250+ starter kits to quickly set up a Gatsby website that will display your Drupal 8 data.
The Gatsby Live Preview module in Drupal 8
The contributed module called Gatsby Live Preview allows Drupal content editors to make content updates and immediately see how it will look on the Gatsby site before deployment.
This easy content creation is provided by showing Drupal on the left and Gatsby on the right:
The maintainer of the module, Shean Thomas, gave a talk and showed slides of the Gatsby Live Preview module at Decoupled Days in New York on July 18, 2019.
Thomas explained the problem that the module solved. Previously, there was no easy way to see during content creation how changes would look like before you click “save.” Among the available options was to run the Gatsby development server before deploying the changes to live, which required the entire site regeneration.
According to Shean Thomas, among the plans for the future is integrating the module with the Drupal 8’s Content Moderation module. The core Content Moderation and Workflows modules take content creation to a new level through handy editorial workflows in Drupal 8.
The module is very new with its alpha release out on August 14, 2019. It is based on the tool introduced by the Gatsby team — the Gatsby Preview Beta.
Steps to install and configure the module
This part comes when the main setup is complete. So we assume you are done with:
- Gatsby site creation
- Gatsby Source Drupal plugin installation (version 3.2.3 or later)
- configuring the gatsby-config.js file to list your Drupal website’s address
- building up your Gatsby pages to display Drupal content
So the live preview setup steps are as follows:
- install and enable the Gatsby Live Preview Drupal module the way you prefer
- set up a Gatsby cloud preview account
- set the “preview” flag to “true” in the “options” (the Gatsby Source Drupal plugin’s file)
- Gatsby is now ready to follow the content changes at a particular URL
- copy the preview URL from the Gatsby cloud to the “Gatsby Preview Server URL” (Configuration — System — Gatsby Live Preview Settings of your Drupal admin dashboard)
Examples of easy content creation & preview with the module
The Decoupled Days' speech about the Gatsby Live Preview module greatly inspired the Drupal community. In order to make it easy for people to get started with Drupal and Gatsby integration.
Drupal contributor Jesus Manuel Olivas decided to improve some features in the module.
The developer also added this setup to projects based on the Drupal Boina Distribution and shared his impressions about the module in the blog post with the video. Let’s have a look at this easy content creation process:
- On the left side, we see the Drupal site where some content is added via the admin interface.
- On the right side, we see the Gatsby site update immediately after the “Save” button is clicked in Drupal.
Get the most of Drupal and Gatsby integration!
Our developers will help you enjoy the incredible speed that GatsbyJS is able to give to your Drupal website! They can:
- set up a Gatsby website and establish content retrieval from Drupal
- build your Gatsby pages exactly according to your wishes thanks to GraphQL
- install and configure the module for Drupal and Gatsby live preview for easy content creation
Our Drupal team are masters of modern JavaScript technologies. You can entrust this integration to us!