Deep Dive into Drupal 8 + Gatsby.JS (Part 2)

This post was originally posted on my personal / professional blog: Sergiu Nagailic - this is just a part of the full post.

Welcome to 2nd part - hands-on or deep-dive into Drupal 8 + Gatsby.JS. Don’t treat this article as a tutorial - but hopefully, my experience will be useful for your journey.

Who is it for? 🎯

If you’re a beginner that has some experience with Drupal (or even if you’re pretty new to it) - during some 3-4 days, you can have a full-running website, secured, fast, and with zero hosting costs. If you want to experiment, learn something new, create a professional or personal blog, a product landing page, a business website, you name it - then it’s for you.

How much time? ⌚

It really depends on your knowledge and skills. It took me 5-8 days, but I mostly did around 2-3 hours per day (maybe with a weekend spike), that’s why I consider it 3-4 days (full-time). It also depends on the approach and template you’ll choose.

Why? What are the Advantages? Etc. ❓

Most of these things are covered in the 1st article (aka part 1). But, to be short: Decoupled Drupal + Gatsby.JS combo offers a blazing fast website that looks and feels pretty dynamic, with a dynamic admin interface, editing experience, and no server costs, at the same time being able to handle almost any load. Sounds too good to be true? Don’t miss the 1st article then.

If you’re ready - let’s begin 🚀

Initial Setup

Docksal / Docker

We will be using this boilerplate repo - https://github.com/docksal/boilerplate-drupal-gatsby. It consists of Drupal, Gatsby, and Docksal (docksal is similar to pygmy (lagoon), or dd, or docker-compose - but it comes with a handy shell tool that glues everything together).

Note - that I’ll explain everything only from a Linux (Debian-like) perspective as that’s what I’m working with.

Make sure you have the following setup:

1. Basics - install curl, git; make sure apache / nginx / pygmy, etc isn’t running (this is explained here)

2.Install Docksal - normally if you follow the steps, this should auto-install docker as well.

Okay, now we can clone the repo - i.e. into /var/www/d8gatsby. Make sure you have some free space on the hard-drive and at least 8GB RAM in total - as this will create multiple docker containers.

git clone https://github.com/docksal/boilerplate-drupal-gatsby /var/www/d8gatsby
cd /var/www/d8gatsby
fin start 

Okay, you can see things are happening now. To make sure that everything’s fine you can run: fin status - you should get similar output:

      Name                     Command                  State                 Ports           
-----------------------------------------------------------------------------------------------
d8gatsby_cli_1        /opt/startup.sh tail -f /d ...   Up             22/tcp, 3000/tcp, 9000/tcp
d8gatsby_db_1         docker-entrypoint.sh mysqld      Up (healthy)   0.0.0.0:49174->3306/tcp   
d8gatsby_frontend_1   httpd-foreground                 Up             443/tcp, 80/tcp           
d8gatsby_php_1        /opt/startup.sh supervisord      Up             22/tcp, 3000/tcp, 9000/tcp
d8gatsby_preview_1    /opt/startup.sh bash -lc n ...   Up             22/tcp, 3000/tcp, 9000/tcp
d8gatsby_web_1        httpd-foreground                 Up             443/tcp, 80/tcp           

If that’s the case - all good. Here’s what each container does:

• d8gatsby_cli_1 - this is the CLI container - you interact with Drupal and Gatsby through it;
• d8gatsby_db_1 - this is the DB container - with Drupal Database;
• d8gatsby_php_1 - this is the PHP container - runs PHP;
• d8gatsby_web_1 - this is the web-server - configured to run Drupal;
• d8gatsby_frontend_1 - this is the Gatsby container - it’s showing the ‘production’ version of the Gatsby build;
• d8gatsby_preview_1 - this is the Gatsby container - it’s showing the ‘dev’ version of the Gatsby build - with ‘live’ changes.

If you’re already familiar with Docksal - this repo adds some extra custom commands - check those out. Also, feel free to explore the .docksal/docksal.yml.

Drupal aka the CMS

Now let’s configure the CMS side - we need to do the following steps:

cd cms
fin composer install
fin composer update

These commands will run composer install and update from within the CLI container. You can now navigate to: http://cms-d8gatsby.docksal/ and you should see an installation wizard for Drupal 8 (Note: the paths and the names of the containers depend on the folder name). I have chosen a Normal installation profile (not minimal) - so we can reuse the default defined fields and content-types.

By the way, you can also run fin init, instead of doing the wizard and all the following steps - and this will automatically install everything and wire things between them, but you will end up with an exact Umami installation profile and gatsby.js theme (like in the README file of the repo). This is not what I intend - instead, I want us to build our custom Gatsby theme and configure things manually - so don’t run fin init.

During installation - specify these details (default docksal mysql details):

• Database name: default
• Database username: user
• Database password: user
• Host: db

Don’t worry about production settings, these are temporary and only for local development (defined under settings.local.php).

Once you’re done, you have to see a fully installed Drupal 8 instance:

Gatsby.JS aka Frontend

Let’s leave the CMS at this point and focus our attention on the Gatsby.JS (frontend) side.
Because we have deliberately chosen not to go with the default setup - building the frontend as-is - will fail, but let’s see how it fails:

cd ../frontend
fin fe/code-init

This will initialize the code (run npm install, etc). And after, this we run the build command to build it: fin fe/build

You will see that it will fail - because currently our CMS doesn’t have any extra module installed, but the current Gatsby setup tries to query the JSON API and fails with http error message - 404.

Don’t worry, we’ll remedy this in a section below when we’ll be building our custom Gatsby ‘theme’.

To sum-up: Drupal’s up and running, Docksal is up and running too, Gatsby isn’t but that’s what we’ll have to work on - we’re good to continue…

--

That was a part of the full tutorial, full post covers:

• Basics (of Gatsby.JS)
• Structure (file / folder structure)
• "Theme" setup
• Drupal Setup & Bridge
• GraphQL - query data
• Putting it all together...
• Deployment - going live

Read the full post 👉

Hey, I'm new here, any suggestions / criticism is highly appreciated.