Building a compelling content experience with Gatsby & Drupal - DrupalCorn Meetup 11-12-2020

um so i didn't prepare anything too much because i really wanted to make this kind of organic and more of a demo so we could take advantage of what everyone was kind of interested in when it comes to learning a little bit about drupal and gatsby so first i just want to uh ask a quick question and feel free to either you know we're a pretty small group so you can unmute if you want or just drop it in the chat but i just want to gauge everyone's level of knowledge with gatsby so have you the first question is have you ever used gatsby uh locally so if you ever downloaded and actually ran anything because that might determine um how we take this demo if if not a lot of people have done much with gatsby we'll start at the very beginning and if there's some people that have tried it then maybe we'll go and move forward a little bit so so far it looks like no is the predominant answer okay so we got one that has done some locally but so looks like the majority has never downloaded or run gatsby which is fun for me because then we can start the whole at the beginning so the goal here is we have an hour i don't know how much we're going to get through so i'm going to preface it by saying that but what we'll try to do is have a drupal site and we will spin up a brand new gatsby site and see if we can get it to start sourcing uh content from our drupal site and build a gatsby site with it and uh zeth since you have some experience definitely let me know as i run into problems which i probably inevitably will i used to work a lot more on building gatsby sites but now i work a lot on the internals so i don't get as much opportunity to work on the front end stuff as i would like so i might uh we i'm sure we'll run into some problems and we'll have to debug but that's hopefully part of the part of the experience that we're going to go through together all right so i'm going to go ahead and share my screen here let me pull a few things up so just give me a few seconds all right okay so you should see a command line and i'm going to open up a new tab and make it a little bit bigger and let me know if you can see that or if you're having any problems hopefully that's good enough all right so the first thing we're going to do i'm just going to go into a folder and the first thing i'll preface is saying you'd have to have the gatsby command line installed which i'm going to open and see what we'd find so there'd be first we wanted to install the gatsby command line which we could use something like that npm or yarn can be used just like if you're familiar with drupal 8 you probably use composer which is a php package manager npm and yarn are i guess just node package managers so the commands are somewhat similar and so i already have gap installed so once gatsby's installed i can do gatsby new and i'm just going to call it drupalcorn and hopefully this works we'll see it's going to take a little bit of time but it's going to install a gatsby site locally with just a default starter which means it's not going to have much in it there are all kinds of different gatsby starters which you can think of a starter as if you're from drupal it's kind of like an install profile it could have different uh plugins installed with it it could it's like a default start state that um you could have you know different ways to if you want to do uh you know different stylings whether you want to use sas or css and js or platforms like emotion if you've heard of some of those it could install that for you it could install different source plugins so it's really just like an install profile the default one is what we're going to use here but again on the gatsby docs you can see there's a whole bunch of different starters that you can use so we're going to follow the instructions we're going to change into this drupal corn directory and i'm just going to show you what's in here so there's some files in here actually i'm going to do that so you can see it actually in installs it from git so there's a git repository in here with my gatsby site if i run gatsby develop i already have a site running let me close this out i don't want to run two at the same time which you could i just keep it simple so i'm running gatsby develop this is going to read my gatsby config file and start running my project and if you're not familiar with gatsby it's commonly known as a static site generator but it's important to know that it's more than just a static site generator it's built on top of react so it's really like a react framework so you anything that you can do in react you can do in gatsby so you can build really dynamic websites or web applications but the benefits are it starts as a static site so if you have a lot let's say you have 70 static content and 30 things you want dynamic you could build that so one example i like to give is if you're building an ecommerce site you might have a thousand products and you want those pages to be static and the reason you want that is because it's super fast uh but you want some components on that page to maybe be dynamic like the add to cart button or maybe the price you want to load dynamically in case you have specials or in case that user has you know some kind of coupon added to their cart so you could uh hit the actual drupal website and pull in the actual price live when the page loads rather than making that the price components static so hopefully that makes sense and the reason it is so fast because it's static is i one thing i like to say is if you're coming from drupal and i i've worked in a lot of a lot of drupal 6 drupal 7 8 websites you work really hard to make the website fast by adding caching and so there's quite a bit of work you have to do into that to make a drupal website really performant and it absolutely can be done but by default it's kind of hard to do if you're building a larger scale drupal site you got to put some work into it where on gatsby by default it's going to be really performant and you have to work really hard to make it not performant so i've certainly seen a lot of fast troop websites and i've seen a lot of slow gatsby websites but by default they're flipped you can by default drupal's going to be pretty slow and by default gatsby's going to be very fast all right so i'm going to go ahead and open this up and let's see this is our default starter there's just some pages not too much here and if we go ahead and open this up so we can look at the code give me one second to pull it up i'll make this a little bigger okay so we have our folder here and let's go ahead and look at our source we have this pages directory this is this index page so you can see it says hi people so let's just say hi drupalcorn and if we save this and then i go back you'll see it immediately changes so there's no refreshing the page nothing like that it's all hot hot reloading and so anytime i make a change it's gonna immediately show that change so that's kind of a nice experience that you don't have to necessarily refresh the page when you're making changes to the site you can see that this is pretty much looks like html so if you're not familiar with react it's going to look a lot like html there's just some of these extra components like there's this this is this seo tag is an seo component which gets loaded in and we're not going to spend too much time going over the intro to react but just know that if you're familiar with html react of course is more complicated than that but it's going to um start to make sense as we look through some of this a little bit more but if you are familiar with react this should look pretty pretty straightforward so the first thing that we want to do is we have our site here it's nothing too fancy but we want to create uh we're going to pull in content from drupal in this example let's say we wanted to create a blog and we wanted to use drupal as our cms because we love drupal and we want to be able to you know install modules add fields and you know build the content editing experience we want with drupal but essentially replace the front end of drupal so drupal's theming engine with a gatsby front-end site so that's our goal is to create a decoupled drupal site so we have our content editing experience on the drupal site and then our actual live website will be this uh statically rendered gatsby site so i have a drupal site here and this is going to look pretty basic i have some posts in here and it's just a really simple demo there's some multilingual stuff we'll ignore i've used this in some other demos but it's just a simple content type and it's just an article with an image field i think this is what comes out of the box and this is this drupal site might be a little outdated i think it's running drupal 8.7 maybe something like that so it might not be even the most up to date but it would work with whether you're using drupal 9 or any drupal 8 website and you can see that there's a body has image field has some tags and the content is pretty basic if we look at this post it's just title some post and an image with some alt text and that's all there is to it okay so now we the first thing we want to do is we want to be able to pull this content into our gatsby site so gatsby has this thing called sourcing it can source content from any cms so this could be wordpress drupal it could be some of the headless cmxs you might have heard of such as contentful it could be uh it could pull in content from markdown files locally so you could use markdown files and what this node sourcing step or this data sourcing step does is it goes out to these external places holds in all the data locally into your gatsby develop server and then allows you to access that data using graphql and if you're not familiar with graphql we're going to look at it think of it as where you might have used sql or sql to access data from a database graphql is just like a query language for apis but it in this case the api is just like a local database so you're using you're using graphql similar to how you use sql to pull in data from a database and that's gonna allow us to build our pages the first thing we're going to do is let's look at gatsby source drupal and this is the plugin for pulling data into gatsby from drupal sites so this pulls data from drupal 8 sites with drupal with the drupal json api module installed the only thing i had to do on this drupal site to get this to work would be to install go into extend and click the json api button to install that module and to prove that if i go to slash json api you can see there's all kinds of data here that json api would expose so this is how we can install this so i'm going to go here i'm going to shut down the gatsby server let me just make sure so in this case i'm using yarn because that's my default package manager the commands are going to be in npm by default but it really just you can just change it whether you're using yarn or npm so i'm going to do yarn add gatsby source drupal and this is going to go ahead and pull this in and one thing i did mention is if you have any questions feel free to drop them in the chat i might i it's kind of hard to pull up the chat when you're screen sharing but i'll try to keep that up um or just feel free to unmute yourself and ask the question so i know if i might be going too fast or you might have questions along the way don't feel like this is all just a 100 percent a presentation this is uh think of it as a conversation or discussion so if you have questions let me know so this one went ahead and um added this and if i were to go to the code and look in the package.json you'll see that now gatsby source drupal is added so that was went ahead and was added into my project now there's this gatsby config file in this gatsby config file think of this as just your admin settings for each plugin similar to similar to how a lot of drupal modules have you know admin pages that you configure a lot of gatsby plugins have configuration options that you can set if we go back to the documentation you can see there's this settings that we're going to have to add in so we're going to go ahead and drop this in here doesn't matter the order so it's saying it this is for the gatsby source drupal plug-in we don't need to worry about the api base because we're using the default which is json api so i'm just going to go ahead and get rid of that and this base url is just the url to my gatsby or my drupal site excuse me so that's this right here so i should be able to do that and now if i save this and i were to run gatsby to develop it should source all the data from json api and pull it locally into think of it as like my gatsby database under the hood it's using something called redux which is kind of like a storage engine for react projects which you may have heard of but let's see you can see this step here that it said starting to fetch all data from drupal it pulled all the data from my drupal site including the remote files and now if i were to go to this here it's going to give me this graphical interface think of this like a sql explorer for your database but in this case the database is going to be my locally running gatsby develop server that now has all of my content that were sourced from the drupal site in the way this works is when i run that gatsby develop command it's gonna go out to this link here it's gonna traverse all of these json api links which if we were going to go to let's find the one for node article and then it's going to traverse all of these entities so every entity in drupal that's available through json api gets pulled into my gatsby redux data store and then i can use that when building out sites so let's see let's look for all node article and then i'm going to get rid of this because this was from a different site all node article nodes and let's go ahead and pull in the id the title the body we'll bring in we'll say the process body field and let's just start there so if i hit the play button it's going to run this graphql query and it's going to say okay here's the uuid for this node article here is the title and here's the processed body text it's going to see it's going to have all of them in there so it's not too much but that's all the data that is in the article content type and you can see there's you know menus there's um i have a content type called multilingual post i think there's pages maybe somewhere in here if i have any pages it's only going to show um items that have data so if there's no data it wouldn't show it but what we can do is we can use these graphql queries to now build pages on our gatsby site so by default it doesn't it provides all the data but we have to actually build the pages so the first thing i want to do is i want to create a page for each of these articles so each of these articles should have a page and it should be available at the url the url available path alias so in this case if i play that i want this post to be on my gatsby site so it'd be localhost 8000 slash article guitar dash post that would be ideally what i want this post to be at and i want to include the image as well so let's go ahead and see what that might look like so the first thing i'm going to do is i'm going to go to this gatsby node.js file and this gatsby node.js file is a special file that runs that can be set to run during the node sourcing process so when i first run gatsby develop when it pulls in all that data i want to say look for all after you pull in all the data look for all the articles and create a page for each of those articles so the first thing i'm going to do is use the create pages api and this is all documented in if you do it getting started with gatsby you'd see this and i'm gonna type some of this out quickly and then i'll try to walk through it some of this is going to look some of the syntax if you're not as familiar with some modern javascript is going to look a little uh different but it's if you aren't as familiar i'd definitely brush up on some of the you know es6 javascript things some of the latest changes in the javascript language in the last few years because that would that would help with some of this and i did do a presentation on modern javascript i think it was at decoupled days maybe now i'm hoping that video is available somewhere maybe i can try to find it okay so we want the first thing we want to do is we want to create a graphql query for these articles and let's go to here the only thing we need to pull in right now is really the id and the path you don't even really need the title i don't think because and you'll see why this this is set up this way in a second but i just need to know the id and the path for what i'm going to create um these articles at so i'm just going to drop this in here so i'm going to run this graphql query and this await means run it and you know wait here once it's resolved one thing that always gets me is semicolons are pretty much now optional so i some usually sometimes you'll see me use semicolon sometimes i won't it really doesn't matter but old habits i guess so now what i need to do is i'm going to traverse this so i get back articles which um has a data object on it and then once i get to that data object i have to basically traverse down this tree so data dot all node article that's right here dot nodes and then i'm going to use the javascript map function which is essentially just a loop just going to loop through it or map it to something and i'm going to use article data and we'll do something like that and so this is all this data is going to be available at this variable name and what i want to do is i want to use this create page function and the create page function needs a few things again this is all available on the documentation of it but it needs a path so the path that i want to give it is this path alias right article data dot path dot alias one thing to note is if some of my drupal pages didn't have path aliases this would probably cause a problem and air out i have to give it a component which this is think of this is like my theme template if you're from you know have you done some drupal theming and to use that i'm going to need this path object here so just using this path option and path dot resolve and we're going to put we're going to have a source templates article.js file which i'll go ahead and create right now so i'm just creating that file it's empty but we're going to put some stuff in there in a little bit let's go back to here and now we can pass in context in this context is any variables we want to pass into this template so in this case i'm just going to pass in something called the article id and that's just going to be this uuid for this article i need a comma here okay so that's step one now it's going to create a page but there's nothing in this template yet so the next thing we want to do is we're going to want to go to this template and actually display some data so let's go to this template if you hear me clicking it's because i'm pulling up some other examples i've done i'd love to say that i just did all this from memory but i'd have to look at the docs probably if i was uh not looking at some old code that i wrote but we we're going to go ahead and import some things so we always have to import react at the top that's a requirement we're going to import um graphql from gatsby let's see what this there is yes lynch is disabled we don't need to worry about the linter right now and let's start there and so there's the first thing we you almost always do is you kind of have a default layout right when you think about pages in your drupal site you're you have some components that are shown on all pages maybe it's the header with the menu and maybe the footer and then you're only caring about the body stuff so by default in gatsby there's this layout.js which the layout has a header has um a footer on there and then this main section is what gets populated so we want to use that layout so we're going to import the layout from component slash layout you don't need to add the js so it's going to import this layout component and we just need to create a react component here so in this react component is going to get passed in data and we're going to specify how that data gets populated here in a little bit so that data gets populated by a graphql query so we're going to export and this variable name could be data it could be query it doesn't really matter it's just it's going to look for a graphql query and it's going to look like that and then at the bottom of the page i need to export my actual um react component and this is just this stuff here is just react so we create a react component and then we export that component and then this query right here that we're gonna run is gonna pull in the actual data uh so we can then at this point this is where we can go in and load anything we want such as title body field any media items or files or anything that this article needs to pull in from drupal or that originally came from drupal and now is sitting locally in our gatsby development server so in this case let's we're going to try to keep this simple let's just go in we're gonna we'll keep the id title body processed and um let's start there for just because images are a little more a little trickier so we'll start here make sure we get it i'd rather get everything working and then we can start adding stuff once we have kind of a really basic working model so i'm going to grab this query here and the only thing is i'm not pulling in all node articles in this point i'm actually i want to be pulling in the specific node article so i'm just going to grab this and let's um i'll explain this here in a second but what i want to do is i'm creating a query and what happens with this query is i get passed in i can get passed in the context that was passed in from here so in this case this article id gets passed into this query so what do i want to do here well i want to take that parameter that article id which is a string and i'm going to pass that into node article as um basically a filter so this is going to filter and only pull only pull this specific article's data and if i were to go back to graphql you can see i closed out of this there should be a node article and there should be the ability to do a filter somewhere right there and i want that filter to equal and then i could drop my uuid right there so if i had a specific well we can try it i guess i have a uuid right there so let's drop that in so in this case it's this uuid and what do i want well i want let's just get the id and the title and if i play that you can see i only get the id and the title for this specific id so hopefully that makes sense how that's filtering so when i look back here it's taking the article id that's passed in it's using that as my filter which i don't need two dollar signs there and then i'm going to grab the fields that i want which in that case is id title and process body text i don't technically need this id field because it's already there but um i guess maybe i i might use it but so i'll grab it anyways either way there's the data that i want and now this query is going to populate data in this data field and the reason this is really powerful is because think about this is really useful for building a page just from drupal but let's say you had multiple data sources you might have you know your some things built with drupal and maybe you have a different cms or something populating different data or maybe you have a shopify site where you have products coming from shopify so you can think of that you could query multiple things from different data sources on any individual page which is why this seems like a kind of a complicated extra step but it's also a really flexible and powerful step because you can pull in data from all over and then build out your pages so now we have to build what we want this to actually look like so we're going to wrap everything in a layout component remember that's just so the header and the footer is going to show the same we'll use an h1 and let's actually this is not quite right we need to return this component here and let's go ahead and do const article equals data.node article just to keep things a little shorter so now i went into data which is this query dot node article and now i can get the id title or the body processed right from this article variable so right here i'm going to try article.title and then i'm going to create a div and this is something in react which is just dangerously set inner html and that's just um because i want you to know that you are actually you know injecting raw html into this div so you just need to be careful right you need to know where it's coming from but in this case it's coming from drupal and the body content should already be processed if we use this process field here so let's go ahead and go to article dot body dot processed and again i just follow i traverse this tree so the article then the body then the process so each of these brackets is basically a dot here and i think that's it and let's go ahead and just try this so if this works all of our articles should be available at their correct path and it should just show the title and the body all we need to do is come back here and we're going to need to rerun our gatsby development server because we changed anytime you change anything in gatsby node you need to restart it at least for now and let's let this thing run uh it says wait it looks like we might be having an error the queen the graphql query and the non-page component so we have some error something's not working in our gatsby node so this this isn't going to work yet we got a problem but let's go ahead and look at it and just verify that it's not going to work so ideally we would be able to if we go to this post i would be able to pull in this right here and it's not going to work quite yet so this page doesn't exist so let's do some debugging and figure out why this is not working uh it looks like he might have a typo in line 11. should be plural actions i don't know if that's the cause and you can see this tells me i need to restart my development server it's going to go ahead and restart that for me thank you for that catch i think that's probably i mean that there might be more problems than that but that's certainly one problem so all this is is this actions provides a bunch of different apis in this case this create page function is what is used to create pages so if i'm not destructuring from the right variable it's not going to be able to actually create the pages there you go good catch thank you um so now this post is available right so now any post that i have here so if i just go to a 404 you know something that doesn't exist you can see now i have all these these posts available so this this post is here this post is here so you can see i have all the articles available on the site uh one thing we could do is we could get that image to show up let's not do that quite yet let's create a listing page so right now i shouldn't have to go to a 404 page to see all the articles right let's it'd be nice if we could access it all you know slash articles and that would have a nice listing of all the articles on our site think of this as we're building a view right in drupal you just build a view for this in this case we're going to build a page that lists those articles so under pages is where you can create any think of these as like your static pages in this case i'm going to create one called articles.js and in this case whatever is before the dot js is what the path is going to be so in this case it would be just articles and in this we're going to do pretty much the same thing we did before where we're going to import react from react oops import graphql because we're going to make a graphql query we're going to import our layout and let's start there and we're going to create a react component it's going to get some data and then that's going to allow us to actually output the results of the page and we're going to write our query our graphql query and in this case the main difference that we're going to do is instead of just pulling in one specific article we'll pull in a bunch of articles and then we need to export um did i pluralize yeah i realized that then we're going to export that react component and and any page has to export a react component because that's how gatsby knows it takes that react component and then renders the page so in our graphql query i'm just gonna um copy this from the example i have and drop it in here and we're gonna we'll walk through what this does but since we're we only have about 20 more minutes and i'd like to leave a little time for questions i'm going to try to go move a little faster in getting this set up uh so this is sorting by the created date it's ordering it descending title id body created date in this case it's also pulling in some information about the image the alt text for the image and anytime you use we'll say an entity reference field which an image or media items will always use entity reference fields in drupal right everything's entities and they're related it's a it's created as a relationship so if you think about if you're using some kind of reference field it's always going to be under this relationships field in graphql so in this case we're creating a relationship to this field image and we're pulling in this local file and this is using gatsby's image component don't worry too much about what this is doing right now it's basically saying i want a fluid with a fluid image with a max width of 600 if you look up documentation for gatsby image it'll be documenting like what the syntax does why it's why it's necessary how it works all that but just know that that's creating the image and i'm going to grab the articles here again i just traverse the data dot all node article not plural dot nodes and then i have access to this and um what i want to do is i'm going to return this react component i'm going to wrap it in a layout we're going to give an h1 just call it articles and then we're going to use um some javascript syntax here to articles.map which again this is just going to map each article or loop think of it as a loop we're looping through each article and what do we want to do for each of these articles what we're going to we're gonna display something so we could just display the title or um what we really want to do here is it's easier you know since we're using react let's just create a new component for what we'll call our like our teaser or our preview so i'm going to create a component called article preview again this is because i'm i'm using react i can just create any components i want and then load them in so i can think of this as a reusable component that i'm going to create that i can use in any place in this case i'm going to use it to display a teaser but i could use it in other places on the site if there's other places where i have preview you know article previews and i want to be able to reuse this component it just it it's helpful because you can reuse things and when we look at what that component is going to look like i'm just going to drop it in here and we'll explain it let's try to move a little more quickly we're importing react we're importing gatsby link component and think of gatsby links as like a supercharged a tag so if you're using html you normally just use an a tag for a link but gatsby link does things like preload in the um in the backend so when you load the page if you were to pull that link up in your viewport it's to start pre-loading that data so when you click on it it's super fast so it does a lot of helper things to speed up the performance of navigation internally on your site so anytime you're doing internal links you want it to be a gatsby link component and then gatsby image component um is something that allows you to optimization of images so it does like the fade in effect and uh speeds up the loading of images so you want to use that instead of just a normal image tag and what we're doing here with the article preview is we're going to pass in a title a path the image the alt text of the image and then a summary which would be think of that as like a teaser component or the teaser body text right we just we don't want just um you know we don't want to display the whole article we want to display maybe the just the teaser part from drupal and we're going to link to the path and we're going to put the title in an h2 we're going to then display this image with this image in this alt text and it's going to be a fluid with image which means as you change the size of the browser it will shrink or enlarge and then we're going to set the html as the summary so now all we need to do that what's this notice here um i'll just link blender error again we don't need to worry about that okay so now we can use this article preview component and the way we're going to use that here is we're going to use this article preview there it is and all we need to do is pass in all of these values through props so react requires a key prop which just needs to be a unique um a unique value for each one of these article previews so the article id is always going to be a unique value this could be the path it could be anything it's just something that react requires and then we're just going to pass in if we look we need a title a path an image an alt in a summary so the title is going to come from remember article which gets us down to this level dot title then we have path which is article dot path dot alias if we follow this down path dot alias and then we have image which this one's a little trickier because it's article dot relationships dot field image so we we're down to here now we gotta go dot local file dot child image sharp dot fluid so you can see this is this one's kind of tough to get to any time you're traversing relationships it's not really hard once you know how to follow the path but it's you know they can get kind of long so i just followed that path article.relationships.field image local file child image sharp fluid and this will get that fluid with image that it can get passed in the alt text is available from field image alt so article.field image.alt and then the summary and we're gonna do a little um we're gonna do a little magic here i'm just gonna drop this in okay so what i'm gonna say is if the article.body summary exists so if you've created a teaser on your drupal site if you create a summary on drupal then use the summary otherwise just take the body text and we'll just take the first 300 characters again it's not going to be anything fancy it's just gonna you know might cut off midward but it's good enough for now to show an example ideally you just set every you make sure the summary set and drupal and then it works okay so we got an issue here we did not close out our tag there we go now if we go to slash articles let's see element type is invalid let's see what we're doing here let's try to restart the gatsby development server and just see yeah it looks like it might have um aired out on us when i was when i saved it when it that component didn't work so since i saved it and that component didn't exist it caused an error you should have been able to do that without having to restart but if you do something that causes it to break so something's messed up here ah typo all right hopefully just rebuild and work let's see it's thinking it's thinking too long something's broke let's try restarting and see if we get another error all right maybe it worked this time there we go so you can see and you see how it kind of did that load in effect the other thing i'll show you that's kind of cool if we go to the network tab watch as i scroll down you should see well maybe not oh mate so it actually is set up so let's say i hover over it so now i hover over this you see how it immediately um you can see the network tab have activity so if i were a user and i was going to go to click on this as soon as i hover it's already starting to load and the reason that's useful is then if let's say there's a half a second before i click that's a half a second faster than that experience is going to be because that page is already pre-loaded so now when i click on it it seems you see how there's almost not even a there's not even a flash it's so fast because the data is already there it's almost like it's just switching between the two pages so it's super fast super performant um the last thing i will say so this is uh pretty cool last thing i'm gonna do is i'm gonna i'll take about five more minutes and see if i can get this uh showing how it works because it's pretty cool experience and then once i do that um we'll hopefully have five minutes for questions um there is a question that says what's the best way to deal with fields that are null or empty so that's can that can be tricky if as long as you have let's say you have an image field or let's just say you have a text field in drupal and it doesn't have any data if it doesn't have any data at all in any of the content let's say it's on my article content type then it's not going to show up on json api and i'm not going to be able to use it in my gatsby site but if one piece of content has data in there then json api is going to show that field and gatsby's going to know that that field exists that being said as long as one piece of content had it if it was an optional field and some of your pages didn't use it you could just do a check with javascript and just say you know if this exists use it you know display this part of the page if it doesn't exist don't display anything so it's just like you know you could in a php template you check if it's null or if it exists so if this text field exists display it in a component otherwise don't display it hopefully that made made sense so there is a gatsby drupal module and it's one that i'm a maintainer of and it allows you to set up live preview and incremental builds so one of the problems especially this is great if you're using it for a small site like a blog but if you had actual content editors the problem is there's this build process that has to go through right where it pulls in all the data and it actually builds the site and that's not necessarily a great experience for a user because they want to be able to if they're a content editor they want to be able to see their content before they deploy it so when you actually do so we've been running the gatsby develop command if we were going to deploy the site we would run gatsby build and that would build you know production ready version which you could host on any static hosting provider a lot of people use netlify but you could use it on you know there's you know cloud i think cloud you can host it on cloudflare you can host it on um for sale there's a whole bunch of different static hosting providers the reason most people choose netlify is because it's free you can actually have it do the build process so it'll actually build and deploy it for you and you can host most production level websites honestly that aren't huge traffic for free so it's really cost effective and you can run your drupal site on something like pantheon's development which is what i do you know development version and you don't necessarily have to pay for that either so you can actually run a drupal site with gatsby for free and there's it's pretty nice so i have this module installed i'm going to go and show you here and i'm going to do something else real quick okay so already so i have something called ngrok spun up and this just allows me to create a local tunnel into my development server on port 8000 so you can see this url maps my localhost 8000. if you were to go to this url please don't because it might you can only have so many requests but you could get to this local running gatsby site um that i have running right here so i'm going to go to where i have you know i have the gatsby module installed i have this fast builds module which is allows you to do some build caching things we're not going to go through that and i have this json api instant preview and incremental builds module enabled so if i were to go to here and i drop in my gatsby preview server url which i already did i tell it what entity types i want to send to the gatsby preview server i want file entities and content entities to be sent now i'd save it and in theory if this was set up right it's not going to work quite yet because i need to do one thing give me one second [Music] um i need to grab this so i need to um when i'm running this command i need to set this environment variable you can do this in an environment file or if you just put it on the beginning of the command it'll run it's basically saying i need to enable this refresh endpoint it just allows that allows an external source like drupal um is that oh i was looking at the wrong one okay okay so i want to run run gatsby develop that was my other side i had running before so ignore that if i run this now it opened up this refresh endpoint which means drupal can now send data to my gatsby development server and now if i were to pull it up here i have this blog post and hopefully just refresh make sure it's still running and let's find this uh blog post about guitars that's that one it's not loaded yet for some reason okay it's loaded now there we go and i'm just going to change this somehow i'm going to add some exclamation points here and so when i save this ideally i shouldn't have to refresh this it should just save we'll see if it actually is working there you go you can see how it changed so i have live preview set up so if you're a content editor you could have a preview site which is just um using preview uh using a gatsby development server you could run locally for your client or you could use gatsby cloud which is just available at gaspjs.com and that has this you can spin up your own previous servers it hosts it for you and it has what's called incremental builds which means it's much faster build times one thing you run into with big large scale gatsby sites is if you have thousands of pages sometimes your build times could be you know 10 15 minutes and no content editor wants to wait 10 or 15 minutes after they click publish for it to go live incremental builds is kind of like a smart mechanism so it only builds the pages that have changed so it can take that 10 or 15 minute build time where it builds that static assets and it cuts it down to you know 5 10 30 seconds depending on how big your site is but it's super fast and that's much more manageable a content editor can wait 10 seconds for their stuff to actually be live to people but they don't want to wait 10 minutes so that uh that's one reason to maybe look into gatsby cloud if you are building larger scale gatsby sites um for simple stuff though it's not necessarily needed so that's that's the demo i'll keep my screen showing up in case there's any questions but feel free to drop any questions in the chat if um or unmute yourself and we can discuss so i know i went really fast because i wanted to cram a lot of content into one hour so hopefully that didn't go too quick for people but um if some of the syntax was not uh familiar uh just you might need to do a little more looking into react if you don't have react experience or some modern javascript stuff i know that's the stuff that really tripped me up when i was getting started as i didn't have a lot of that but once you kind of get the idea of how that works then you see that gatsby's just kind of a layer on top of that so it's just really a react framework for building really cool really fast websites cool this is kind of i've been wondering about like what's the glue that puts this together right um i am not very much javascript right so do you have any resources or places that you know we could go to pick up modern javascript javascript and react um so there's quite a bit of let me see if i can find it here there's quite a bit of react courses and such available i would recommend that's a good thing to start on i'm trying to find where i i did a presentation called modern javascript for the drupal developer and i'm trying to find if they're if that resource is live i don't know if it was recorded or i know my slides are available uh let's see this might be [Music] no okay so it's drupal camp atlanta let's see if it's sometimes i forget where i where i talked about things um [Music] so it was so i don't know if the drupal camp atlanta stuff was recorded should have been but let me see if i can get my slides for that so here's a link to i'm gonna stop sharing i'll post in the chat a link to my slides for that session and there's um it if you don't have any if you're looking for like a really if you're like me and you're like why is all of a sudden it seemed like javascript is changing it seems like you know when i was when i started in drupal it seemed like javascript was just javascript right we just used jquery we didn't mess with it too much but we just used it where we needed it and now it seems like there's all these new things with javascript well there's kind of some history there it's kind of i go through that in that session and i talk about um i have some links to different code sandbox things for um trying out some of these different syntax that i was that really threw me when i was getting like arrow functions and the map function and template strings so that those code sandbox links could be helpful for uh trying out little snippets of things and i i don't know if again this was at drupal camp atlanta this year i would check youtube because they might have posted this video that i did of the session i'm not exactly sure though i haven't done a lot of searching in that and then yeah i do have a youtube playlist for gatsby and drupal so andy posted that thank you andy um that one's it's a little outdated it's about a year and a half old but 95 of it's still the same the only difference is maybe the ui of what the gatsby drupal module looks like since then everything else is pretty much identical and then yeah i would say west boss is really has some really solid courses from what i've i haven't taken any but i've listened to some of his podcasts and i've heard a lot of people uh speak very highly of west boss so definitely check that out cool well thanks everyone i appreciate it um appreciate john let me speak and talk a little bit about gatsby i always like to be able to speak about it whenever i can i was wondering if if i can ask a question really quick do you have any examples of getting media items out of drupal into gatsby um media entities so let me give me one second here i if you go to so i used to work for an agency called third and grove some of you may have heard of it i'll post thirdandgrove.com so that's the website that's built on gatsby and here's the source code for that website we it's open source so if you want to see i'm pretty sure we use media there quite a bit quite frequently that website is um i would say i didn't build it so i can't take credit for that some of the best practices we use we might not use today if we were to rebuild it but a lot there's a lot of really good stuff still in there and good examples of how things can be used and the cool thing about that website is i mentioned hosting costs i think costs that website a month to host and it's a website for an agency that has you know 60 people working for it so it's the hosting costs are one of the big benefits to doing something like this nice but hopefully that helps um so there there should be some examples of using media i think media was used on that site i hope okay thank you so is the uh the live the incremental preview thing is that good enough for production use or is that yep a lot of a lot of people are using that in production today and there's quite a few if you one thing i will mention another quick shameless plug if you're in drupal slack there's a gatsby channel in there we have weekly meetings on tuesdays 11 central time every tues almost every tuesday sometimes i can't make it and we end up canceling sometimes there'll be 10 people joined sometimes it'll be three so it's kind of like this similar format most time we just talk about if you're doing something with gatsby and you have questions just an open forum to ask people that have maybe a little further along or have different questions and so it's really just a discussion but that's a good place to go if you do have questions like this and sometimes i'll share in there or other drupal developers will share in their things that they're working on so you can see active projects that are either about to launch or just launched so you can see how some of the cool things people are doing with drupal and gatsby cool so all the theming then is done react so the look and feel the css all that stuff it doesn't take anything from drupal templates or anything like that it's just a data dump yep exactly you're just using the you're using drupal as the database exactly so you can use whatever you want there's all these different front-end frameworks you know like maybe you've heard of tailwind or emotion or css and js libraries where you're using like css inside your javascript there's or you can still use just sas if you're familiar with that you just want to use sas like you normally would have one you know global sas file that you load in so there's all kind there's you can basically it's free for you to choose how you want to develop it so you can use front-end frameworks you know bootstrap things like that or you can just style it with sas or however you want it does it makes no assumptions which is kind of cool but also you know flexibility is also daunting too because you have to make choices and then the uh the graphql stuff does that that does an api query and gets all the data and caches it locally or is that real-time querying too that is the one of the biggest concepts that's hard for people to understand it it took me a long time so when you run gatsby develop what it's doing is it's it's sucking in basically the entire uh drupal database now you can hide things from json api if you don't want certain things to get pulled in and it's only you know you can make it authenticated or anonymous like basically whatever data you can see is what it'll pull in but it pulls everything in locally so when you're running gatsby develop all that data is sitting locally you know in that running process so when you make a graphql query it's not going out to drupal anymore it's doing it locally it pulls all the data in right away it sucks it all in and then um it's only querying that local database which is kind of synthetic sitting on your local machine so each time you make a change on the drupal site it has to suck down all the data over again yep and that's where um you know like the live preview the way that live preview works is drupal sends that json data to the gatsby develop process gatsby develop updates its data store and that page sees that there was an update in the data store and just automatically updates the page without loading so that that data can get updated with that live preview and incremental builds works basically the same way on gatsby cloud like it's a running process it sends the data it reads it and then it updates the page live okay so it's kind of like a push then when you do that instead of a poll query okay exactly so drupal pushes the json into so yeah uh hold on i'll just share one more thing i know we're already over time but so if i would look at ngrok it gives me this useful interface here and you can remember i enabled that refresh endpoint so this is the data that it sends to gatsby so it's just sending just json api data for this node article um if i look at the title of this one i don't remember what it was but i think this was a blog post about added the three exclamation points so it sends that specific json data down gatsby process knows the source plug-in that gatsby source drupal plug-in knows how to read that data and it updates the gatsby data locally and for that to work on the gas the end gas does gasping need to actively be running gatsby run develop uh or i guess yeah the gatsby end because that needs to be actively running right in order for for this to work right yep exactly so the other thing that we didn't get to is there's that module that i said i mentioned is called gatsby fast builds so let's say you ran gatsby build or you ran gatsby develop it pulled everything in and then you shut down the process and you made a bunch of changes on drupal you changed a bunch of articles added a few whatever the next time you run gatsby develop or gatsby build um there's basically an entity change log on drupal and there's a time stamp of when you last ran it and it only pulls in what's changed since the last time stamp so let's say you had 10 000 articles it might take a long time to pull all that data in but if you turn on that fast builds module and you enable it on your gatsby site the next time you run it it's going to only sync those things that have changed it's going to keep everything else cached locally that's awesome yeah so that that's how that works and um yeah we didn't get a chance to look at that but it there's i think pretty good documentation in the readme of that module i just had one last question i know we're way over but if you have any resources my i guess my general question is content moderation that's definitely a thing that you know all of our clients love content moderation and stuff how does that fit into this process like live preview seems like it kind of does that if you just publish it always but so yes that is one of the areas that's still in need of some improvement but you can get a basic workflow um if you so you the content previews can work with unpublished content and there was a checkbox on that ui that said only um trigger builds for published which means you could have your gatsby site and if you create an article and it's unpublished it'll be available on that on that preview server and then when you check the publish button and click save it'll actually trigger a live build and it'll go to production so you can have that kind of preview state where you it's not live yet but it's previewable so if the content isn't published yet it's preview but it's it's far from perfect it's the the end goal is to do more integration in with um content moderation so you can specify these content states should be sent to the preview server and this is the content state that should be sent to the live you know production build but um it has it's not there yet and it's probably quite a ways off until it will get there to be honest seems like a complicated thing anyway so yeah makes sense yeah but it's coming at some point it's just um there's some other things on the roadmap that have to be tackled first cool thank you cool and at least one more question but i i don't want to keep people so yeah well i mean anyone can feel free to drop off but i'll stay i got a few i have a few more minutes i have no meetings for the next little bit so i can say for another few minutes if you have a question okay so the uh the service on the gatsby side which takes the uh um the notification of you know content updates and stuff how does that know requests or information is coming from your drupal site and not from some other actor that says just tries to inject their own information in there yep okay so there is that's a good question so it if you set it up on gatsby cloud it gives you a unique preview web hook and a unique um you know build web hook just like any other you know web hook type provider would and you put that in your drupal site there's also a um so one the the url is pretty unique but of course someone could maybe get a hold of that url somehow there's also an option in um your in the gatsby admin page on the drupal site for a secret key and basically you can configure that secret key and then in your gatsby config file you can add that key and as long as those keys match then it knows that the data can be processed so it checks and if the structure the data isn't valid or that key doesn't match it's not going to process the data it'll just ignore it but if those tokens are the same or those keys are the same then it will say okay this is a valid request i'll process that data and then do it over uh https as well so yeah yeah yeah okay cool wow awesome that's it thank you so much appreciate the question for coming in and oh i feel free on drupal slack i'm just poke karate and group of slack so uh feel free if you have any questions or yeah i'm in the gatsby channel most of the time but otherwise you can always dm me as well excellent thank you well uh we'll see you later yeah see everyone thank you bye you

Channel: DrupalCorn

Views: 374

Keywords: drupalcorn, drupal, drupalcamp, gatsby

Id: vz8YFqEild8

Length: 70min 18sec (4218 seconds)

Published: Fri Nov 13 2020