 All righty. How is everyone today? Everyone say Drupal. Oh, come on. That was, come on. Let's say Drupal. Okay. Good afternoon. Good evening. And thank you all so much for coming to live preview with Gatsby and D-Couple Drupal. This is going to be a presentation that is going to involve some multimedia. And it's my pleasure to be here with my colleague Matt to talk about this topic today. First off, though, let's have an alternate title for this. Also, Gatsby loves Drupal. How many of you have heard of Gatsby already in the room? Oh, wow. Okay. About 80%. How many of you have already built a Gatsby site? Interesting. About 5%, 10%. Okay. So this will be an interesting session for all of you. But first, let's go ahead and introduce ourselves. You might be wondering who we are. My name is Preston So. You may know me from my book, D-Couple Drupal in Practice. I am principal product manager at Gatsby, where I work on the Gatsby developer experience, our Gatsby services, and our platform, as well as our integration with Drupal. How about this one? And I'm Matt Davis. I am the director of engineering for Third and Grove. And I've been a longtime Drupal community member. Preston and I actually co-presented together for the first time about D-Couple Drupal at DrupalCon New Orleans several years ago. We're also the co-founders of the D-Couple Days conference, which is the only conference specifically about D-Couple Drupal that takes place every year in New York. And so with that, let's go over a little bit of what we will cover today. So we're going to go over why decoupled CMS preview specifically is challenging. We'll give a little intro to Gatsby JS. Talk about why it's great for Drupal, why it's great for agencies. And then we'll walk you through setting up a live preview on Gatsby and Drupal with an actual demo. Then we'll cover some of the challenges and insights that we gained through building this integration point and talk a little bit about what's next and things that we're excited about. So let's dive right in. How many of you have built a decoupled Drupal site before, regardless of Gatsby or not, just any kind of decoupled Drupal site? Okay, okay. Maybe about a quarter of you. That's a lot. Well, how many of you have built a decoupled site that had a preview built into it? Very few. I see one hand. Two or three people. Interesting, yeah. Well, so my contention is that, you know, part of the reason that people decouple, there are many, but some of it is so that you have a separation of concerns. So that you can have your back end and your front end with their own feature velocity and different development teams that are working kind of independently. And so one of the goals oftentimes is that the teams need to know as little about each other's systems as possible. So your Drupal folks can really focus on the Drupal build and your Gatsby or whatever front-end technology folks can really focus on building that out. But that makes preview difficult because that there needs to be an integration point that has to be built by folks generally who need to know both systems. But the bigger problem really, it's not that preview itself is all that difficult, but it's that making it a generalizable solution is really the difficult part because if you're building a back end and a front end and you have the right architects, you can make preview work with whatever front-end you're using with Drupal. But making a Gatsby integration, for example, work across all the different ways that we use Drupal, all the different workflows that different marketing teams want to use, et cetera, et cetera, that's where it becomes really difficult. And so here are some of the considerations that you have to take, you have to encounter. First and foremost, what kind of API layer are you going to use? This is decreasingly a problem, I would say, in the Drupal world. It used to be all these custom REST APIs and views and things. Now we have JSON API and Core, which is really kind of the contract between front-end and back end. You also have to consider previews are only actually useful if it's high fidelity, if it's giving marketers something that they can have high confidence is what the site is actually going to look like when they deploy it live. You have to consider whether they only want to be able to preview locally on their own machines or do they need to generate a preview link that can be shared around the company so that other people can approve, things like that. Do they want to just be able to preview one piece of content at a time or do they want to be able to stage a bunch of different changes and see all of those together before deploying them? What about gated or permissioned content? And with all of this, with a system like Gatsby, you also have to consider build times and how do you give a preview that feels really fluid and fast. So these are all things that at Drupalcon Seattle this spring, we were talking through some with Kyle Matthews, the creator of Gatsby and decided the time was really right to really dive in. And so Third and Grove and Gatsby team partnered to really work on solving some of these problems. So now that we've covered a little bit about why decoupled CMS preview is so hard, let's talk a little bit about what exactly Gatsby is and why people are so interested in Gatsby. So what are some of the challenges of modern web development? How many people have already built React application before in the room or Vue.js? Let's start with React. Okay, so about 40% of Vue.js in the room, also about the same amount. So one of the biggest challenges that I think we all encounter with modern web development these days is the fact that getting started is really hard. Back in the day when React first came into being, it was really challenging to get started with what libraries you would need, what sorts of dependencies you would need to juggle in order to realize a very powerful app that's easy to maintain and also is going to last for a long time. The way that we manage data is also evolving quite a bit. Back in the day, you could possibly create a really quick MongoDB database and have really easy data handling, or you might use a very rudimentary database. But today, one of the things that we're encountering is that a lot of people are using CMSs, a lot of people are using third-party services, and database systems that aren't really necessarily catered towards the way that we manage data and the way that we want to consume data today. Getting all of this right is really hard. Having to look at how you want to handle things like webpack dependencies, how you want to handle webpack configuration, whether you want to use Babel, what sort of linting you want to use, all of these considerations become very challenging. Gatsby, first and foremost, is a shortcut. It's a way to allow you, as a developer, to very quickly build excellent apps and sites that perform very well in a variety of different environments. We often call Gatsby a site generator, we often call Gatsby a web framework, a React framework, but I actually prefer to call Gatsby a web compiler because it makes it much easier for you to get started and get going very quickly. A lot of the workflows that we work with today involve a lot of boilerplate to get started. We have to think about a certain procedure of ways in which we're going to install dependencies, a certain way in which we're going to have a new pipeline introduced for CICD, how we're going to perform testing, and all of these things that are very familiar to us as both PHP and JavaScript developers. But the really quintessential kind of benefit of using Gatsby is the fact that, number one, you have an incredible array of integrations that Matt mentioned, with a variety of different systems that all have different ways of managing data, all have different purposes in your architecture, but are all easily managed within this context of Gatsby. In short, you can use any kind of API in the back end and consume that from the Gatsby side of things, GraphQL, Contentful, WordPress, so on and so forth. And Gatsby gives you an agnostic GraphQL API that allows you to query any of that data and shunt that into a React application. What that means is that your experience as a developer is very easy, and it means that we actually remove the boilerplate. Gatsby is opinionated about what sorts of ways you should use to get started. It's kind of similar to the concept of Create React app, for example, and the React ecosystem. And it's also intended to get you deploying as quickly as possible to production. We as the Gatsby team obsess over front end performance tuning, so you don't have to. We make a lot of attempts within the Gatsby core project to actually make it much easier for you so you don't have to worry about things like code splitting or lazy loading of images or things of that nature. So in short, Gatsby is an app compiler for React, and Gatsby's goal is to make web development ever more powerful and simple. One of the reasons why Gatsby is attaining such high adoption within not only the Drupal community but also the WordPress community and also within the larger React community is the fact that it makes it really easy to build a website that is very performant and very, very easy to get started with. One of the things that the creator of Gatsby, Kyle Matthews, likes to say is that with Gatsby, all slow websites are different in terms of how they're slow, but all fast websites are alike. And with Gatsby, it's very easy to build a fast website. So why is Gatsby so great for Drupal? One of the things that is interesting about Gatsby is that a lot of us come from various CMS ecosystems. Some of us come from WordPress. Some of us come from Drupal. Kyle Matthews has been in the Drupal community as well. Why is it that decoupled Drupal and Gatsby go so well together? One of the things that we know about the ways in which architectures are evolving in the CMS world is that the way in which we've built an architected CMS is up until now. These giant monoliths with inextricable layers that cannot be separated, these are actually being replaced more and more by modular specialized content systems. They're being replaced by different services that are plug-and-play, interchangeable parts that actually allow you to build a much more flexible CMS that isn't restricted to the kinds of things available in a single ecosystem. Let's take one example here. Back in the day, if you were using Drupal in Drupal 7, Drupal 6, Drupal 5 even, a lot of this functionality was actually handled by the Drupal ecosystem. Consider, for example, some of these features like user login or search. Lubricart, for example, back when that existed for e-commerce. Also, form handling and the Google Analytics module. What we're finding today is that this actually doesn't provide the best developer experience for a lot of folks because what happens when one of these dependencies goes out of date? What happens when a maintainer decides to move on to a different project? It's a very, very big issue in our ecosystem with the obsolescence of a lot of these modules that we've come to rely on. Many of us have client sites that rely on these modules and we have to figure out new solutions for each of these components. One of the things that's very compelling about Gatsby is this notion of the content mesh. The content mesh is a term coined by Gatsby co-founder Sampagwad. It's about this notion that you can really plug and play a lot of these different services. You don't have to necessarily rely on a single ecosystem to provide all of these different features that you've come to expect in a website. You could be using something like an authentication provider through Auth0. You could use a search form that's provided by Algolia. You could use a cart tool that's provided by Snipkart. You could even have other CMSs. My personal site, for example, uses multiple CMSs. I have a Drupal 8 installation as well as a contentful space that I leverage for my personal site. And all of these different services are very, very easy to leverage within this environment. And Gatsby makes it deeply easy to not only decouple the CMS itself where you take the front end and separate it from the back end, but actually to decouple the presentation layer itself, to decouple the page itself. So you're no longer relying on a single source or a single ecosystem for your page itself. You can be using various third party services, various startups to make this work. And if a startup goes bust, go ahead and go to a different ecosystem and leverage those tools. Over the course of time, what we're seeing as a result of this evolution towards Gatsby and a result of this transition towards these architectures is the notion that you're no longer tied to having to rely solely on Drupal. You can use the tool that's the right one for the job. If you have a commerce tool that you really enjoy, you can go ahead and use that. If you have a CMS you really enjoy or a search provider you really enjoy, you can use those tools all without having to worry about replacing them in the long run or their obsolescence. If you want to know more information about the content mesh, it's related to kind of the pre-existing idea of a service mesh in the microservices community and the ways in which we've really built services or architectures. There's a series of blog posts by Sam Pogwat called Journey to the Content Mesh. I highly recommend you take a look at that blog post series for more information. So this is kind of the crux of what Gatsby provides you. It provides you this incredible integration layer between all of these different services that you no longer have to manage yourself. It provides an agnostic GraphQL API that allows you to query data regardless of where it comes from using a single approach so you get just the data you need no more no less and you only have to consume one single API in the process. And finally you can use all of the things that you enjoy about React declarative rendering, co-location of queries and templates, all of these things that the React community knows and loves very well and also push them to a CDN publish your site to a service like Netlify and not have to pay a single cent in the process. For my personal site I pay zero dollars for hosting. I used to pay a pretty large fee every single month but now I host my Drupal site for free, I host my Gatsby site for free and I don't pay a single penny for hosting anymore. So Gatsby can be considered really the glue for the content mesh. It's what brings all of these things together and marries all of these components together in a way that makes sense. And even Dris Baitat, he himself said back in the day earlier this year that a lot of times we're having trouble resourcing a lot of our front end projects. We're having trouble finding really advanced twig developers who are knowledgeable about Drupal internals. And moving to a javascript driven front end like Gatsby, one that's very powerful and performant and robust and has a lot of these integrations already resolved for you, can really help you with a lot of the staffing challenges that we face today. Because after all we're not just talking about developer experience, we're also talking about all the stakeholders and the clients that pay our paycheck every month. So why is decoupled Drupal and Gatsby, why are they so good for each other? First of all we know that JSON API is part of Drupal core, which is really great because it means that only after a few clicks you can go ahead and install Drupal 8 and you have Drupal as a headless CMS and API enabled. It's a very simple process, it's part of core, which makes it very easy to get started. In addition, as soon as you enable JSON API you get a very nice REST API that you can read and write to. It's very powerful and I want to thank of course the entire API initiative team for making this whole module possible in Drupal core. We also have a very fast, quickly growing ecosystem in Drupal for Gatsby, sorry in Gatsby for Drupal. One of the things that you might know about Gatsby is that the way in which you retrieve data or the way in which you integrate with other data sources is through Gatsby source Drupal or source plugins. We have source plugins for a variety of different services and we also have a new emerging Gatsby themed Drupal which is a little bit outside of the scope of this session but we'll be happy to answer and talk more about that afterwards. Gatsby source Drupal is really great because you can basically leverage any Drupal site out of the box as your back end for Gatsby. Retrieve any sort of data you need from that source and what Gatsby source Drupal does is it takes all of the resources available in your JSON API implementation on Drupal, makes those available through the Gatsby GraphQL API so you can now consume all of this data in a very, very nice and easy to use fashion. Also one of the things that's most important to realize about our communities is that Drupal and Gatsby both have really passionate friendly welcoming communities that have people who love to help and if you open an issue in the issue queue it'll be very quickly addressed and very quickly resolved. Now to Matt to talk a little bit more about what exactly is the value proposition of Gatsby for us today. Thanks Preston. Yeah absolutely so as the head of an engineering team part of what I have to consider is when and what technologies we pitch to clients and so there are a few different reasons that I want to go over that we're really looking at Gatsby as something we pitch but also as something that's really useful to us as an internal team as well. So first and foremost the primary consideration is the effect it has on clients right? So I don't know if Gatsby is a one-size-fits-all for every single one of third and gross clients today but it's certainly something that we look to as an opportunity in many cases these days primarily first and foremost because of the performance metrics that it gives. So third and grove does a lot in the commerce space which I'll talk a little bit more about in a moment but there was a statistic a few years ago where Amazon found that for every tenth of a second that they could have pages load faster they gained one extra percent in revenue. So there's a direct line between end user performance and actual revenue streams and conversion rates for sites. So being able to focus on that and really emphasize that in a sales pitch is a great way to win new clients. It's also really important from my perspective for front-end consistency. So as I alluded to earlier third and grove does a lot of Drupal work but it's not the only platform that we work in. We probably do about 80% Drupal work but we also do some WordPress and we do several different commerce platforms as well whether it's Magento or BigCommerce or Shopify Plus and so that can pose some challenges in terms of having to have the expertise for each of those platforms on the team. Whereas if we start to solidify around using Gatsby more and more we can just hire modern front-end developers and throw them at any of these kinds of projects and they can run with the front-end implementation. So for me as someone who's in charge of hiring that's huge and on that point hiring in general I've found that it's vastly easier to find talented front-end developers outside of the Drupal world than to find the top best in class Drupal themers. Also another point on that for my internal team who are my existing front-end developers they are super eager and excited to be learning this stuff too because I think that there's a feeling within especially on the front-end side of Drupal that folks are starting to get left behind when you're still writing jQuery in 2019 for example there's a feeling that you know the rest of the web ecosystem is kind of moving beyond us so all of these are it's great for retention for that reason as well because people are excited to be thrown into learning what they feel is like the new thing that people are coalescing around. And also Gatsby is great for design-centered build because so much of the momentum in modern front-end ecosystem is around React and around these modern JavaScript frameworks that's where the talent is going these days and so the best design minded front-end developers overall tend to be working in these kinds of technologies so we found as we focused more on delivering best-in-class creative focusing on these technologies has really made a difference. So a couple of use cases this is actually a site built by one of our friends over at Media Current the City Springs website very cool Gatsby site citysprings.com you'll see the performance is great it powers not only their desktop website but a bunch of kiosks that they have around the city as well so that was a cool use case for doing the kind of multi-tenant multi-channel experience with Gatsby fronting all of it. Third and Grove actually just rebuilt our own site in Gatsby as well definitely encourage you to check that out the performance is amazing I think that you'll see especially considering the amount that we have going on there in terms of animations and custom fonts and we really push the envelope with what creative could do on the site and we really tried to cater to the vision of our creative team in a way while still delivering amazing end-user performance and we have several other much larger Gatsby projects that are in the works right now that I unfortunately can't show today but we're really excited to be talking publicly about this and Alrighty so now for so let's start talking about kind of how we actually get started with preview in Gatsby and Drupal it's a really interesting process obviously one of the reasons why we want to do this is because we can leverage all the benefits of a CMS in Drupal as well as all the advantages that we have in Gatsby the first thing I want to do by the way is to acknowledge this team we've been working as part of the Gatsby Drupal working group folks from the Third and Grove team have been working on the Drupal side of the Gatsby integration for preview and I want to recognize Grant Glidewell Shane Thomas John Entwistle and of course our friend Matt Davis as well as the Gatsby Core team and the Gatsby product team so that includes Dustin Shaw and Kyle Matthews all of us have been working together really hard to realize this kind of you know interesting integration that will really change and revolutionize the way that people use preview in Gatsby by the way if you're interested in using this service today you can do this right now we're going to be going a little bit too fast for you to code this live and to follow a long life but if you'd like to go ahead and sign up for a 14-day free trial Gatsby Preview is already in open beta it's at GatsbyJS.com slash preview and this is what the site looks like we have integrations available with a bunch of different CMSs including Contentful, Sanity, Datocms, ContentStack, Drupal and actually just recently we implemented the CosmicJS integration if you're using that as your CMS one thing that you might want to do very quickly is you could set up a free Drupal site on Pantheon just to get going very quickly and it allows you to really quickly spin up a new Drupal instance and looks like we're having some issues with the video here that's not good so while we're doing this maybe Matt do you want to talk briefly about why you've been using Gatsby at Third and Grove while I resolve this technical difficulty we'll be back in just a moment sure so so like I mentioned before I think that the end user performance is a key thing but I'd also like to highlight the GraphQL side of things which has been for our front-end developers a really exciting tool set to be using if you're not familiar with it it's kind of flipping on the head the dynamic of a traditional REST API so in the traditional REST API since someone on the back end has to set up and model all of the data and expose it out to the front-enders and every time you need a new piece of data you have to kind of go say hey build me a new API GraphQL kind of flips that on its head and it has strong knowledge of all of the data that it has access to and it lets the front-end developer build queries themselves that render and mock the data out so you can build specific queries in the front-end and get the exact structure of the exact data return to you that you need at runtime when you're when you're actually using it Gatsby uses it a little bit differently because it goes through like Preston was talking about with the content mesh and goes to each external data source and slurps in all of that data and then at build time it creates a GraphQL server that runs queries that are in your Gatsby build and uses the data that way were you able to get that to work so we do have an issue with the availability of the videos here but the good news is I have offline versions of the video as well so what we're going to do is very quickly I'm going to scrub through this since we're going to need to skip through this kind of quickly but this just really quickly shows you how to create a new Panthe on site I created this demo for the a presentation I gave recently in Portland obviously Pantheon is a really great host if you need a free Drupal site and just need to get started very very quickly one of the things that you can do is very quickly deploy your Drupal site get everything going for this actual Drupal site we're using the umami distribution in order to access all of those demo features that we like in Drupal and you can set this up very easily I'm sure many of you know how to set this up in Pantheon the next video but first let's go back to the content very briefly here let me just find and we Apollo I'm very sorry about this this is something I should have tested before we got into this right here the other thing that you're going to want to do is to configure course cross-origin resource sharing in order to allow for your Drupal site to be accessed by your Gatsby site so for those of you who aren't familiar with this process what you need to do to enable this is to copy your create a new services dot yaml file set your desired a course configuration and you know potentially for example the configuration I'm about to show you is not something you should use in production how many people are familiar with course by the way in Drupal okay I'm going to show this very quickly just so that those of you who don't understand who haven't seen this before will be able to see this at in process so what I'm doing here is I'm actually pulling down my Drupal site from Pantheon and enabling basically local development with this and what you'll see later on here is the ability to actually and this is actually great actually quick time is great for this because it means I can speed up a little bit as opposed to skipping ahead so we're opening default dot services dot yaml here and what you want to do is go all the way down to and duplicate the file move it into services dot yaml and go ahead and configure it so that your your Gatsby site can access your Drupal site that you've set up obviously another thing you want to do in this process as well is to write some content put in some data some rudimentary data that you can consume and now the really good thing about this course configuration that you see here is that it is allowing any header any domain any person to access your Drupal site but that's usually not something you want to do in production actually it's really never something you want to do in production so the next step is to do exactly that now one of the things that's going to be a little bit unique to this process is that we're actually going to go ahead and import our Gatsby site into Gatsby Preview itself so there's several ways to do this we have what's called a automatic provisioning available in Gatsby Preview which allows you to go ahead and create a new site and configure all of the things that you need to do and so for example right here we're going to create a new Gatsby site and configure the Drupal base URL that is tied to the Drupal site that we're going to use for this and there's a little bit of a process here to provision the new site in Gatsby Preview and as you can see it's going to take a little while but what we're creating here is a new test instance for our Gatsby site and as you can see already we're performing our initial build of the Preview instance which will allow us to access a staged Preview version of the Gatsby site the ultimate result here if I go through and scrub here is that you'll see that finally we have our Gatsby site available now just to go back and skip ahead a little bit the next thing that you're going to want to do is to install the Gatsby live Preview module so there's several ways to do this you can install the Gatsby module by using Composer you can obviously use a tarball things of that nature and then what you want to do is you want to actually go into the help options which is currently where the configuration is located and you're going to want to save that configuration by putting in your Gatsby Preview URL and I'll show you what that looks like in just a moment here so let's go ahead and take a live demo here we're not going to risk it with the Wi-Fi I think that the Wi-Fi has been a little bit finicky today so let's go ahead and take a look at a live Preview so this is using my personal site and I wonder if I can full screen this let me see if I can full screen okay well sorry about that quick time doesn't let me full screen but so what we're doing here is we're configuring the Gatsby Preview Server URL here on the right side now what you can see is if I'm going to my Gatsby Preview site you can see my URL is available there for me to take and put into my Gatsby live Preview module configuration now when I go to my Preview instance this is actually a staged Preview version of my site this is not a live version of my site and as you can see what I've done here is I've pulled all of my past talks and all of my past sessions into my Gatsby site from Drupal what you can see here is I've added some text to the title and as you can see the Preview actually updates on Gatsby faster than the Drupal page refreshes and just because that was very fast let me just go back so you can see that one more time because it is very fast and we like to talk about how fast Gatsby is so just to show you that again as you can see I've inserted some text that says hello from Drupal into my node in Drupal into the title and obviously you can do this with any of your fields that are in your content entity now when I hit save just watch very closely here you can see that even before you leave the page the Gatsby Preview updates pretty impressive right and you can even you know add more text very quickly and it updates instantaneously I made the mistake once of actually doing this on my live Drupal site and so I actually if you looked at my site recently you might have seen some gobbledygook from previous demos I've done on this but as you can see it's very fast it's instantaneous and it really operates very well and this is what live preview with Drupal in Gatsby looks like so now back to the presentation and apologies for this these technical difficulties here let's talk a little bit about now what were some of the things that we learned from this whole process cool thank you so as I mentioned at the beginning the the first thing we really had to figure out was which approach we were going to take all the different use cases that people may want to to use preview with Drupal and Gatsby and how we prioritize things so we very much took kind of a crawl walk run approach here and so the current implementation as fast and amazing as that is is really just the beginning of what I think we can get to but let's talk about some of the problems that let us to the approach that we took in the first place so first and foremost you may or may not have noticed but in that preview that Preston did he was actually having to hit the save button to create a preview in Gatsby so right now it would be great if you could just create a draft in preview state the same way that you do in Drupal itself but unfortunately forums API has some legacy behavior that really complicates this in terms of render arrays and in terms of because the canonical source for Gatsby source plugin has to be JSON API formatted data getting that from a non-saved entity in Drupal 8 today is actually quite challenging so that was one thing that we definitely ran into and basically punted on and said saving it for now is good enough another challenge is that JSON API has no internal APIs that you're technically so the only recommended way to get a JSON API formatted data for for an entity today is to make an HTTP request over the wire but obviously if we're using it as an internal Drupal module that's not ideal for us so we're basically having to chase head with JSON API right now to keep things up to date as some of the internals are shifting and they're stabilizing but that's a temporary situation so like I said that's really kind of just the cusp of what's possible here with this kind of integration and so the third and Grove and the Gatsby team and some other partners are working on this working group to really explore what's next and what's possible here so our friends over at media current another Drupal agency have built an amazing decoupled distribution called RAIN and we're really excited to look at some integration points there I'll show a screenshot that highlights some of those features in a moment we're adding support very soon for content moderation so what this would do is instead of saving a new published version we would have our own workflow state that was Gatsby preview or something that would be the first state that things were saved to and then you could move content through the workflow moderation system as you as you like we're also this is a longer tail thing but we're working on creating a sync API in Drupal and combining that with the work that's being done on the Gatsby side to support incremental rebuilds so that we can really make it even faster and more performant across really large sites yeah and just a talk briefly about that one of the biggest issues that a lot of people face today is that if you have a very large Drupal site or a very large very large data source with a hundred thousand or a million pages for example or entities that you need to process doing a rebuild of that entire Gatsby site can be very time consuming and so the idea behind incremental rebuilds is to enable only the differential only that difference between the former state of the content and the new state of the content to be reflected so only that content that is only those pages that have that content leveraged on those pages will actually be rebuilt under incremental rebuilds yeah exactly so another thing we're talking about and still kind of considering is keystroke by keystroke preview so that as every single time you type a key or add an image or things like that it's instantaneously in real time showing up in your preview in Gatsby there's some technical challenges there that I'd love to talk with people after this about and some others that we're considering and having some conversations about but aren't sure exactly what they would look like some people have asked about having an eye frame where side by side in your editing form you could actually be seeing in real time a preview instance sitting right next to your form and we've also been talking with some of the Drupal hosting companies about potentially really having first class support for this integration point so that the type of cores and configuration things that Preston walked you through wouldn't even be wouldn't even be necessary you could just spin up an instance of Drupal 8 and have Gatsby sitting there already connected and ready to go and yeah this is the rain distribution that I alluded to earlier as you can see it adds some editorial enhancements to paragraphs and things but it also has that nifty little button down at the bottom for open in Gatsby preview one of the things about this is that because it's not deploying live you can actually at chain make a bunch of different changes and they all get reflected in the preview states so we're also using the build states module so that you can choose and you can track how many changes you've made and choose to deploy those when you're ready and satisfied with with what your preview looks like so hopefully all of that will get integrated into rain very soon and yeah this is just the screenshot from a live preview instance as we already saw so what are some interesting takeaways and conclusions that we can draw from this the first is that Google Google sorry the other G the other big G in the room Gatsby is not just for static sites Gatsby is something that you might have heard of as a static site generator very similar to Jekyll or Hugo but Gatsby is actually much more than that you can build highly dynamic applications with Gatsby as well and it's really great for CMS driven sites too if you want to enable something like live preview the Gatsby source Drupal plugin allows you to pull content from any Drupal 8 site as long as it has JSON API enabled which is of course available in CoreNow and the great thing about the GraphQL API and Gatsby is that you can query your Drupal data you can query any other data that you're pulling from at the same time within your Gatsby application and of course it retains all of those really great benefits that we get from switching to a react driven development workflow where we can do things like declarative rendering leverage JSX leverage a lot of the practices best practices that have emerged in the react ecosystem and that we've pulled as well into the Gatsby ecosystem so live preview is ready for you if you want to try it out once again Gatsbyjs.com slash preview the Gatsby live preview module is also available we'd love to hear your thoughts feedback any bug reports contributions are also welcome if you go to Drupal.org slash project slash Gatsby that's where it is and please try it out today thank you very much thank you well we have less than a minute I don't know if we have time for questions yeah I think we can take one one or two questions maybe and since we don't have a mic stand we'll go ahead and repeat questions from the audience test these work any questions all ready well thank you for a great Drupal.com put scenes and we'll be here afterwards a little bit if you'd like to speak with us later thank you