Decoupled Drupal 8 with GatsbyJS Frontend

A decoupled setup with Drupal 8 CMS and Gatsby frontend.

Features:

• Drupal 8 installed with Umami demo profile
• Gatsby frontend for Umami
• Gatsby Preview (instant content updates in frontend, locally)
• Example of using Paragraphs Drupal module with Gatsby
• Custom Docksal commands to automate routine tasks

Setup instructions

1. Install Docksal

2. In your "Projects" directory run

   fin project create --name=drupal-gatsby --repo=https://github.com/docksal/boilerplate-drupal-gatsby.git
   cd drupal-gatsby
   

If you fork/clone from here, then just run fin init inside the cloned repo folder.

You will get a lit of URLs at the end of the init process:

$ fin init
...
Drupal CMS:     http://cms-drupal-gatsby.docksal
Preview server: http://preview-drupal-gatsby.docksal
Frontend build: http://drupal-gatsby.docksal (run 'fin fe/build')

Note: Preview server (running gatsby develop) takes some time to initialize. Wait a minute then reload the page.

Custom Commands

To list custom commands, run fin in the project repo and see the list at the bottom of the output, e.g:

$ fin
...
Custom commands:
  cms/code-init                 Initialize CMS codebase
  cms/install                   Initialize/reinstall CMS
  cms/uli                       Watch preview logs
  fe/build                      Build frontend (static website)
  fe/code-init                  Initialize frontend codebase
  fe/logs                       Watch preview logs
  init                          Initialize project from scratch (full reset)

These commands are stored in .docksal/commands/ and can be used to automate and run routine tasks.

Tips and Tricks

• Use fin bash to get a terminal with all developer tools pre-installed
  • Use this instead of your local console
  • You can run composer, drush, npm, etc. without the need to install those tools locally
• Use fin composer inside the cms folder to manage Composer dependencies
• Use fin drush inside the cms folder manage Drupal CMS via Drush
• Use fin cms/uli (fin drush uli) to get a one-time admin login link for Drupal CMS
• Use fin fe/logs (fin logs -f preview) to watch preview (gatsby develop) logs
• Enable VS Code Web IDE with fin config set --env=local IDE_ENABLED=1; fin project start (Learn more)

Docksal documentation - https://docs.docksal.io/