 Kia ora koutou everybody. It's so good to be here. Thanks for having me. Today we're going to be talking about an intro to decoupled Drupal with the Gatsby front-end. It's not going to be too nitty-gritty developer or too high level because there were some great presentations about that in the last few years, but we're going to walk through and step through. So quickly having a look at the agenda, a little intro about me, quickly asked the question, why decouple and why not? A decoupled example and some Q&As and a reminder about the Drupal sprint on Friday. So who am I? Stu West originally from Cape Town, South Africa. I'm two months in New Zealand so I'm new to everything and it's been a wonderful experience so far getting to know my new team here at Sparks Interactive where I'm working. I'm a water baby so in loving anything to do with the water surfing, sailing and one day I hope to foil on the lovely waters of Wellington. I love playing music and play a few instruments and I've been married to Wendy for about 18 years going strong and I love cats. So I've joined the team at Sparks Interactive here in Wellington. I'm really enjoying it. I'm a full-stack developer focusing on front-end and the Drupal site building and developer experience. I love playing with Arduino and web sockets and linking Arduino to React apps for a bit of human-computer interactions and currently learning VIT, JS, Storybook 7 and TypeScript in my spare time and I love using those things in new projects. So I've been on Drupal for about 13 years and been at a few conferences and one of them in 2021 was the Gatsby conference where I'd have a little funny story to tell you in that in South Africa a Gatsby isn't Gatsby JS, it looks like this. Really big meal for the family. It's really cheap too but it tastes great and it keeps speaking to you for a few more days afterwards. So looking at what is decoupled. There were a few must-watch previous talks which I'll mention shortly and then I'll do a quick brief decoupled explainer. So Josh, why he's right here in 2019, spoke about why we're inventing a worse wheel but then followed up in 2022 about the state of Headless and the emergence of Mac or Mac I think and those really covered such a great array of strategic talks into using decoupled, the maturity of the frameworks that we're using, going into things also like caching and CDNs and the things functions on the edge and all these wonderful things. So definitely worth a watch. And then in 2021 as well from Sparks team, Marco and Gareth spoke about taking a distribution decoupled with our sector distribution and Gatsby. So for those of you who haven't seen that and just want a little explainer, why decouple. One of the great things is that security. As everything is compiled before being exposed to the web, you automatically get a layer of obscurity from the CMS. So even if your CMS is vulnerable, bad hackers simply cannot find the CMS as opposed to knowing that user login, the default login for Drupal. Another advantage when using Gatsby is that hosting usually takes place on a content delivery network or CDN which provides many features and one of the biggest security, one of the biggest of those features is DDoS attack prevention. This should mean that even if your site is being hit by a lot of malicious bots, those won't get to your back end or the CMS. One still also needs to just as a note look out for cross site scripting and cross site request forgery, but there are mitigations for that. Another great thing about decoupling is that you're not limited to a single front end or back end or you could have multiple front ends and multiple back ends. And also you could have differing consumers like your website, mobile phones, watches with a one to many API connection. Other things like performance. With Gatsby you get server side rendering and a few others we'll talk about later too and the third static generation. And what that is is you can decide to perhaps build the first 200 articles, all the most used articles on your CMS. And later on you can decide whether when the person first looks at another page, perhaps a news archive, it would then build the page as it is requested. Or you could use a web crawler, something on Kron that can outside of build time. Slowly just build through maybe thousands of nodes of articles. So it doesn't affect your initial build time of your site. You also get a diversification of teams, a great developer experience in the React and JavaScript ecosystem. And with that, and using components, especially in Gatsby and React type ecosystems, control moves from a push approach to a pull approach. It becomes component driven where the component defines data requirements. And it's easier to maintain that way. We also get to use lots of modern workflows. And there are loads of services. And we get to use open standards. So services like Gatsby cloud, Netlify, Lagoon from the Maze.io team that's here and Vosell, Cloudinary, Algolia search. There's so many great things you can use. And a lot of them have a wonderful free tier where you get gigabytes of bandwidth and thousands of connections for free. So if I were to say, why not decouple? Drupal gives you so much out of the box. If you speak about web form validation, friendly public private file URLs, authentication, if you want to log in or do some sort of authentication against somebody using your site. And there also might be some added hosting costs. But there are numerous contribution modules that help you get around that, like we spoke about decoupled web forms as well. So again, if you didn't know what Gatsby is, it's not a two foot sandwich. It's a very popular JavaScript based static site generator. Or people might say now it's even a dynamic static site generator. HTML content is basically statically generated and using React DOM, server side APIs, and then it's enhanced with client side JavaScript via React hydration. So what that means is hydration is the process of using client side JavaScript to add application state and interactivity to server rendered HTML. It's a feature of React, one of the underlying tools that make the Gatsby framework. I'm just reading the definition because it's probably better that way. Gatsby uses hydration to transform the static HTML created at build time into a React application. What's also great about that is for SEO, you can pre-build your static, your first build with all the things in the markup in the head, your open graph or schema information so that web crawlers can crawl that really easily and get all the information they need. And then you can hydrate that with all the extra data. And then Gatsby uses GraphQL as a content store. That enables a page and static queries to declare what data they and their sub components need. And then Gatsby makes that data available in the browser to the front end, to your components. I really enjoy using GraphQL. It's super quick and it only returns what you ask for. So in this example, and for those of you who have already investigated using the Gatsby module, there are a few different plugins that can interact with Drupal. For this demo and in the repo that I'm going to share with you just now, we're going to use the Gatsby source Drupal plugin. There's also a Gatsby GraphQL tool kit, which allows you to use GraphQL on Drupal, but then you can also build out a custom schema and you get the benefits of the Gatsby source Drupal module so that Drupal and Gatsby can still talk to each other. Whereas if you look at number three there, Gatsby source GraphQL, it's most the maintainer even says it's deprecated. The reason being is you don't get any of the, let's say, benefits such as, well, it has known limitations in that it doesn't support incremental builds, CMS preview, image optimizations, and there's a lack of support for the GraphQL data layer. So we'll look at why that's important in the next few slides. So stepping through, we've got Drupal and Gatsby and we'll use the latest Drupal 9.5 for now the stable versions and the Gatsby front-end JavaScript libraries. We'll use Gatsby source Drupal plugin and we'll require Gatsby module and JSON API to be enabled. There are also some great talks coming up about Next.js and the next integration with Drupal and building an API with GraphQL 4 and decoupled web forms. So those will be great to add on to this. So these slides will be available on a later, but there's the repo with the full Drupal running our Drupal sector distribution. It's using DDEV, so very quick to install with a database included so you can just SQL see that database in and it'll be ready to go. And then the Gatsby front-end as well. Just run yon start and you'll be ready to run. So a decoupled walkthrough. We'll require the modules we need and when we enable Gatsby and Gatsby JSON API extras, a few more modules will be enabled. The content moderation, workflows, JSON API extras and JSON API. It'll look something like that if you can see on the screen. Gatsby will be enabled and the extras, JSON API extras, a few more modules too. There's some more as well. I was trying the JSON API menu items, but couldn't get that to work for the demo, but there are a few others as well. And in your Gatsby module settings, you'll find with JSON API extras, you can set your endpoints URL. We're using the default JSON API and we're switching on the include count in collection queries and that just speeds up the build time. In JSON API extras as well, we can override all the different endpoints. You can see there that we've got JSON API blocks. You can have articles or your different content types that exposes that to your front end. That does show a lot of data just to say so that you can go into each field and disable the ones that you don't need. Otherwise, you get a huge stack of JSON output that can slow down when you have, let's say, 40,000 nodes being dumped on your screen. All right, so we're going to use local host, 8000 when you're running your Gatsby site. It'll go onto that port and there's a little tip which I missed for a few days, which I had to get a team member to point me to, and that Docker has an internal URL to be able to communicate with your local host in order to refresh your local development environment when you save a node in Drupal, which I'll show you in just a little bit. That's what the settings look like in the Gatsby module. We'll add some more URLs later when we connect to Gatsby cloud. The module allows you to enable various entities in Drupal, which it can interact with. If any of those change, it will send a signal to Gatsby to say, I've just changed the media file. Do you want me to rebuild that out on your front end? There are also a variety of performance enhancements that you can enable. Here, it's saying that, let's say, you have an article and it has three related articles, but those articles also have media. When I save the parent article, do you want it to rebuild everything it's linked to or just the current article? Then again, not storing those entity, the self-referenced entities is what I was talking about now. A few more modules for authentication. The key auth is great. You can use basic authentication, which would just send the username and the password, or the key, which you can add to your environment variables on your local host and in your building environment like Gatsby cloud or Netlify. Of course, with Drupal, wonderful permissions that you can set, you can really lock down if you create a role like an API role, create a Gatsby user or whatever you'd like to call it, and you can then add only what that role needs to be able to allow the Gatsby module to send the correct information. There's a great walkthrough on Drupal.org on how to do that with version two of the module. Then, on the Gatsby side, on the front end, we're ready to go. One tip is to add the host 0, 0, 0, 0, so that the Docker that, with a special URL that Docker can communicate on the local network with the front end. And then, environment variables. We're going to add some of those to our local machine, and that allows Gatsby to connect with the Drupal CMS ready and waiting. In our config, this is really just here for those you're going to look at the slides again. It's a lot of text and code, but something this is what your object would look like, passing it to the Gatsby source Drupal that has all the information it needs as to where your Drupal back end is and how you're going to connect with the different authentication keys or usernames. We're ready to go yarn start and run Gatsby. And when it starts, you'll see a whole lot of spinning things and a whole lot of code output in your console, and then Drupal will, well Gatsby will then connect to Drupal and start pulling data from Drupal. And once that's done, as Gatsby uses GraphQL as its content store, you'll be able to see on a link that it gives you. Oh, that's a little bit dark, apologies. But that allows you to see all that Drupal gives you. So on the top hand side, on your left hand side, there's all Drupal nodes and your query in the middle and then the JSON looking output. I think this next slide is also going to be pretty dark. This is what we would have on the Gatsby side and I'll show you in a little bit. We're going to have a list of nodes that we've pulled from Drupal. On the left is the JavaScript or the JSX, the template that we're going to hydrate the information from Drupal into the templates and on the right is a query of two different lists of pages and articles. The next thing that the Gatsby Drupal module gives you is an open Gatsby preview button. So what we will end up doing is disabling Drupal's default preview and enabling the Gatsby one and that looks like this. So we'll disable the default one, enable the preview and voila, we'll have a little video playing in a little bit of what happens next. On the left hand side we have Drupal and on the right we have the local host Gatsby site waiting. It's been set to be in preview mode so any change on in its data source will be made live within a few seconds. So firstly what I'm going to do is just click save in Drupal on the left, changing the title and then I click save and then on the right you'll see the preview, just change to draft and now what I'm going to do is I'm going to edit the page again and this time just click open Gatsby preview which will open a new tab and it will show you the draft too. You saw on the right that it changed as well. The only way that the Gatsby plugin can know or tell Gatsby from Drupal that it changes is if you save it first. There might be ways of changing that later but that's how it works. All right I think I'm actually speeding through much faster than I thought so I'll just slow down a little bit and talk like that. So you might note that when you start up Gatsby you get one or two errors and normally that's because you're using the wrong authentication key and maybe the API the URL you're using is wrong or on your local host Gatsby isn't able to connect to your Docker environment or whatever your like maybe it's Ddev which uses Docker or some local environment and you might have to investigate an SSH tunnel or something like that. This works quite nicely on live which we're going to try right now so hopefully the internet will be working and happy. So we're going to do a Gatsby preview now and then a build and you can do this on multiple services so you can run builds on Gatsby cloud, Netlify or another service you can use GitHub actions or GitLab pipelines or on Lagoon but you will need a node environment to be running so you'll have almost like you're running a local yarn dev instance in your preview node and then when you do save and build you'll that will get built out on a certain part of your hosting whether it's Gatsby cloud or something customized that you've done. When we are ready for that we'll change our URLs in the Gatsby module in Drupal so up at the top left there we've got our Gatsby sector demo master that's just the name that Gatsby cloud gave me and then we've got our web hook that's going to is how your Drupal module is going to connect with Gatsby cloud, your build hook and a content content sync URL and on the right you'll see this Gatsby dashboard which gives you all the information about your builds and where you add in your settings. There are two links to see things happening and we're going to try this hopefully everything will work but before we do that suspense and anticipation. One or two things to think about and if you have loads of nodes and loads of paragraphs that are also deeply nested you're going to want to think about how you do your builds and how many items you're going to build out at once as soon as you go paragraph paragraph paragraph paragraph paragraph we've seen in production that things just run out of time and Gatsby just has to cancel during your build time so you're going to want to maybe only download a certain amount of concurrent sessions and really just like a limit how much you do at once or when you do it but this is getting better and better as we go with Gatsby 5 we can use all the new technology like slices and a whole variety of new tech to make things work much faster. You're also going to want to think about your content. Have you have you use absolute URLs inside your content? You might need to pass that and clean that up a little bit. Also files if your file downloads and maybe manuals for that schematics if those are already indexed in Google and now you're going to change to decoupled where you might have a back-end dot your site and a front-end dot Gatsby is going to need to somehow get those files and display them and when they download which URL they're going to come from and there are ways to get around that with maybe a proxy but something to think about. For me when would I decouple and I quite like the idea of Drupal as a content store with multiple sites pulling from it maybe different news sections or sites with different front-ends you can spin up multiple microsites and then content editors just need to know about one content management sort of source where they edit maybe instead of using the domain module which is also wonderful but can get really big and quite crazy when you have multiple sites. So I'm going to try and do a live demo and let's see what happens. Okay on the left we've got a live site with our page in Drupal and I see if I can click that then we're going to have our Gatsby dashboard open and waiting with our Gatsby preview running well actually this is the live site and I'll show you the preview in a little bit. One thing just to say earlier I mentioned where you could add your environment variables in your Gatsby cloud preview you can just scroll down and add your variables for your site with your username and password or your authentication key over here so that just keeps it out of get or the file system which is better. So back to dashboard over here and another little thing caveat is that I'm using the free mode so I don't get incremental builds so it will take a little bit longer in this demo maybe five seconds instead of one second but I'm sure you won't mind. Okay here we go we're going to click over here and just change the name of the title something like that. First I'm going to go open Gatsby preview there should be a new tab and this is the part where I haven't paid for foster rendering so just stretch for a little bit while we waiting you can see it building over here in my dashboard over there data update from Drupal polishing your site also gives you some links here in case you need to go to the Gatsby dashboard and or find the link. At this moment only the piece that's changed yeah but it's actually doing a lie a full build sorry it's doing a full build because I'm on the free version if I had the paid version it would only do an incremental just like that and that's why it's taking a little bit longer. Sorry about the wait let's just switch over and make sure everything has changed and I haven't perhaps changed details they're still going that's fine the fun part of doing live demos yes you can but you have to do a little bit of work yeah so yes especially with the Gatsby toolkit plugin that allows you to link in and do some more customization. Yeah so I wouldn't be able to see this if I wasn't logged in so this one's in Gatsby cloud but what we've done in the past is you use an iframe in Drupal in your theme that pulls the secure preview URL in and then you'd only be able to see it if you're logged into Drupal. Do a sort of a handoff between the two. This is taking longer than when I prepared it but it could be because we're down on the first floor and something is happening so excuse that any other questions while we wait. Yes yes you can preview the revisions you could also have an unpublished node and then just have a look at it. Although would it save it? It would save it in a draft state and then you'll be able to preview it and then make it published again. But at least I did film it that it did. All right it'd be funny if there's actually maintenance going on. That is quite a long build let's just see what happens. I think what I'm going to do is go back here. Oh maybe I just need to refresh my screen polishing building your preview. This is when we need elevator music. Maybe what I should just do is save it. It will but then at least I could show you what it looks like on the other side. Let's see. Okay yeah there it is. So sorry maybe I just clicked the wrong thing. So yeah so this is a very brief few days just recreating our sector distribution in Gatsby but literally just the front page. I wanted to show you the menu. I quickly go like this. So we have our main pages. Here we have a list of pages where I showed you the query earlier on. I also had a little bit of fun putting that into a watch. So just to show that you're not that it's a real watch but you know what I mean you could have multiple consumers of your data from Drupal. I promise it works fast in real life and so that's my fault. But that's really it. Thank you for sitting through.