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
Headless Drupal
By Matthew Fleury
Headless Drupal
- 731