How Big Does Your Team Have To Be To Build a Headless Site?

Matt Fleury

@mdfleury

Matt Fleury

Applications Architect

What is headless/decoupled Drupal?

a separation between the back end and one or more front ends

Why would I want to build a headless Drupal site?

How many devs does it take to build a headless Drupal site?

Hosting?

But is there a
better way?

DEMO

How did I do it?

JSON API

Show me some code!

Drupal Modules

  • JSON API
  • JSON API Extras
  • Netlify Webhooks

React Components

...
const PageTemplate = ({ data }) => (
  <Layout>
    <div>
      <Container>
        <h1>{data.page.edges[0].node.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: data.page.edges[0].node.body.processed}} />
      </Container>
    </div>
  </Layout>
)
export default PageTemplate
export const query = graphql`
  query ($slug: String!) {
    page: allNodePage(filter: {fields: {slug: {eq: $slug}}}) {
      edges {
        node {
          title
          body {
            processed
          }
        }
      }
    }
  }
`

React Components

...
const Header = ({ siteTitle }) => (
  <StaticQuery
    query={graphql`
      query {
        pages: allNodePage (sort: {fields: title}) {
          edges {
            node {
              title
              fields {
                slug
              }
            }
          }
        }
      }
    `}
...
  {data.pages.edges.map(({ node }) => (
    <li>
        <Link to={node.fields.slug}>
          {node.title}
        </Link>
    </li>
  ))}
...

How does it

work?

"But my site is too complicated for a static site!"

"But I don't
like React!"

"But I don't

like Node!"

How many devs does it take to build a headless Drupal site?

Resources

Come visit us at the Turner booth

Made with Slides.com