Developer Training: Deploying Agility CMS instance with Gatsby and Netlify hosting.

you want to get started yeah I think we can get started so welcome everyone to this would be what our sort of third webinar in the last little bit around around jam stack we've the last two have been sort of pretty pretty high-level just talking mainly about concepts and that kind of thing and showing a little bit of stuff but today is one that I've been looking forward to for a while and its really taking a deeper dive and really looking at you know actually writing code with gatsby how that works with the agility so certainly this one will be a lot more a developer oriented than some of our other ones but that being said you know there's things that go over your head that's okay you know we'll still attract keep it pretty pretty basic and of course if you have any sort of questions that come up you can post your questions in the chat or just reach out to me directly James and agility CMS comm and I'd be happy to answer any questions you have around this yeah and since we're in a zoom webinar you can actually have already got some stuff in the in the chat you can do a wave your hand thing put up your hand we'll try and keep an eye on those as we go through I don't know if you have two screens there in your we're in different locations James tonight I have two screens open so I'm gonna try and keep an eye on on that stuff but the format of this thing will be mostly James talking and me trying to keep up with him in the code thing so this should be fun some live coding yeah I'm gonna be firing firing bullets at Joel here so I'll probably look after the chat stuff well he can focus on just trying to not make typos and yes that's actually work okay here we go so you know most important thing is that we're all in this together in this sort of learner knee of learning so let's let's learn about each other as well as the technology I think that's important too we really want to hear from the people who attend these webinars we're only we want to hear your feedback in your comments and please ask questions it's okay to interrupt in these things if you're watching this after the fact as a recording in the in YouTube feel free to put some stuff in the comments there and we will monitor those and s you know try to answer questions there as well a little bit about us I'm gonna go first I'm gonna talk about James so James and I are from agility CMS which is a headless CMS company but we really love to teach the world stuff and we think Gatsby is one of the sort of best things to learn right now as a web developer you know especially when you're looking at learning about have the CMS ogod CMS is an amazing product for that of course I'm a little biased but I really have to credit James with sort of bringing the concept of GM stack to this organization and I initially kind of had some pushback until I started looking at products like Gatsby and a few others that are out there now Phi is another one where these are these are great technologies and it's the I think it's the next generation of how to move websites forward I think that's what James is all about here so he runs our product division and does a lot of sort of connecting with other technologies and take and he's basically working on taking our product to the next level so he's he's been in the industry for quite a few years he also does some VR coding on the side which is pretty cool so he has a game out there which I'm gonna plug right now so if you're locked at home and you have a it's the go right the go ahead set yeah it's for oculus go right now yeah the oculus go it's called what's it called James called dodge block dodge block super great game a lot of fun I know he spent quite a few weekends working on it and so go get that game jump into the VR gaming which is really fun well thanks Joe I appreciate the nice little tray over there yeah so I'll introduce you guys to our president joel Vardi i've actually worked with him for a number of years now it's been going on almost eight years soon and he's really been you know my mentor when I started off as he as a young developer so I sort of tip my hat to him for a lot of the things that I've sort of been able to learn and grow over my career so thanks Alonso also some things you may not know about him is that he's a bit of a modern day renaissance man he's a he's a published author father of two kids and and coaches high school football you know when he's not doing all the things at agility so he's a pretty a pretty amazing guy very inspiring it's James and you know since we're all working from home I am kind of in the alcove between my kitchen and my living room and you may see my kids walk through at any moment so that's fun yeah I would get them to say hi if they do okay let's move right along see if I can get the PowerPoint can you keep working so today's jam stack is going to be three different pieces of Technology that we're gonna be working with first one is obviously agility CMS so one of the things when you're building websites you don't need to use a CMS you should be and agility CMS is the fastest CMS out there and an amazing product probably because of two really really big benefits that are different from a lot of other CMS's out there first one is agility includes something called page management you'll see a little bit about that today and I think the biggest point of that benefit from a developer's point of view is you don't have to code all the pages in your sitemap you can let your editors do that you code a page template and some module templates and that code gets reused and your editors can actually work on the sitemap so read all about that the other thing is you can set up really create really cool content relationships which we'll see a little bit of today and have you have really sophisticated content sort of modeling and content definitions and relationships between the content within agility so that's something that works really well the next piece of technology were using is Gatsby I never know whether the right Gatsby or gasps PJs but it's Gatsby dot Gatsby jsg org is the sort of Technology website where all this stuff sits and we're also going to be looking at gasps PJs calm which is their cloud offering it's just really amazing product probably I think it's what was it James one of the most exciting new products of 2020 rather than one of the technologies that you need yeah I know there's been there's been a few studies done in terms of like technologies that a lot of people are looking to learn and it's it's it's up there as one of the I think number one and it's their github project the open source Gatsby project is one of the most popular most contributed to open source projects in the world right now so pretty great stuff the other technology we're going to be working with is something called meta file now the fie is a new kind of website and application hosting which includes you know some there's some compute there's some build aspects of it is a great API to work with it and it also has a CDN I think they call it an application to hosting networker application develop delivery network something like that it's just a great service to deploy to and you'll see a little bit about those benefits as we work through it anything to add on these gems yeah I think we got one thing wrong it's we're actually not learning what gatsby jeaious we're learning about gatsby the book yeah sorry if there's any confusion there yes Jay Gatsby yeah they degrade the great gatsby actually great gatsby and a different time okay so let's dig into a little bit what the agenda is today so the idea is James is gonna teach me how to do web development with these three technologies and will you just take us through the agenda James yeah so now first thing we're gonna do is we're gonna start off from scratch here right where I'm gonna walk you through you know signing up for a new agility CMS instance we're gonna grab the code that we're using for our sort of before they play Gatsby start a site which already has some stuff in there so we can look and see how that is already put together and then we'll sort of you know spend some time talking about Gatsby and specifically how our Gatsby plugged in that is that agility has made works with agility so we're gonna run gatsby locally we're gonna talk a little bit about graph QL we're also going to make some changes to that project so we're gonna do a couple of things where we're going to sort add some new functionality in a couple different areas make some changes really sort of make it our own in some sort of way and and then we'll sort of wrap it up by actually deploying those to actual public environments that people can actually use so you know I want to show you how we how you can get previews up really easily so that you know editors when you're in the CMS can change and you'll see that content changed in real-time without requiring a full rebuild and as well as actually is having our correction sites and also just mapping those back and agility so we sort of have this sort of perfect best practice setup for how Jilly works with Gatsby and how that is deployed to the world yeah sounds exciting yeah we're gonna yeah so and and and you know pizzas been provided for everyone all you to do is go to your kitchen find some pizza and go eat it that was not funny okay moving on let's get started so what do I do here yeah so you're ready on the website so you're like one and twenty fifth of the way there so you want to go and just create that traffic-free button sign up for a brand new instance our free tiers are sort of free forever so you can keep this one playing with it as much as you'd like yeah you want to sign up there yeah you're always capitalized you know first name oh that's okay we're gonna be alright okay company let's go set a password that's his password ever passwords must match damn it yep alright next step all right cool that was very simple oh yeah give yourself a project name what you want a name let's just call this web within our hands-on okay cuz you know developers write things backwards okay here we go and submit yeah yeah I swear make sure you got the blog template selected there yeah perfect cool yeah just go ahead and hit submit so that should spin up a quick little instance for you so I just I just created an agility count you did yeah I'm just gonna gently counter and right now this is actually just provisioning a blog instance for you okay and it's gonna take me right into we're not wait for it wait for it work come on so so what is this alright cool so what you see here is you are logged into a JMS this is the place where all of our sort of content lives and this is the place where your editors will be managing content and this is also a place where you can get and access your API credentials which we're gonna need momentarily to be able to set up in our website so we can actually authenticate with agility and be able to you know access all the content that's within there so you know let's actually just take a quick little breeze over some of the areas in the CMS just quickly just for those who may not be familiar so before we dive into code here on the left-hand panel I want you to just click on the pages section yeah so what we're looking at here is this is the area and agility where you know we have page management and as you're a sort of mentioned that is something that is a little bit different with us compared to our competitors and something we should feel very strongly about is that editors should have in the full control over the sitemap what pages exist in waters on each page whereas a lot of other have those CMS's out there and don't really believe in the concept the page management sort of put that onus on the developer which means the developer is such as to manage the sitemap and anytime they want new pages created or redirects or whatever the developer has to do those changes themselves so we're trying to say that's not the best practice a way of doing things and as you said sort of move to a paradigm where developers are just building tools and the editors use those tools to be able to compose their pages together so there's pages there I also just want to flip over to shared content which is another area that will be touching briefly so this is a scenario where we have content that is not specific to a page so content that may be shared across multiple pages or different apps or things that aren't even necessarily web sites at all so here we have a couple of examples of items ready we have a list of blog posts which we're going to be taking a closer look at so if you'll see here you'll notice there's a couple blog posts that are already sort of initialized for us so we can get an idea you know what that looks like and then there's also another shake continent for a global header which has a few properties that are specific to our header that we actually have in our website so really basic site just a few things in there you want to just go ahead and click on post and let's just take a quick look at what a blog post actually looks like sure so this is the list of all the posts and if I click on one I get to see an individual one yeah you see the one you see the actual post and this is a pretty basic post definition there just a title there's image that represents the post and there's just a body of text using your rich text area so nothing too crazy here and you know what's great about a Phillies mess is you can define any types of fields you want in your input forms so you know we're actually going through this process a little bit later to actually add some more fields to this but for now I just wanted to sort of show that you know this is what a blog post looks like there it goes in here this is what powers all of that content all right now let's actually try to connect this content to a website because right now this is just content sitting in the cloud there's no website associated with there's no code connected to it nothing so go back to that sort of first page you were on the getting started page it's the top icon in the left corner yep okay now scroll down there you can see we've got a few different sort of quick quick hitting tutorials for some of our more popular frameworks that were that we're recommending and building integrations for us so we have Gatsby next yes next and just vanilla Joe yes I would see today we're talking about Gatsby so let's hone in on the Gatsby stuff so we're gonna go ahead and get the code and actually be able to run this locally and see what that looks like so I'm going to assume that you have node installed on your Mac is that right I do that's good because otherwise that would have just wasted a bunch of time so I have node installed and actually ran this command earlier so I have the Gatsby - CLI okay so you haven't see that the Gatsby cui also installed so if you didn't have it you'd run that command with NPM which would actually install the Gatsby see like globally so then you'd be able to use Gatsby commands in your CLI no matter what directory you're in but since your do you have that great why don't you just copy that code that you see there right and you create a new gatsby starter site and so this command is gatsby new you'll see there there's if the the format of that is gatsby new and then like the name of the folder that you want to put that into so I might recommend that maybe you just changed the name there okay god I'm gonna jump into a folder can I do out like a make do I need to do a make door or no it was gonna make me it's gonna make a phone it's gonna it's gonna make a dig directory base in that folder so you know why don't you call it you know webinar Gatsby or something like that yeah webinar awesome Gatsby it cool sure that sounds good I click enter yep go ahead hit enter so what this is gonna do is this is actually going to pull the source code from our starter site and it's gonna put it in the directory if your that you specify here so you're gonna have a directory here afterwards called webinar awesome Gatsby which is gonna have all of your code you know what while this is running because this might take like you know up to a minute or something like that because it's downloading code it's also running npm install to get all the dependencies while this is running why don't you open up a browser there and go to your github repository we're going to initialize the repository where we're gonna connect this to so that you've got your own place to submit your own changes and also that all the changes we do today you can commit to your own github repository okay yeah so I do have a github account so people need to create a github account if they don't have one yeah yeah if you don't have one if you go into this process take the time to create a github account if you already have one go ahead and just hit that plus icon in the top right and new repository yep and yet so this is being created in your profile you can name this whatever you'd like yeah maybe keep it the same name just for good consistency I don't know what I called it I forget already as that it's not cuz I'm old it maybe unabashedly no okay so I can also do a public or private it used to be you have to pay for private but private is free now because get I've just got more awesome man thank you Microsoft then I just going to make it public because I don't care and I'm gonna go cream problem paused right yeah yeah and and leave it blank yet so you're creating a bike repository and then you'll actually see here that there's a you see the code that says push an existing repository from the command line yep just copy that to your clipboard cuz we're gonna execute those commands of course this also assumes that you have git installed globally as well which I'm pretty sure you do I do but ya know note to self if you get an error here you might need to take a time to install it get locally okay so I go back to my terminal window yeah and it's entering you know just as a comment I started writing code back in the 90s in terminal windows and then I went to you know a bunch of other things like eclipse in Visual Studio where we didn't run things in terminal windows nearly as much and now we're back to running things in terminal windows again with CL eyes and stuff but I actually love it because it means that once you learn this stuff actually writing your DevOps routines gets a lot easier because you're just using the same CLI routines that you use to build everything so that's kind of cool it's just an old guys perspective yeah well actually and to touch on that on that point gooeys have gotten so complicated over the years like take a look at Photoshop how many dropdowns and buttons and you don't even know where the heck anything is so I use the Photoshop CLI that's probably is a thing actually that one's probably done it alright cool so now you're in your you're in your folder here so we're gonna go ahead and actually just paste those that those commands and that you want to run so we're gonna add a remote what were it's simply telling your project is hey connect this to this repository you just created and it's pushing all that up there great this now refresh that you actually should see all of the code that was just yeah perfect all your codes in there so your censored stuff a copy of what was already there the story I say in your own github so you're off to the races now at this point you want to take you want to actually open this up in actually you don't have to do this yet but why don't you just run gatsby develop this we'll start running the site and we can see what it's like and then after that we'll open up a code editor so we can actually you know inspect the code that's run cool so gatsby develop is the command that you run in Gatsby to run your site locally keep that in mind you don't run that on a production web server oh right we forgot a step here so if you scroll up you'll actually see that there is some some errors that errors that occurred in the read so if we actually eater this is all bad yeah so if you look at the air messages you must provide a good so what we forgot to do here what what I forgot to do was tell you to configure a couple API credentials from agility so what just happened is we tried to run the site but we're hitting the agility API with authenticated requests so go back into agility and if you scroll up there there is a button that says API keys there you go and so you can see there's a there's a gooood there which is good to make note of but in order to we're gonna actually place these in an environment file that is only local to your machine so we're not sharing this when you actually deploy this or I sorry when you when you check this into github your credentials don't get publicly story and github just never a good thing open up vs code to the folder where you created this project and we're gonna modify a file here you also should have a visual studio code you don't need to use visual studio code but it's a great editor that's really really simple and fast to get all this stuff done so I'm gonna go ahead and open that folder if I was on Windows there's a way to quickly open it from there but how much yeah I think you can do it Mac - but what Joel is talking about is if you're on the command line and you just want you're already in the folder that you're working on you like I just want to open this up in vs code if you just type in code space period hit enter it'll open up yes code in that folder I know it works out of the box and windows but I think you might need to do some weird thing on Mac to get that to work but yeah so anyways you're in the Prados no she's good this is what you were talking about for my end my environment yeah so in the root there you'll see that there is two example files of environments and so these are here as a guide but the first thing you want to do is you want to create your local environment so you're going to rename that to just dot u and V dot development and so these are the end where I'm gonna be able to that will get used when you run your site usually Gatsby developed so when you're running a locally these are the credentials that's going to use what we didn't typically recommend here is that you you're gonna want to paste your agility good in there so you can go ahead and copy that paste that directly in there the next thing you're going to want to enter is the agility API key when you're running that locally you're gonna want to use the preview key that's our recommendation so that way you can make changes in the CMS without publishing it and see it in your development environment I'm gonna put the preview key into my development correct yeah and you'll notice there is another environment very well that there says that Jill the API is preview so if you decide you didn't want to use the preview key and you wanted to use the live key you could set that to false but we'll leave that at true frame and then go back to production and let's just double check that you've got yet go ahead copy that's that live API key paste this is how this is how the code that's in this thing is going to actually be authenticated and talk to the agility back-end yes that's correct yes our source plugin actually does that for you you don't really need to work with it too much you're just going to make sure you put these keys in the right place so now that you've got those saved go back to your your command line and rerun that command again and it should complete without error this time well I'm seeing some green there's no red it's all green so what's doing Gatsby is doing what here yeah great questions so and actually if you scroll up with I can sort of walk you through what's happening here so if you're looking at that console there you'll see that there's a few things that sort of happen internally in gatsby to sort of start the project up but there's then stuff that agility does agility uses our sink API to actually pull down all of the content from the CMS and it'll only only pull down what has changed in your file system which is pretty cool so it's super fast the first time you run it if you're really large type may take a bit of time but the next time you run it it'll be incremental from there and and then it sort of goes through pulls all the content puts that into graph QL which we'll look at shortly and then also goes and creates sort of pages for all of your pages that you have initially so our plugin does a lot of work for you it gets all your content and generates all of your pages which pretty much leaves you as the developer to just focus on building react components that are going to be used that are being used on those pages so we call those modules and we'll we'll talk about that briefly so let me scroll down there you should see that that this site is running and it should give you a URL there yet localhost key thousand should be running to say locally awesome cool so we got this a running locally that's a good start the the other thing the thing I want to show you is sort of where all the content is an agility obviously it's already in there on the page but what Gatsby does is Gatsby has like a local data store that you can query and that's you query that using graph QL and what's cool is that you can actually inspect through the browser kind of what's in your data store so if you actually just change that URL from the localhost 8002 underscore underscore underscore these three underscores of 2x its 303 underscore is graph QL it actually gives it to you in the console as well cool actually there's a great good question here from John John Dory oh court I'm saying since the plug-in is downloading pages from Julie every time you exit guess we develop is that mean that we need to rerun that command every time a page has changed or been removed great question I was actually gonna showcase that but the answer is a you do when you run gasps we developed that's the time when it goes and resources all of the content so you need to rerun that anytime content has changed now that's just your local environment though your preview environment can actually set up a connection with agility which I'll actually try to get to today as well where it'll actually send a message to your preview an event when you change Connor and Julie didn't automatically resource the notes for you and because we don't have to download everything all the time we only down to what's change it's super fast so you can see changes happen in your preview environment in excess in like less than five seconds yeah all right so what we're looking at here is our graph QL so here's all the all of the data that we sort of have available into our project which is pretty cool I won't go through necessarily everything here but the points I just want to make is that all everything you have in shared content gets created in here based on that definition it's on so you'll see here we should have a post so all agility post there's also all agility global header which is that other I think we hadn't shared content and then we also create lists based on your modules as well so if you need to query data in a specific module you can go ahead and do that as well so you know what's kind of cool is that you know if you were creating a page and you need to query post or something like that in your code you can just start selecting some of the fields that you need here and then go ahead and hit the play button to actually see all of that content there and so it's really easy to be able to inspect what data you already have in your local graph QL store is pretty cool but enough for the graph QL stuff there's a little bit more to it than that so let's go back to visual studio now there's DVS code I should say this is not Visual Studio one of the things I want to show you is the gatsby config so if you look at that gatsby - config JS file I just want to highlight this is the file where this gatsby site is being configured with the agility source plugin along with other plugins you might have for your Gatsby site so you'll see up there that we have some code that is accessing those variables that we have it in in our environment file securely and then further down you'll see here we actually register a couple different plugins here there's like there's a gassy plug-in net low fire there's a gassy plug and react helmet which is you just use for some SEO stuff but then there's also this one here which has quite a few properties and that's our that's our plugin that's the agility gatsby source agility CMS plugin and here's where we sort of past end up passing through our GUI or API key whether we're in preview mode or not and then as well as the languages that we want to source so you may have multiple languages and maybe you only want to grab data for one language for example channels is essentially the the digital channel and agility that you want to grab content from agility has the concept of you you know you don't have to only have one group one sitemap tree you can have multiple sitemap trees for different websites in one instance so this would allow you to be like hey I just want to generate stuff for this website not the other websites and then there's that master page template there and that and that isn't what that's doing is that's instructing our plugin when we generate pages to say hey when you generate pages execute this react component so we actually have an agility page j/s in our source code so if we take a look at that let's see what that looks like open up source and click on agility page yes and so here is sort of like our master page right this is where all of the pages that live in agility where these this is the code the sort of master page file that gets used for all of those so good to know here and you don't really need to change much in here but this is sort of the entry but if you're looking for the entry point of this application essentially frigidly pages this is it so it's pretty cool too you can see that this itself is just itself a react component but I can tell just by looking at it there's this SEO thing that's what we're setting like the header and then there's this preview bar thing here that's kind of cool yes so we had done a little bit of work here to sort of you know add a preview bar components that we can your NPV each just has a little preview thing that shows in the top corner just to let you know that you you're not viewing your production site well and then I see this thing called agility page template that's pretty neat so it looks like to me what's happening is that that the plug-in says render this agility page component and the page component itself takes in it figures out what's all the data in that page and then it sends it into a page template component and then what happens yeah so it'll actually serve you you see there's a line of code this is it says agility utility bill paid view model what that's doing is that's just making it's just sort of building up all of the data that we want until we could sort of pass that to the rest of the page so the next thing you want to look at here is that agility page template component if you don't know where that's coming from if you actually just scroll up you can see the where the import statement is so if you scroll up there you'll see there's agility page template so that's being pulled from a folder under stores kind of agility components so if you take a look at that one there agility components Julie page template yeah you'll see here that this is this is doing work to figure out which agility page template to use for your page because Jilly has a concept of pages where you can have a page that is based on the single column template at to comb template or any kind of columns that you didn't you gotta want we call them content so it's areas where editors can add content so think of this as like an inner page template as opposed to the agility page template which is the sort of the master page template this is like the inner page template so for this say in particular we're only using one template which is called a one column template so all of this is doing is it's just automatically building up a dependency for it's like oh this page uses that one column page template and so we're gonna actually pull in that react component which we've actually defined in our folder there called page templates so if you expand your I don't actually have to edit this normally like I don't know you don't you don't you don't really have to do anything in here but I just wanted to sort of explain how this is working open up page templates I click on one column template so this is what a page template file would look like that you may have defined in agility and then here we have a concept of content zones and this is really taken directly from our you know our asp.net integration where we have this exact same concept of content zones and page templates in here so all I did all I had to do when I created this page template if I create a new one was just yet drop in a Content zone thing and changed the name attribute to whatever the name of that yeah to the reference name of that page template that you created in agility so yeah that's a pretty deep deep deep level dive you don't really need to have understood anything of what I've just said there but it is useful for people that want to take it deep down and say okay how's this actually work but a lot of the stuff is just abstracted away from you once it's there you really don't need to worry about it but you can always dig into it if you're curious about it so let's close that up and you know now at this point lets you have this a running right already it's yeah it's in development mode let's show how you know how easy it is to actually make changes in just like CSS and code and see that happen in real time you know this is one of the things that I really like about modern JavaScript development is just how fast that is easiest to work with so you know why don't we do a couple small changes here like why don't we change your background color from white to like a like a dark grey or something like that just some simple stuff so for that I you're gonna want to open up the components folder and there should be layout template dot CSS and there should be a color here that we can I thought we can change to the background now I don't know exactly where it is I just maybe I'll just search for background color yeah sure looks like that's one no I it's the - - primary so scroll up just real brief - primary so oh I think so I think that was a background of a button I don't know if we have that thing on body I could probably just do this on body line I'd normally is one why don't I just change it to check background color what should I use something bold something bold round there we go it's bull and say it's like ketchup that's awesome so I change it down here I just edit this this file and it just boom it pops over on the side that's why I set up that side-by-side view so that's really cool yeah yeah something to do with with agility there but it's it's more just the hot module reloading of react item is kind of cool there so I set it to the color that I normally choose by accident as opposed to white I choose wheat wheat okay yeah let's go change you change the background color to a wheat thang so that's pretty cool and then back to John John Durr chords question is like you know what happens when you change content so let's just quickly see what happens here so go into agility and why don't you change some of the text that's on the homepage there so click go to pages and go to your home page by the way zoom has my processor at 200% right now so that's open so right now you just opened up Jumbotron which is that circle at the top which which explains that that which has that header and we're going to change that text so right now it says react SP a blog template why don't we change that to be what it actually is and this is this is a Gatsby template it's not a react spot template we're playing with the big boys now boom all right and so I'll use this emoji more here we go so go ahead and hit save on that okay wow that's really great I just saw like 10 of your curses in that video that's really good alright so now that you've made that change if you go back into your localhost you just refresh the page let's let's let's see what happens okay nothing it's the exactly it's the same thing so this is so this is one thing just and the reason why this happens is because Gatsby sources all of its content at Build time not during runtime so we've already built this site which means we can get new content again unless we rebuild it where we resource the nodes so in your local environment you want to refresh the content just stop the site and then hit that controls that or whatever and then just run gasps we develop again and you'll see here that when this is running because we've already ran this before you'll see here that it's saying content sync return to one item that's sorry that happened really quickly there but in the console agha says content sync returned when I didn't that means our system knows hey only one thing has changed here so we're just getting that one thing that has changed so it's pretty fast to rebuild here um my browser will automatically yeah it's even smart like that so you don't have to refresh afterwards you just got to rebuild the notes so pretty cool I don't get a happy like that very often that's really cool nice there there is also something else you could do which is like this is a little more advanced now but there actually is a web hook that's actually exposed in Gatsby that you can actually just send a post request to it'll just resource the notes again but let's leave that for another time okay no no we're not you never know so cool we made some changes here so we've made some CSS changes we've made some content changes now let's go ahead and actually make some like you know functional changes and how this actually works so you see that that that post listing that's on the website there you want to flip back the website for a second and just scroll down so you see that post listing you know here's where we have it's just listing a couple posts pretty basic and we also had looked at our post model in agility and it was pretty basic we just have like a title description and like an image which isn't all that useful to us so why don't we add um something that makes it a little bit more of a rounded sample which would be like an author so we're gonna add the concept of an author to a post and then we'll see how that works in in Gatsby to be able to sort of pull that associated data so the first thing we're going to do is we're going to flip back to agility here and we need to make a change to our content models so we're gonna go into settings and you're gonna click on content definitions and what we're gonna do here is we're gonna create an author definition so go ahead and click new and under title up there just give it the name author and then click on the form builder tab and click new and why don't you give your author a name field and that'll be text so you can go ahead and hit save and new and why don't we also give it a image field as well so you can call it image if you'd like or picture or whatever photo sure under field type there select image that's the image type that we're using there and you can leave everything else default values so go ahead and hit save and close on that so our author now has name it has a photo go ahead hit save and close so now we have that new definition cool now we need to actually relate a post to an author so because right now they're just sort of two different definitions so but before we go ahead and do that we're going to initialize a list of authors and we'll create a couple authors and then just so we have the data so what I did there is actually created I created a definition of an author but I didn't actually create an office list yet no no and because the idea there is you could have multiple lists based on the same definition so we just created the definition now we're gonna create an instance of that list based on the definition so go ahead hit the plus icon in there so I went to shared content and went into here I created a new content list yeah and I'm gonna hit the drop down my computer just froze up on me well this is awesome okay here we go no there we go so under under definition there you don't want select author and under the display name there why don't you name it authors lik with an S because it's plural yeah go ahead hit save and once you go ahead and create you know at least one author there why don't you why don't you create yourself I always type it with it capital oh that's funny can I upload a photo of myself sure okay I'm doing that right now I actually have headshots that I had taken that I'm very proud of there you go look at oh look at how businesslike and professional I look there we go Thanks alright so go ahead and hit save and close once you're done with your alt text there okay sorry I had too much fun doing that here we go ho the internet just got super slow on me I hope you guys can still see this okay it looks actually fine for from from our standpoint okay now what we're gonna do is we're gonna relate posts to this authors list so go to settings okay and click on content definitions okay and click on post and click on the form builder tab and add a new item here so what we're gonna do is because we're creating a linked a link to a link to an author sorry there's got garbage truck outside my place which is now suddenly very noisy and distracting me so because we're gonna create a link a field here we need a field to store the ID now this is actually an update that we're gonna be doing to the section so you don't have to do this step but so this is a little verbose right now and I know that but we're actually making update so this will be abstracted away from you in the future so right now what we're doing is we're just specifying a field that is gonna store the idea of our author and we're just gonna save and close this item I also checked off hide field from input form because it's a hidden field right right which is good call people don't need to see the field so it's just there it'll be hidden so cool perfect now under the field label here it waxine acquit the property of of our actual relation field so just call that author and under field type there we want to select link content which is a special type of field type which has a few more options here so under content definition I want you to click and select author and then we want to point it to the authors list that we've already created so change the content view to shared content and then under shared content select authors because that's the list that we want to point it to and then under render as we want to render this as a drop-down list so that our editor can actually select from a drop-down list of our list of editor of authors they want to link to that blog post are you sure we couldn't put more dropdowns on this on this screen there will be 85% less dropped it less less field in an incoming update so I'm looking forward to that probably has been hard at work on that so under seat value to field make sure you set that to author ID which you've done so you can go ahead and hit save and close on this now so I just created a link from my post definition to the author content list cool yes and let's just double check that this works so another good way to test this is let's go to your shared content there and let's associate both of those existing blog post to you as an author I wrote them both especially the lorem ipsum dollar thing okay here we go so down I probably can't rearrange those fields but here we go I'll just select myself yep go save well it's saving it and then I'm gonna jump to the new one the other one and I'm gonna save that one too [Music] there you go save them both done cool all right so now at this point we've added some added some more data to our thing we've got the author's stuff all linked up so real good now let's see how this data can be refreshed in our project so you know what do we do when we change content in agility how do we access that in and Gatsby we also just have a go we also just had a question - can we source existing content from WordPress or any other CMS site and the answer to that is yes you can use as many sources in a Gatsby site as you want so if you wanted to have you know stuff coming from like Twitter and your local database some other database that you have and can be from some other web service and from WordPress and whatever CMS you can bring all kinds of data in there who's who's teaching this thing hey but that is actually one of the really big advantages of Gatsby is that it's so easy to be able to source content from anywhere not just agility but other data sources so even like custom databases and things like that so pretty cool yeah so now that we've updated content and agility how do we get that to reflect in our project what do we do Joel uh so do we now have - I'm gonna close I'm in back in my terminal window I'm gonna rerun gatsby develop correct yeah yeah you got that so we're gonna rerun that cool so I can see it's pulling content changes from agility there we go and also that normally this is a lot faster isn't it oh you know what it downloaded the photo because you you added the gym at the images thing yeah sorry cool yeah so now these are all all done now we actually have more data we can look at in our code isn't using it yet but do you still have that that graph QL window opens Inca dude I think I do yeah I think I see it there yeah so if you just refresh this page one of the things you'll see here on on your post if you scroll down a little bit scroll down [Music] oh great we didn't do that thing I should be list so you'll see you have an idea and I see this guy you see you have this new there's new fields there so there's these new offer field no we can now take advantage of but when we select it you know what are the properties say we only have the Content ID of the author that we want so we don't actually have the author object that we need so one of the easiest ways to resolve this automatically for us is to just tell gatsby a little bit more about our content relationships so if you go back into Gatsby I'm gonna show you how you can do that so in Gatsby - config sorry Gatsby - node I should say there's this area here called create resolvers so what this means is this is a place where we can tell gatsby to transform the properties that are starting to graph to a little bit and so that we can actually add a property called like for our for our author that can actually go and grab that property now we've actually pre-written this just so that we didn't have to determine the type of dope but if you just uncomment that line there yes so what this line is doing is that we're saying hey we're gonna create a new property in the graph that represents this post and it's and whenever we call that in our graph QL it's gonna go and actually grab the associate author and all the information we actually want for that well so now that you've added that line there and you can see there's a helper method that we're using in Chile declan content item we're telling it the type which is the Jilly author we're also telling it to go and and use the existing author name to resolve that Content ID so pretty easy to be able to add the stuff go ahead hit save and I'm gonna want you to stop the development and start it again that's the one that gets me a lot of the times I remember doing this in a different time and I keep forgetting to do Gatsby develop again I just in yulie refresh this window hoping it'll change in it it doesn't change so now guys yeah there is the resolvers are called when things are a source so yeah you do may change that you do need to rebuild it cool so now if you scroll down the our post our post there scroll down you'll see that there's a prop computer computer froze up again I'm back under a link content just so select that and so now you can select click on custom fields under there this is by the way custom fields is where all of the agility fields are stored just so you know all of your fields anyways so yeah now he was like the name hit hit hit execute so here we've essentially built a query to query all of our posts and then also get to really add author for us cool yeah there's gotta be a question from from Nick ham Gatsby needs a way to serve a project rebuilt automatically upon changes three incremental builds huh flow with it so yeah Nick there's actually a way to do it that I've seen I haven't I spent a lot of time in it yet but there actually is a way to set up essentially a web hook that hits your local machine so when you make changes in the CMS it could like automatic it'll actually automatically refresh your dev environment it's a little outside the context of this discussion but something worth checking out I'll see if I can write a post about that in the future and share it so yeah now we have this information that's now available to us why don't we go into our post listing that we have already in agility so if they're not not not an agility in your in your code and so if you expand the modules folder you'll see that there is a post listing is open that up and so this is our existing query that we're using to populate our lists of posts and so this what you see here is what's called a static query in Gatsby so we're saying hey hey Gatsby when you're rendering this which happens at Build time and is also rehydrated on the front-end it'll actually run this query and then that data that is returned from the core is available to your sort of front-end component so this is like your data access method and your yeah and then if you scroll down a little bit further you'll you'll see that where we're taking that data and we're rendering the post listing react component it's interesting because I see this item here so agility when you talk to it before at the the agility page component actually sends each module this item which is like what's that yeah so by default when you create a module in agility module typically has properties the jumbotron was one example one of the texts that you had changed on the homepage from react SP a template to thinking all they're like webinar hard-hard or whatever you know you changed content on a field that's within a a module in agility and by default we actually just pass in all of that data as properties so if you have a basic module which doesn't need to access like a big list of contents or anything like that or have to do anything complex you actually don't have to use graphical at all we'll just pass you the field properties directly as they are in agility as a parameter and those are all accessible in the item property that you see there this is a bit of a different case because we're not just you know because the content we're showing in this module is is not specific to page we're getting a list of things and we're and we're and we're showing those so this content doesn't live on the module it's actually in shared content so we're using that data instead of data that's directly on the module itself so how do we get the author information into into this module yeah so one of the changes we're gonna make here is if you just add a right to the end of there just add a comma as faction don't use a comment that's my mistake just put in the name linked linked content I'm just underscore Julie the author I think just to double-check what it is in graphic you oh yeah oh you're you have it there you pasted it perfect so you'll want to get rid of the quotations there yeah well you know what I copied the wrong thing so I should have copied this yeah copy that yeah here we go so if I just paste that in there does that work yep yeah that'll work so in that now that'll include that data as part of your data and so one of the things you'll want to do there is just scroll down you and just find an area where you actually want to output that author name now so if you're on a post listing there is an area here there's that there should be a book there there's a post component did you see that yeah so you could just add two to there somewhere in there maybe add like a yeah div that just outputs the author name so here you could do post dot links Julie author dot custom fields dot name and go ahead and hit save and here's a case where you don't need to rerun gatsby develop when you change graph QL queries or your markup you don't need to rerun your site so we should actually see your name already show up here which we did holy smokes that's so cool it already refreshed my browser and it can I can see that it's already got that there that is mind-blowing yeah so when you yeah which is which is pretty cool so when you change your queries it's all just instance you don't have to rebuild anything makes it really quick yeah so understand you have a time check right now it's it's it's it's one o'clock I'd like to quickly just show what it what it's like to create a new module from scratch so let's just do a really basic one and then we'll try to wrap it up by deploying this to a preview environment seeing how that works so along with me gonna create a new module what should we call it yeah why don't we call it let's love featured posts so here going to create a new module where well we're gonna be able to select one or two more to post to like feature in a certain area so you're gonna give it a title there you also want to give it to post IDs and hide that field and then just yeah and then create a linked content field for posts in general set that to link content under content definitions select post under content view select shared content under shared content select the post day that we want to do and and now select search list box because we want to allow people to select one or many posts that they may want to feature here and under a default sort column you can set that under save value to feel just set that to post IDs and go ahead and hit save and close and save them close so we have this new module and now I just need to go in and add it to a page yeah now why don't you go ahead and just add it to actually why don't you create a new page and and you can add that module to that so we'll create a new page in agility and call features cool all right so I'm clicking there oh I don't know how on a Mac you bet my I had my Activity Monitor going over to this the thing my CPU was at 400% now it's awesome okay doing too much so I mean I click add that module sorry I'm jumping out of you because I'm because of time so I think add a module and I choose featured posts cool and when that module loads you probably want to give that a title just called like featured posts and then under posts in that link content field just if you just type in like what were the names of the posts I'm gonna click on edit again so this lux you show me so if I just type in sis how yeah there you go so I have two featured posts I could actually create a new post from here too so this is really good but yeah let's just let's just put those those two hit save on there cool so now that you know this stuff exists in agility go back into your command prompt there and again we have to rerun the site because we need to pull down this this new content that was just created so go ahead and do that yep so you can see the page sink on a new item the contents ain't got a new item awesome yeah so now do I have to code up a new module yep so under under that modules folder there you're gonna create a brand new module there and you're gonna want to name it the same name as your reference name that you named your module so I think you had named your your module featured posts so as long as you name that the same thing I cheated by copying another one is that okay yes the worst thing a programmer can ever do is what I do it all the time yeah just change those constants to featured posts yep with your post and here what's what's gonna be cool about this is that we don't use it we don't need to use graphical in this case because we're actually our system is smart enough to resolve these fields automatically for you so you don't need to because all the data we have is sort of in here we can access that so I'm gonna do a cheap thing and I'm gonna show somebody some a cheap thing Nov you hate it when I do this but I love it oh you're getting console.log the props you can do that yeah yeah so first of all the features just showing up on my global header that's awesome yeah and that's cool because our global header code is just smart enough to loop through the sitemap in agility and so if there's a page in there just automatically adds it into the header which is pretty cool so that's always been a feature of agility to be able to go through and sort of go through all of the sitemaps and so here now draw you're on your page that has features you've copied our jumbotron modules so we're just have some basic output here under that console.log that you did do you can actually see all of the data that we get back and we have available already in the module so you know if there was data that we needed to get in this module that is outside of what is stored on the module itself and that's when we'd actually use a static choreographed you oh do we go get the other stuff we need but in this case we can actually just access these properties directly in code and just output them as we need to do so pretty cool of how you can create your functionality here without even having to learn graphic you all for it basic modules so you know here you're gonna want to just iterate through your list of featured posts that you have there and then just like render out a title or something like that really shouldn't just go ahead of time oh I'll proof check it for you you've got let post item post Matt I'll figure if I do this item here fields I think I called it title right yep okay and I'm gonna now I have that list of posts and you can just render that yeah in your in your return method there yeah so if I do if I have like a list if I do hear my react isn't great but I think that should work right so what you could actually do is if you uppercase posts like in the in the end up top in the actual variable they're uppercase it to posts yeah yeah you can just use it as a standard react component so in there instead of doing the curly brackets you could just go to town posts yes yeah didn't know that okay oh I hate to even like Flipboard in my browser but is it gonna work oh I made a I did a boo-boo what happened expected a thing component took the render method I didn't like what what didn't like what you did maybe try maybe drag going back to it you did yeah try that I might have not formatted this properly as a post to work there let's try this again okay here we go no there we go yeah there we go featured posts I took away that class and we have an over the list here Thanks so that's that's how we recently created a new module brilliant yeah we're creating a new module access the properties so if you're creating like a basic module that doesn't need to access a bunch of other data it's really simple so you get going here you don't have to worry about looking anything up in agility or even how to access the stuff and agility or anything like that it's just automatically passed to us properties which we think is a great way to be able to code fast because really when you're building a site with agility and Gatsby you're just building modules that editors can just add to any other to any page and everything just kind of works so less dependency and use the developer and empowering the editors more yeah what and I love this part of it a man just just want to show you real quick like I love just being able to do stuff in here move things around change things a bit and then it's like it all just works you know and I can even use my field set and legend thing that no one ever uses because I'm really old I love it and as I stuff in here story I really shouldn't hijack your thing here but this like it's so great that you can do this kind of stuff and just and you just see it automatically that's just from a developer's point of view it just makes jams tax-loss yeah all right so I know we have a couple questions I will get I will get to the questions but I just want us to wrap up our session here a little bit so now we have some some some changes at this point we've done some basic stuff let's actually deploy this somewhere and also set it up an until you step editors can start previewing and actually working on this site so go ahead and commit your changes to your to your github commit and sync so now you're pushing those changes back up to your github cool the next thing you want to do is let's use gatsby cloud for this this is a perfect way to get this stuff set up quick and easy and then we can actually also put an integration to nullify in there and deploy our production site so let's do that so next go to gatsby jess calm and login you're going to use your github account that you should already have and you're gonna create a brand new site here so under yours yeah go ahead and just say I already have and it gatsby site and now here you're gonna want to put the gatsby project that you have which is he webinar awesome Gatsby so select that hit next you can skip the step Oh actually yeah this one yeah skip that step and scroll down here so here we are prompting you for the same values now we're gonna type in these values again you can just go grab these from your at local inv file you have again the reason why we're doing this is because we're not including those those that data in our github repository so we need to tell our hosting environment about yeah because these are like how I access this data which we would like to keep that secure in this case right so yeah that's cool so go ahead hit save and scroll down there keep going down or you want to enter these are the build environments so this is your production keys your one here yeah all right do these real quick copy and paste I could have got these from agility from the getting started page as well right yeah go ahead hit save create site done so this is free as well right so I mean I I don't I don't have to pay anything to to get an internet account don't do pay anything to get this Gatsby thing to try all this stuff in which is cool too brilliant yeah now it's actually doing what so now it is actually running your build so what you normally would do locally when you're an in Gaskell it's kind of doing this in the cloud for you and it should be pretty quick hopefully but you can see what it's doing installing project dependencies the first build takes a little bit longer and the the builds are cached they use a lot of cache data after that now one of the things that I think you were starting to talk about was and I jumped ahead before you could do something I'm gonna jump to site settings because it gives me a web hook URL yes do we want to do one hook that up well we're web hook you yeah what web hooks are critical for sort of instructing gatsby cloud when to refresh your preview environment and when to rebuild your production environment so you see that preview web hook there copy that and then I want you to go into agility because we're gonna tell agility hey when content changes in the CMS notify a Gatsby cloud the preview environment that it should refresh its content so go ahead and click on settings and then click on web books create new paste in the URL and here just put save and save events we don't because we don't we don't need the when you publish content we don't need the PV environment to change it already has the latest content anyways so it'd be redundant so go ahead save there your web focus there now go back into the Gatsby dashboard I we should see that your preview environment should almost be done where is it right now it's running queries almost here generate thumbnails yeah see the majority of that time was just installing project dependencies which gets cached so subsequent bullets will be a lot faster than that well it's ready it's done cool so this is your preview environment right yet so cop yeah go ahead click on that let's just make sure this is actually working a little weak background yeah so we already have our changes here this sensing mimics exactly what we had running in your local environment but now it's running in the cloud one thing we should do here is we should copy that URL and then tell agility about it so that when editors click preview and agility it loads up that URL so in domain configuration there select a website and under website domains go ahead and pick Plus name this preview and under domain URL you can just paste in that URL you had and just and just check the box that hit that says preview domain go back and check the box that are going yeah see and it's safe cool so now when you're in pages or if you in shared content for that matter if you just go and you know select posts or your features page why why don't we preview your your your features page that you had created so go ahead hit preview and you'll see here and this loads up this site in preview mode nice now go back into agility 1 let's just double just make sure that this that our preview is working properly because now what's gonna happen is open up that module and change that title from one thing to another thing something something different change that to I can't type no my hands are cold and I'm all nervous pressures on title okay here we go I'm gonna click Save on that go ahead hit save now flip back to the preview page that you have opened there already I'm not sure which one of us is it this one yep yeah here we go because what you had called that posts list I guess right oh there we go so that so that so that that change just just it just happened Thanks so that happens in real time too so he didn't have to refresh the page it just happens automatically so that's really cool and you can and then so now at this point you essentially have a Gatsby site that works very much like a typical traditional site which you know when you change content the content weekly freshers automatically and it was really easy to set up right how long it take it took like really like 6 minutes to set that up and get that working in agility so pretty cool you'll also be able to you know if you're if you're on the details of a post and shared content get preview you'll be taken directly to the post details page as well so preview just works out of the box automatically for these scenarios the last thing we want to do here is let's get a production version of the site up something that is just showing the you know the latest published content that we actually have so if you go back into into gatsby cloud we can actually enable this really quickly again just a few clicks make it really simple if you click on the production their production tab gatsby oh we actually had a failed build that what happened there well I don't think we have enough content because I didn't publish any of the other stuff do I have to don't have to publish things okay it's that's a different that's a different environment yeah so the build so the build section of everything the production thing it only works off published content right yes and now we have code that is essentially that we have introduced some code that is actually breaking or published version there cool thing is is that you know if you have cases like this that come up these things these these problems don't happen in production they happen during build fine so you're like oh I have a problem let's go and fix this as opposed to oh shoot let's roll back the deployment our site is down I'm gonna go through and just publish stuff yeah I'm just gonna publish everything I think I need to publish my authors and then I'm gonna go and republish these guys too there we go yes though those are both in staging too because you changed cool so now I don't think I we didn't set up a publish webhook did we so I'm you know hell we didn't read yes this build yeah so in Gatsby here you can just go ahead and just hit the you can I think you should be able to just retrieve the build from within Gatsby okay I don't think it's quite finished publishing yet let me just see if there's anything else it says this process no I didn't publish this did I publish it looks like our publishing is taking a little longer than we should I don't see anything there go done okay cool so it's a trigger another bill yeah it's just manually manually trigger build yet build messenger okay so if I was to go and make changes to my get prod to my get code and and when does that what and and I actually checked things back in would that trigger rebuild as well yeah the way though well the way this is set up right now is any changes that happen in your master branch will automatically reach trigger a build in gatsby cloud so it'll just it'll try to do that right now we could take this further by setting up a web hook in agility so that anytime content is published a rebuild is also triggered so we could take that extra step or if we wanted to you know people could just manny when they want to a change to go to production they can just go into gatsby cloud and hit trigger build and that's gonna kick off a new deployment for your site so a couple different workflows on what works best for you typically i probably recommend would probably set up a web hook to trigger the build I'm just pretty easy to do there's a web hook in here that you just paste directly and agility and yeah so that's built now so click on that and that should give us a build URL so what's cool about this is every build you do you have a specific URL so if you click on that Jewel and there's our site built with all of our sort of published changes now that isn't your sort of live URL that you that you have your website actually on the last step here is you know gatsby cloud is great for doing your builds for you and that kind of thing but it doesn't really provide you a hosting environment for those that's meant to be used so you do that by adding a deployment integration so click that button saying setup hosting and under hosting integrations why don't you select metafile because that's pretty simple I just hit connect so at this point here it's going to ask you either create a notify account or log in to an existing one and so here you'll just want to authorize that that integration and now you can give it a name well create it's connected it's connected and I think Gatsby cloud should automatically deploy to that now unless you have to do another one maybe do another build it looks like it's triggering a new building stone hosting configuration so it's gonna build it again yeah so cool wow that's building I'll take a moment to address some of the questions that we do have in that we had some people so this is a question from Roman he says have you ever met maybe two plug-in that consumed di T a map format which is XML content format for technical writers and produce end user content in form of a knowledge base HTML doc I can't say unfortunate that I'm familiar with Gita matte format I'm not I'm not entirely sure there but there should be able to be there's certainly a way to be able to take data from some source trance transform it and then create an HTML page out of it for sure but I can't speak directly to that there is a plug-in called Gatsby transformer XML which I think was written to do stuff like that it's an XML format so on Gatsby j/s org I just while James was talking I just googled it so there's this plug-in it basically does that so you just need to be able to transfer your XML format into HTML yeah so yeah this is a great play to go take a look and see what plugins are available there's tons of different things that it can do all sorts of things for you so I guess yeah when in doubt search the plug-in repository on on Gatsby and then the question here from John he says are there are there plans to add those resolvers that we showed to developer download section of the agility manager so what we are planning to do is provide a way that our api will automatically generate schema types in your graph QL so for that we need to we need to add an API to get schema types essentially or for all your content model definitions and and then that'll when you source your content it'll put that in that format and then we can sort of automatically resolve that content for you so yes we are planning Oh my mic cut out cuz my headset was named to my phone and I just got a call great let me let me just let me just let me just say that again we are planning to do that so that the source plugin will automatically create that schema and automatically create this was always for you don't you'll always have the ability to add your own resolvers because there can always be cases where it said you want to do something that is a little outside of what comes out of the box but for now yeah for those link content fields that you want to resolve you just need to add that resolver that yourself when you need to and I with just while you were talking there James I actually went in to notify and found that website that it got you know into myNet with I count which is also another free account so it created this website in here and I can what's really cool here is I can actually see all the different deploys of this website there's only one of them but if I did more than it would see multiple deploy so I this is where I could actually go and view the different versions of this from notify as well and then I just clicked on this link and I was able to view my website right here pretty cool so that's great that's pretty much I think everything that I wanted to cover in terms of getting started with agility make some changes see how the project sort of works and setup and then be else at the preview environment and you can see there you know a lot of things that would normally take a long time like setting up hosting environments we're really quick and very very easy to easy to setup as well as making changes to the project and things too so to wrap up here just want to tell you guys about some of the stuff we have going on we are starting what was originally going to be an in-person conference with a bunch of different sessions and things but of course due to the covert situation we have moved this entirely virtual so we're gonna have a series of sessions webinars not too different from what we have today on a variety of different topics starting mace I wanna say our first ones May 7th is that Rachel that's right first one you hang up and they'll be spaced out over time so I think we have nine of them all together and that runs from May until I can't member now every two weeks yeah yes so for a couple months and just into the summer yeah yeah so the full schedule should be released very soon agility CMS slash community is where you go to check out all this all these upcoming events and they're gonna there's gonna be actually two different tracks there's gonna be a track for sort of leadership and and stuff is for digital leaders and then there's the current track which would James and I've already been starting on which is developers so you'll see the next the next session that comes up on the seventh is actually for four more of the digital leaders in terms of what the content is sort of centering on yeah I urge you guys if you want to learn more or engage with us please join our community one of the ways you can do that is join our community slack channel which there's a link to that that you can join on the agility semester comm slash community page as well as our github check out the open source SDKs that we have for different things I'm sort of looking after everything all of our open source repositories on github so you have any questions or issues with them let me know feel free to open up an issue request as well yeah and then go ahead create go to our website create that free account go through the steps that you can follow along there's a youtube link that will send it to this we've been live streaming this end of the recording so you can actually follow along with what we did today and you know and go through and go through all those steps to get a website basically the same website that we just worked on you can get that set up and this is a great way to work on on new websites that you're building just as a matter of interest the agility CMS com website we ate our own dog food from our last webinar and the home page of that website is actually on Gatsby and net liffe I and the rest of the website is still in asp.net and so there's a blog post on our blog too that talks about that experience of setting that up but like Gatsby is is ready for primetime it's a great tool a really really fast way to sort of build but also create a blazing fast website mm-hmm yeah yeah good good point there Joe and so if you want that wheat background color alright and now it's time for pizza so everyone go to your fridges and grab some alright everybody thanks a lot for joining in this has been great can't wait for the next webinar yep take care folks ciao

Channel: Agility CMS

Views: 817

Keywords: web dev, cms, gatsbyjs, agility cms, Headless CMS

Id: DO9MylEKRt0

Length: 85min 21sec (5121 seconds)

Published: Thu Apr 09 2020