Drupal and Gatsby Live Preview

After attending [Decoupled Days](https://decoupleddays.com/) at NYC and watching [Shane Thomas](https://twitter.com/smthomas3) talking about Live Preview with Gatsby and Drupal and showing the [Drupal Gatsby Live Preview module](https://www.drupal.org/project/gatsby). 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**](https://www.drupal.org/project/tui_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**](https://www.drupal.org/project/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**](https://www.drupal.org/project/jsonapi_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**](https://www.drupal.org/project/gatsby): 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 ### Project dependencies - [git](https://git-scm.com/) - [docker](https://www.docker.com/) - [ahoy (ver 2)](https://github.com/ahoy-cli/ahoy) ### Clone repository ```php git clone git@github.com:weknowinc/drupal-boina.git ``` ### Copy .env file ```php cp .env.dist .env ``` ### Add hostname entry in your /etc/hosts file ```bash 127.0.0.1    drupal-boina.develop ``` ### Start containers ```bash ahoy up ``` ### Install Composer dependencies ```bash ahoy composer install ``` ### Install Boina distribution ```bash 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? - [**gatsby-source-drupal**](https://www.gatsbyjs.org/packages/gatsby-source-drupal/): Provides support for pulling data (including images) into Gatsby from Drupal sites. - [**gatsby-remark-drupal**](https://www.gatsbyjs.org/packages/@weknow/gatsby-remark-drupal/): Provides support for markdown and image preprocessing on Drupal body fields. - [**gatsby-transformer-remark**](https://www.gatsbyjs.org/packages/@weknow/gatsby-remark-drupal): Provides support for parsing Markdown content using Remark. - [**gatsby-remark-images**](https://www.gatsbyjs.org/packages/gatsby-remark-images/): Provides support for processing images in markdown content so that they can be used in the production build. ### Where do I find this project? Github repository is located at ### Project dependencies - [node](https://nodejs.org/en/download/) - [gatsby-](https://www.gatsbyjs.org/tutorial/part-zero/#install-gatsby-cli)[cli](https://www.gatsbyjs.org/tutorial/part-zero/#install-gatsby-cli) ### Install Boina starter ```bash gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina cd boina ``` ### Copy environment file ```bash cp .env.dist .env.development ``` **NOTE**: You should use `.env.production` for a production environment. ### Update environment variables ```bash DRUPAL_HOST=http://drupal-boina.develop/ ``` ### Start Gatsby in development mode ```bash 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.

Related
articles

Improving Drupal and Gatsby Integration - The Drupal Boina Distribution

read moreright arrow

Improving Drupal and Gatsby Integration - The Gatsby Boina Starter

read moreright arrow

Improving Drupal and Gatsby Integration - The Drupal Modules

read moreright arrow