Gatsby.js and Drupal

By: Alex Cooper

About this talk

"Sponsors"

Pantheon

Netlify

GitHub

What will this talk cover?

• React
• GraphQL
• Gatsby

What will this talk not cover?

• Node/JavaScript
• Security
• Authentication

Overview

• Introduction
• Intro to Gatsby
• Intro to React
• Basics of Building with Gatsby and Drupal
• *Plot Twist*
• Wrap-up

What is React?

React is

• A JavaScript UI library
• Declarative
• Component-based
• Re-useable

const name = 'Josh Perez';
const element = 
Hello, {name}
;

ReactDOM.render(
  element,
  document.getElementById('root')
);

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  

    Hello, {formatName(user)}!
  
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

function getGreeting(user) {
  if (user) {
    return 
Hello, {formatName(user)}!
;
  }
  return 
Hello, Stranger.
;
}

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
You clicked {this.state.count} times
         this.setState({ count: this.state.count + 1 })}>
          Click me
        
      
    );
  }
}

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

The code snippets from above can be found here:

JSX/Component examples

Count examples, class vs hook.

What is Gatsby?

A blazing fast static application generator for React.js

Gatsby 'rehydrates' your React app

JAM Stack

What is blazing fast?

• Fast load time
• First Contentful Paint (FCP)
• Time to Interaction (TTI)

How do we get blazing fast?

• Code Splitting
• Tree Shaking
• Pre-Fetch/Pre-Cache

Tip when evaluating libraries: check if it's blazing fast. If it's fast, but the README doesn't specify whether its fastness is blazing, keep searching. Often you can find a similar library that does the same thing, but blazingly. Blazing means good.

— Andrew Clark (@acdlite) March 15, 2018

Gatsby Plugins

356 Source Plugins

192 Theme Plugins

Markdown

Why use Drupal as a Backend?

Complex Workflows

Built-in WYSIWYG

Access Control

Open Source, Self-Hosted

Drupal

Prerequisites

Tools

Node.js

React

Gatsby

npm install -g gatsby-cli

Building A Gatsby Site

gatsby new [site name]

gatsby-node.js

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// You can delete this file if you're not using it

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

index.js

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  
    
    
Hi people
    
Welcome to your new Gatsby site.
    
Now go build something great.
    

      
    
    Go to page 2
  
)

export default IndexPage

Setting Up a Drupal Site for Gatsby

For a Gatsby+Drupal Site, You Need Two Things:

1. The JSON API Module
2. Content

Getting our Drupal Data in GraphQL

[Live Demo]

Using our Data

Three Steps:

1. Build Components
2. Build Templates
3. Dynamically Build Pages

[Live Demo]

The Plot Twist!

I wanted to do something unique...

So I made a custom content type...

Building & Deploying

gatsby develop

gatsby build

Netlify

Next Steps

Improve the templates

Implement Authentication/security

Improve the API

Explore Plugins

Resources

Questions?