1.
Rain + GatsbyJS:
Fast Tracking to Drupal 8
May 21, 2019

2.
| 2
Today’s Team
Preston SoJay Callicott Mark Casias

3.
| 3
Who We Are
Mediacurrent is a full-service digital agency that
implements world class open source software
development, strategy, and design to achieve
defined goals for enterprise organizations
seeking a better return on investment.

4.
| 4
Today’s Agenda
I. Speaker Intros
II. Rain Overview
III. Why Gatsby?
IV. Setup
V. Q&A

5.
| 5
/in/jay-callicott-8535ba1
@drupalninja

6.
| 6
Rain Starter Profile

7.
| 7
Why We Created Rain
The Rain installation
profile packages and
configures the best
solutions the Drupal
community has to offer to
help build new sites
faster.

8.
| 8
Who Uses Rain?
Large Enterprise B2B
●
●
High Volume B2C
●
●
Education and Nonprofits
●
●

9.
| 9
Rain + Gatsby
User-FriendlyPerformance Minimal Hosting Security

10.
| 10
/in/prestonso
@prestonso

11.
| 11
Why Gatsby?

12.
| 12

13.
| 13
Performance
● Gatsby is a web compiler
●
it’s hard to build a slow website
● Fast websites are all alike;

14.
Drupal user login
Drupal
Drupal search
Drupal Ubercart
Drupal content
Drupal forms
Drupal Google Analytics

15.
Auth0 authenticationAuth0
Algolia search
Snipcart cart
Contentful content
Typeform forms
Segment analytics
Gatsby
Algolia
Drupal
Snipcart
Typeform
Segment
Contentful

16.
Drupal
Drupal front
end
Gatsby
Drupal
Gatsby
Client
Server
Pages
Auth0
Algolia
Drupal
Snipcart
Typeform
Segment
Contentful
Architecture
Time

17.
| 17
The content mesh
● Gatsby is the glue for the content mesh
● modular,
specialized interchangeable

18.
| 19
Why Gatsby and Drupal?

19.
| 20
Monolithic CMS builds
● Resourcing challenges
● Maintainability challenges
● Integration challenges

20.
| 21
Dries Buytaert
Many organizations are finding it difficult to find
affordable front-end Drupal developers experienced in
Twig. Moving to a JavaScript-driven front end can
resolve some of these resourcing challenges.

21.
| 22
Why Drupal for Gatsby?
●
API-first Drupal
●
gatsby-source-drupal
● Drupal ecosystem for Gatsby

22.
| 23

23.
| 24
Is Gatsby for me?

24.
| 25
Acknowledged limitations
● Scalability
○ Incremental builds
● Preview
○ Gatsby Preview
● Editorial experience
○ Themes
Gatsby benefits
● Cost
● Staffing
● Security
● Performance

25.
| 26
What’s next for Gatsby?

26.
| 27
Coming soon to a Gatsby near you ...
● Incremental builds.
● Preview.
● Themes.

27.
| 28
Gatsby Preview for Drupal
The Gatsby Drupal Working Group is currently building
a live preview solution for Drupal that will allow
content editors to see their changes instantaneously
on Gatsby sites. More to come soon!
For more, check out
https://spectrum.chat/gatsby-wg-drupal/

28.
| 29
Today’s Demo
Connect D8 to
Netlify
Install Rain Enable
JSON:API
Deploy to
Server
Create Gatsby
Starter
Deploy Gatsby
to Netlify
Follow along with our
blog guide
http://bit.ly/2w1A5hY

29.
| 30
Step 1: Installing Rain

30.
| 31
https://youtu.be/eV9_SMgQ07Q
Step 1 Video

31.
| 32
Step 2: Enabling JSON:API

32.
| 33
https://youtu.be/lYIDfJqNO6c
Step 2 Video

33.
| 34
Step 3: Deploying to the server

34.
| 35
https://youtu.be/sYZwBR-Ip1M
Step 3 Video

35.
| 36
Step 4: Creating Gatsby starter

36.
| 37
https://youtu.be/RrjfFKHPZ88
Step 4 Video

37.
| 38
Step 5: Deploying Gatsby to Netlify

38.
| 39
https://youtu.be/DapQIk9jYVg
Step 5 Video

39.
| 40
Step 6: Connecting D8 to Netlify

40.
| 41
https://youtu.be/WPG4s1A4ySM
Step 6 Video

41.
Follow along with Jay’s tutorial:
Drupal 8 Rain & GatsbyJS
Integration - Soup to Nuts
Installation
Check out the tooling we ship with
all of our projects on our
development tools page.
Read our Drupal and Gatsby case
study for City of Sandy Springs
Explore Gatsby for enterprise: How
to Reduce Your Digital Total Cost
of Ownership with Gatsby
Rain Demo Development Tools Drupal + Gatsby
Resources
Contact Mediacurrent