Live Preview with Gatsby and Decoupled Drupal – Preston So – Gatsby Days London 2019


Preston So: … decoupled Drupal. And just because I was setting up, could those
people who’ve used Drupal or are using Drupal raise their hands again? Now, keep your hands up if you are using Drupal
8. Okay, alrighty. For the lone person using Drupal 7, unfortunately
you’re out of luck for this talk. But we can talk later about options that you
got. Alrighty, so this talk is also about how Gatsby
loves Drupal and how we’ve worked together with two amazing communities to foster this
amazing relationship that allows for live preview through decoupled Drupal and Gatsby. As I mentioned, my name is Preston So. Some of you may know me from the Drupal community. I’m the author of the book Decoupled Drupal
in Practice, which was just published last year. And if you want to kind of tweet at me, I’ll
be following the hashtag Gatsby Drupal Preview. If you have any questions about what you see
today, I’m happy to answer those later on as well. So I think Kyle did a really great job answering
what is Gatsby, the question that a lot of us have today. But I do want to dig into a little bit of
how it looks for developers and why it’s so important for developers from the point of
view of those who are using Gatsby. I also want to talk about why Gatsby is great
for Drupal, talk about a couple of case studies about Gatsby Drupal sites, and then go through
a really quick demonstration of how to set up live preview. A lot of these are videos. I realize the wifi is wonky here so I’m not
sure if I’ll be able to do this full live demo. And then finally I want to end with what’s
next for Gatsby and Drupal, how are these two communities coming even closer together
in ways that we never imagined. So, by the way, credit to Dustin Schau, I
stole these slides from him because he wrote this amazing introduction about what Gatsby
is. If we look today at the modern developer experience
on the web, some of the biggest challenges that we have in modern web development have
to do with just getting started. A lot of times we know that react developers
had a really complex history before we got into things like Create React App and some
of these boilerplates that now exist. And secondly, the way that we manage data
is evolving in a way that is completely different from how we have managed data before. We’re now dealing with many different backend
services, many different systems, even markdown files within our Gatsby sites. And getting this right is actually really
hard. So for developers and for that developer experience,
Gatsby is a shortcut to allow you to build those apps and sites that you want to construct. And most workflows today in web development
involve a lot of boilerplate to get started. But the good thing is that Gatsby sets all
of this up for you. So for those of you who are a little bit less
familiar with the elements that make up Gatsby, on the left-hand side of this figure you can
see a variety of different CMSs and backend systems including Contentful, WordPress, Shopify,
Drupal 8. And these all feed into Gatsby through source
plugins which retrieve data and then keep that data in storage through the means of
a GraphQL API. You can actually access that data from your
react components within Gatsby. That then gets published out to a CDN and
you have an amazing Gatsby site that is really well-performing. CDN, by the way, stands for content delivery
network. So Gatsby removes the boilerplate to get started,
all of this work to get started and for deploying apps to production. And we obsess over that front-end performance
tuning so you don’t have to worry about it. There’s a lot of talks that people give about
how to improve performance in React, how to improve performance in JavaScript, and that’s
really not as much of a concern with Gatsby. So Gatsby’s goal is to make web development
ever more powerful and simple. And with that, let’s move into a little bit
about Drupal. Now, I know many of you work with Contentful
or some of these other headless CMSs, so please bear with me. This is a little bit more for the Drupal audience. A decoupled Drupal, by the way, is the paradigm
that people are using today. That new architecture that removes the presentation
layer from Drupal, makes it a little bit hidden actually, and uses instead a different presentation
layer such as Gatsby. One of the biggest problems today is that
monolithic CMS applications are now being replaced by much more specialized content
systems. And this is a really quick example that I
want to show from the Drupal perspective. Back in the day, in the early 2000s, mid-2000s,
there was a bevy of different modules or plugins available in the Drupal ecosystem, including
eCommerce solutions, login authentication, content form handling. And nowadays we’re finding that a lot of folks
want to use these new kind of upstart services that are developing more and more in the market,
things like [inaudible 00:05:23] for instance, or search driven through Algolia, or cart
functionality actually driven by Snipcart, or Typeform for form handling. And what a lot of people are discovering in
the Drupal community as well is that it’s a lot of work to maintain all of these different
plugins. So this is a similar slide to the one that
Kyle just showed, but a lot of the things that are happening relate to this integration
layer between all of these disparate backend services and the front-end layer that actually
serves all of this data and all of this functionality in a very, very easy to maintain way. So that’s kind of the story of the content
mesh. And content mesh is a term that was coined
by our co-founder, Sam Bhagwat. And it really has to do with this notion of
that integration layer. Gatsby is that glue that brings together all
of those disparate backend systems and CMSs and marries it to a performant, front-end
layer that is incredibly fast and incredibly fun to use, as many of us know. So with that, let’s talk briefly about why
Drupal for Gatsby. I know a lot of the Contentful or Prismic
adherence in the room are probably kind of skeptical. Well, the project lead of Drupal himself,
Dries Buytaert, said that moving to a JavaScript-driven front end can actually solve a lot of the
resourcing challenges you find today in Drupal. One reason is that JSON:API, which is a very
common API specification, is now part of Drupal core. It’s actually one of those specifications
that’s been adopted by Ember.js as well, if you have used Ember in the past. And that means that after only a few clicks,
this isn’t your old Drupal that you were used to before. You’ve got an amazing headless CMS with just
a few clicks, enable a couple of modules in your Drupal 8 UI and, boom, you have an API
that is now fully functional that you can now consume through Gatsby. Also, Gatsby’s ecosystem for Drupal is already
growing incredibly fast. We now have Gatsby Source Drupal, which is
the source plugin for Drupal. But also, with the introduction of Gatsby
Themes, we have Gatsby Theme Drupal, which is a very powerful tool to get started quickly
with building your Gatsby Drupal site. By the way, I’m never sure, now that we’re
in this new world, whether to call it Gatsby Drupal site, Drupal Gatsby site, supported
Drupal-backed Gatsby site. This is how we’re going to have to coin some
new terminology here. The fourth reason why drew Drupal and Gatsby
are great together is that both of us are really active and passionate communities. I love being part of both of these communities. They’re very active. People are very helpful. And I think you see that borne out in a lot
of the conversations you have with us on GitHub. So very quickly before I jump into actually
how to build this and how to get this all set up, let me talk about a few Gatsby Drupal
sites that are already online and in existence. These are sites that are currently in production
and at scale. So the first is the City Springs website,
a new development in Sandy Springs, Georgia. That’s been built by our friends over at Mediacurrent,
a Drupal consultancy and Gatsby consultancy out in Atlanta. And this site is actually a really, really
interesting example of a Gatsby site that works very well for the purposes it serves. And also Third and Grove, who we’ve partnered
to work on the Gatsby Drupal integration. Just rebuilt their website in Gatsby. Please go ahead and check it out. And both of these sites, by the way, are using
Gatsby backed by Drupal 8. Alrighty, so I’m hoping the wifi holds up
here. I’ve got a couple of videos to show just how
quickly you can get set up and how easy it is to get started. But first I want to make sure to recognize
all of the folks who have been working on the Gatsby Drupal integration and the Gatsby
Drupal working group. From the Drupal side, the Third and Grove
side, Grant Glidewell, Shane Thomas, John Entwhistle, Matt Davis. And from the Gatsby side, of course Dustin
Schau and our very own Kyle as well. Alrighty, so the first thing you want to do
is to go ahead and sign up for a 14-day trial at gatsbyjs.com/preview. That page looks like this. It’s very easy to get started. You log in with your GitHub credentials and
it’s very easy. Next thing you want to do is the really easiest
way to set up a free Drupal site that’s on a free tier and doesn’t require a whole lot
of maintenance is actually on Pantheon. So if you go to pantheon.io and registered
for an account there, you can create a new Drupal site and install Drupal completely
through their platforms. So let’s see if this holds up. If it doesn’t hold up, I’ve got a offline
version of this as well. So what I’m going to do is scrub through this
video a little bit. And I wish I could remove this thing here,
these slides with this covered bar here. Can I drag this? No, I can’t. Okay, well bear with me here. Let’s actually use this again. Okay. All right. So what we’re doing here is creating a Pantheon
site. And I gave this talk already before in the
past, but it’s very quick, it’s a very easy process. And I’m just going to scrub through here to
the process where you actually set up the Drupal. There we go. So the next thing that you want to do is to
provision your Drupal site on Pantheon. And that’s what’s happening right now. You know what? Let me use the offline version of this video
because it’s going to work better with the wifi. And I can scrub through more easily. So here we’re deploying Drupal 8. And once it’s deployed, as you can see, there’s
a reason why I didn’t go through this live. The Drupal installation process can be very
slow. What we’re doing here is configuring the Drupal
installation. What I’ve done here is used the demo installation
profile, Umami, which is already set up and actually integrates very nicely with the Gatsby
ecosystem around Drupal as well. Now we’re installing Drupal, getting everything
going. And finally, once everything is set up, you
can see that we have our site that’s fully built out with Drupal available and all of
the things that we expect to see in Drupal. For those of you who haven’t touched Drupal
in a while, the Umami installation profile is actually a really nice demo that showcases
example content, showcases things like multilingual support and a lot of things that are still
key to all of our CMS workflows. Now what we’re doing here is to enable JSON:API,
which is the module that is going to expose all of our content through Drupal and allow
it to be consumed by Gatsby. Alrighty. The next thing that you’re going to want to
do also is to configure CORS. CORS, by the way, stands for cross origin
resource sharing. And that’s in order to allow for other domains
to be able to access the Drupal site. So the easiest way to do this is within your
site’s directory, underneath your Drupal site. You want to go to copy that default.services.yamlfile
to services.yaml, set your desired course configuration. What I’ll show in the video that I have for
this is something you should not use in production, but does make it really easy to get started. So what I’m doing here is just bringing down
my Drupal site onto my local. And now what I’m going to do is actually copy
over services to services.yaml. And now you can see the CORS config YAML here. We want to enable all headers, enable all
methods. Obviously you don’t want to do this in production,
but this will get you started very quickly with getting this set up in Drupal 8. Then we go ahead and push the new configuration
file. And as many of you may know with Drupal, you
sometimes have to rebuild the cash registry every time you save configuration, and that’s
something that you may need to do after this process as well. Alrighty. Then you want to import your Gatsby site that
is hosted on GitHub. Currently we don’t support other repository
or version-control providers at the moment, but that is something that we are thinking
about. So please let us know if you are on Bitbucket
or GitLab and you need that support. So basically the way to get your site is to
just use our provisioning flow, which looks something like this. Now, what you can do is create a site that’s
automatically just generated out of the box for you. Or you can import your own site. So for example, what I’ve done here is to
go ahead and provide certain things like the environment variable that has the Drupal base
URL. And I’m going ahead and creating this site
as a test site here. Once that’s done, it automatically triggers
a new preview and also will go ahead and and give me everything I need. And then, of course, when it’s done… Okay, well I didn’t record to the end there,
but once it’s done you now have a working preview. And then the next thing you want to do is
install the Drupal Gatsby module. Now, this can be done in a variety of different
ways. You can take the tarball off of drupal.org
put it into your source audit kind of directly. Or you can install it through something like
Composer or Drush. And then you want to go to the live preview
settings and put in your Gatsby preview URL, and of course rebuild the cash registry as
needed. And then you can edit your Drupal content. So let me go ahead and show a live demo of
this right now. I’m hoping the wifi holds up here, so please
bear with me. I do want to show what this looks like. Let’s see here, there we go. Okay. Bring this up here. So on the right side here is my Drupal site
with all of my content currently there in place. What I’ve got here is I’ve got my Gatsby dashboard
here. Now, one of the things I want to start with
is to just show you if you go to the settings for your Gatsby live preview module, you can
set your preview URL and that’s really all you need to get this working. So here, for example, is my list of modules. Now, because I’ve limited the view port, it’s
actually hiding one of the columns. Now, this is still in alpha. So there are bugs, there are issues. You’re going to see a couple of rough edges
here. If I click on help and I go to Gatsby live
preview settings, you can see that what I’ve done is I’ve taken my preview instance URL
here and put it in into the configuration for my Drupal site. That’s pretty much the last step that you
need to do. Now, what I’m going to do is show you my personal
site. One of the things I have on my personal site
is I have a list of talks I’ve given in the past, which is very out of date as you can
see. And this list of talks is actually pulled
from Drupal content. So a very, very quick and easy demo that I
can do is to go to show you my content list here, and I’ve got all of my content here. I’m going to just go ahead and edit this first
one. And I’m just going to type in something like
hello from Drupal. Now I hit save. Now, as you can see, the preview just updated
more quickly than the Drupal site itself updated. I mean that’s pretty incredible. And I want to give major props, by the way,
to every single member of the Gatsby team, both on the Inc. team and not, who worked
on this. This is an amazing, amazing project. So, of course, there’s a type-o in here. I don’t like all these ones. I’m not that excited about this. So let me take away these ones and just show
you how quickly, once again, that updates. Boom. So just to finish up here, I just gave a live
demo. I’m really glad the wifi held up. Just in case, I had a little video here so
you wouldn’t be disappointed. So what’s next for Gatsby and Drupal? What’s coming down the chute? What are people looking forward to next? Well, as you see with that experience, it’s
a really good experience already but there’s a lot of improvements that we can make not
only on the Drupal side of things but also on the Gatsby side of things. The first thing that the working group is
currently in the progress of working on is a more integrated editing experience. Also, there’s a new distribution of Drupal
called Rain that was released by our friends at Mediacurrent that’s going to have better
integrations with this whole live preview module. Also, if you’re familiar with the Drupal ecosystem,
you know about content moderation, a very important piece of content editors, workflows
today, draft states, unpublished states, so on, so forth. And then finally, just to make this even more
live, we’re working on keystroke-by-keystroke preview. So just to give you a quick glance at how
this will actually be more fully integrated into the editing experience. You can see here that there’s a use of the
paragraphs module, which is a way to lay out content in Drupal. And you can see that there’s a fully-integrated,
open Gatsby preview button there that’s just like the Contentful experience, for those
of you who use the Contentful sidebar extension. And this is a really powerful approach because
it means you can directly go to the preview from Drupal without having to ever leave your
environment that you’re working in. Also, if you haven’t tried Rain yet, if you’re
a Drupal user, Rain is a really great distribution that is ready-made for Gatsby as well and
it’s ready-made to be decoupled. And then finally, we are going to also be
working on keystroke-by-keystroke preview. I want to give thanks to Shane Thomas who
let me borrow these slides. And all of this will be coming down the chute
here very soon. And so a couple of takeaways before I run
out of time here, Gatsby’s not just for static sites. And as Kyle mentioned just now, Gatsby isn’t
just [inaudible 00:19:52], it’s much more than that. It’s, for CMS-driven sites, it’s that integration
layer, it’s that piece that really brings everything together and marries the best of
both worlds. Both the content editor workflows that we
know our clients love, but also the developer workflows that we love as well. And that’s what makes Gatsby so inspiring. The Gatsby source Drupal plugin allows you
to pull content from any Drupal 8 site. Once again, sorry about Drupal 7. There’s options that we can talk about later. And then GraphQL and Gatsby, obviously very
powerful, allows you to query your Drupal data as well. And finally, you can display your pages very
easily with react components and live preview all your content coming down from Drupal. So I highly encourage all of you to try out
our live preview if you’re using Contentful, if you’re using Drupal, if you’re using WordPress,
whatever it is that you’re working on, please try out our CMS preview product. We’d love to have your feedback. We’d love to have your bugs and fix those
for you. And with that, thank you very much. Once again, Gatsby Drupal Preview hashtag
if you’d like to ask questions. And let’s foster some more love between our
two communities. Thank you very much.

Leave a Reply

Your email address will not be published. Required fields are marked *