 Hello developers, my name is Matt Ravel. Today I'd like to talk to you about building a website or actually a blog with Gatsby. So Gatsby is a tool for creating static websites with React and allows you to pull your data from virtual anywhere like a CMS or markdown files or even a database and it leverages GraphQL to do that and Webpack to combine everything and your React code to generate static files. It also you might have heard it called Jam, JavaScript, APIs and markup known as a Jam stack. So that's that's what Gatsby fits into and we're gonna deploy that to Netlify. Netlify is a hosting company for static sites that offers continuous integration, HTML, forums, AWS, Lambda and a whole bunch of other things. Let's get started. This screencast is based on a blog post I wrote called Build a Secure Blog with React, Gatsby and Netlify and at the bottom of this post it links to a GitHub repo that has all the completed code. So you'll be able to see this if you want at github.com, octa developer, Gatsby, Netlify, Octa example. And in this there is a demo dot adoc file adoc for ASCII doc and it can be rendered with the ASCII doc plugin so it looks a little nicer and you'll see the table of contents. We're going to start by creating a new project with Gatsby. We'll add the Netlify CMS, check it into GitHub, render the blog posts, add some markdown support and then use Gatsby's node API to generate some static blog pages and then we'll secure it all with Octa and fix some production build problems that happen because of that. So I'm going to start by putting this on the left and you should know that it says you will need node 12, a GitHub account which I already have, a Netlify account which if you go to netlify.com you can log in and create one. I already have one so it'll automatically log me in. You can see I do not have any sites yet. developer.octa.com is where you can sign up for a brand new Octa developer account so you can see create free account there and we just prompt you for a few things you get up to a thousand monthly active users for free. So back to our instructions. You need to install Gatsby CLI first. I already have that installed so if I do Gatsby version, you'll see I'm using 2.8.30 and then I'll create a new Gatsby project using Gatsby new and this just builds it from the Gatsby Starter Hello World project on GitHub and I'll cd into that directory and you can see the directory structure by excluding node modules and using the tree command and if we do an MPM start that will call MPM run develop and that will call Gatsby develop. So I love the attention to detail that Gatsby uses because I typically run MPM start for most of my projects and the fact that that just works is pretty nice. So if you go to localhost8000, you'll see Hello World. So not a lot going on so far. Let's install the Netlify CMS and it's Gatsby plugin. So we'll control C out of there and you'll notice I'm using version numbers for both of these plugins. You don't have to if you don't want to but this tutorial might not work. So I've tested these and verified that they work. And then I'm going to open this up in BS code and if you go to the Gatsby config file you can add the Netlify CMS here as a plugin and then under static create a new file admin config.yml and then put this yaml in it and what this does is it configures your project so it'll have a blog and the blog will have a path, a date, a title, and a body and you have to fix the yaml unfortunately that copy and paste didn't work so well. It looks correct in the blog post so if you grab it from there and everything will work so nothing like be any yaml developer close copy and paste yaml man seems to fail every time. Okay now that we have that up we can go and open the terminal here option tilde or the control tilde there we go and then we can do npm start and it's building the development bundle so now if we go to localhost 8000 again and we go to admin you'll see we can log in and by default this allows anyone to log in so we can create a new blog we just have a test repo or in our BS code it says test repo is a back end so this is just an in-memory repo so if we had like blog first post and then we said hello world and blogs are awesome and so is markdown and then we change it to markdown over here. Oh I didn't like that so then we save it publish it you can see if we go back to our blog collection it's there the problem is if we restart it it'll go away That's just because we're using a test back in so now we can create a get hub repo and add our project into it So I will go to github.com and under my account new repository and call it Gatsby Netlify Octa okay create the repository now we'll grab this we need to add our project to get so get init and then get add everything and get commit add project to github then copy and paste those two commands then if we go to netlify this app.netlify.com slash start We will integrate it with our github Authorized us now we can search for netlify there we are And then you can use the defaults and just click deploy site And if you scroll down to production deploys you can see it's actually being deployed After a while you'll see site is live down at the bottom of your deploy log And if you scroll up to the top You can go back to your project and you will see the URL for your project there And look at that it's deployed to netlify so that part was pretty easy You've built a react app checked it in the source control and publish it to production Not only that you've used netlify and its continuous delivery platform for actually Deploying your site so anytime you check in any code to your github repo it'll automatically be deployed So let's do some other things Let's modify the netlify CMS to use github as the back end so start by changing this to name equals github and the repo to be Where we deployed Gatsby Netlify Octa Now we can save that And commit it and github as a back end because without this Anytime we save or make any changes The files won't be saved if you restart the app. So we don't want that So we'll push this to production get push origin master and if you go back to netlify That will kick off another build You can see down here. It's building another one And so once that's done we will be able to log in with github to modify the back end files Okay, so the site is live now. We can refresh And if we're to go to admin Sometimes you do need a slash on the end, but it appears to add it so bad indentation Doesn't like our yaml So let's see here. What's the problem? Oh, we got a back tick there. So we got to fix that get Horse yaml is the problem So we fix that now I can refresh And you'll see it prompts us to log in with github So there's no auth provider configured for github. So we have to do some work there if we go back to our instructions You'll notice the first thing to do is to go to your site settings and navigate to access control and down to OAuth so back up to our site and site settings and access control and Install provider. So we're gonna use github for this but first we have to go ahead and Add it on github. So if we go to github developer settings You can see that's it setting slash apps OAuth apps. We can add a new one. We'll call this my Gatsby blog And you'll grab your homepage URL from Netlify so this guy right here H2bs and then the callback URL is OAuth done from api.netlify.com And we can register our application and then we'll get the client ID and client secret from that so client ID client secret and Then we'll install that as an authentication provider Now if we go back to our content manager and try again this time It will prompt us to authorize as our user And so this makes a lot of sense to me because this blog is stored in github So why not store our blog posts in github? So we can start with creating a new blog post We'll give it a path of something like first post And we'll say hello world And we'll do it and mark down. All right and fabulous There we are and then a little emoji just to spice things up a bit. All right, and then we can publish that And if we go back to our blog collection, we'll see it's there not only that But if we go back to our project and do get pull Origin master It'll actually pull that file. You can see it was created in the blog directory So now the next thing we want to do is add the ability to render those blog posts on the UI of the Gatsby application So for this I'm going to open up in IntelliJ The reason I'm using IntelliJ instead of VS code is because it has the ability to Pre-record code snippets and I know VS code does as well But what I wasn't able to do is figure out how to do long blocks and they have just little snippets So if you know how to do that with VS code, please let me know But I'm going to create a new components blogroll.js file so components blogroll.js This is my blog role component and What this is you see here it extends from react component has data that it grabs and it basically grabs the posts and Maps them into a featured post and then the various, you know listing of posts beyond that in an excerpt from the post and then a link to keep reading and Then it uses this graph QL to actually go and get all the blog posts and formulate the data So then we'll also create a page called source pages blog.js and This is going to use that blog role component and Just show all the latest posts and then we'll add a link to that in the pages index Dot j s so grab the code here And you'll see it just renders a little world and then has a link to view the blog So we can restart Gatsby make sure it's not running back here. It's not so we'll close that one And then the MPM start so it's building that it's pulling in the blog posts And you'll notice there's an error because it cannot query the field all markdown remark on type query So that's because of markdown isn't actually added at this point. We don't have markdown support So the add markdown pages docs from Gatsby show That Gatsby follows the following steps for making this happen It reads the files in the Gatsby from the file system It transforms the markdown to HTML and the front matter to data So in that blog post itself you for you to look at the blog you can see that there's front matter on there Just like if you're using Jekyll and then it adds a markdown file creates a page component for the markdown files and creates static pages Using Gatsby's node.js create page API So we need to enable all that so we'll start by installing the Gatsby plugins for markdown support While that's running we can configure them in Gatsby config dot j s so right now. That's just the Gatsby plugin for Netlify So we still have that Netlify plugin But now we have the source file system that reads from the blog and it uses markdown pages and then transforms them So now we can do npm start If we go to localhost 8000 Review blog we can see that that's actually rendering and you'll notice it doesn't actually use markdown in the preview But if you were to click on the post itself it will but what this doesn't work What the heck? That's actually expected because we didn't tell Gatsby to generate pages for each of those blog posts We'll create a Gatsby node.js This will do the processing of our pages for the markdown So you see here it uses a create pages API and it uses this blog template Uses this graphql to build all those blog pages Handles any errors and then goes ahead and creates the page. So we do have to create that template templates blog.js Then Gatsby blog template You can see here it just grabs the data grabs a markdown from it and then puts it in an HTML template and Uses one of my favorite named attributes dangerously set in an HTML That's from the process markdown and then this is the page query for it and so now we should be able to Restart and see our markdown rendered properly Now we should be able to refresh this page and it'll work There we are and our markdown is rendered Now we can check this in Get commit and get push it and we can go back to Netlify and see that it's deploying that and Once your site is live You can go back to the main page there and view the blog and you'll see that your markdown pages are rendered So that's pretty slick Now let's add an account section so we can have a part of the app That's actually secured and we'll use octas to secure it But the general notion is this won't be a static part of your app This will be somewhere people log into and maybe they subscribe to a newsletter Maybe they update their settings or their subscription or something like that So we'll start by creating a pages account.js file So you can see this just has a home link that goes back to the home page a settings link and then an account and Not much to it at this point so we can link to it from our index page We'll say in my account and since this won't actually be Static content is going to be dynamic content at the bottom of Gatsby node We have to add this that excludes the account function Or the account page so you can see here it still calls on create page But it says hey if the path matches account then don't bother doing it So now we'll make this section secure with octa. So I have an octa developer account Dev 1 3 3 2 0 log into that And so you'll create a new application applications at application and this will be I believe it's a single page application Yep, and then we're gonna enter a name like Gatsby account and all these login redirect your eyes. So Go to a single page We'll say Gatsby blog And we'll change this to the default of 8,000 And then this one will be 8,000 account Just double-check and get that right. Yep, and then 9,000 account and the reason for 9,000 is because When you run the production build locally it'll run on 9,000 So if you do Gatsby build it builds all your static assets and then you do Gatsby serve That'll do it on 9,000 instead of 8,000 which is more of a developer thing. So we'll change that to 9,000 and then also our Netlify site so grab this URL And you'll have to do this for any app that you want to deploy to production because all of the Redirects have to be whitelisted and wildcards aren't allowed. This is the most secure way of doing a lot. So that's why we do it that way Okay So you'll notice we're using authorization code flow and not implicit flow. This actually uses pixie a public Key proof exchange proof key. Yeah, something like that, but it's very secure Proof key code exchange so it generates a one-time code and then it sends that with the request when you get the code back It sends that to get the token. So works nicely if you go to API to trust it or origins You also have to add all those trusted origins. So it added one for us But Gatsby local build Called local prod build That needs to be HTTPS local host 9,000 so that will work and then cores and redirect and Then do another one for Netlify And you just need to do the Main name and cores and redirect So now our apps all set up And you'll notice these follows the instructions over here for trusted origin and now one style octa sign-in widget So this is the latest version 3.7.2 While that's going we'll create a new login component login.js Now this works is it has some configuration for octa. So we'll need to grab from our dashboard our org URL So that goes right here And then from our applications the client ID And then there's some customizations I did to give it a Gatsby logo and you'll see the redirect URI since this Does get evaluated by Gatsby. I basically Ignore if there's window in there and then otherwise we grab the window location origin And then the auth parameters say hey Pixi is true and the response type is a token and an ID token So this will be an access token and this is the element that we're going to bind to So we create a new octa sign-in widget and then we grab the user as a state and when the component mounts We go ahead and grab the auth client and we grab a session And if that session exists and it's active and we clear the parameters from the browser window We set the username in the state and we set is authenticated to true And then we get the access and the ID tokens and save those in local storage So this is the API that does that for you and then you could say hello to the person who just signed in so both in the console And it reloads a page So we'll be able to grab that and render it in the page as well And then if there's any errors go ahead and remove it and render it in that sign in so that's how all that works and We replace those placeholders. So now in account.js. We need to modify that to have a little more account logic So you can see here The account is now it's component its own component and it grabs that user state And how is authenticated works is it gets that is authenticated true or false and then it grabs the ID token and Sets the user from that with their name and that the token has expired it goes ahead and clears out everything and logging out it uses a sign-out method and Then sets local storage to false and Sets the user to false and then navigates back to the beginning So then it renders the user's name this state user and it adds a logout button So now if we restart the app with MPM start We can go to local host 8,000 and I'm actually gonna do this in an incognito window And I can do my account And you'll see we're prompted to log in And now has my name in there and of course I can click settings or back to my account or back to the home And that's all working so I can even log out there So one thing that does happen if I were to run Gatsby build It will show an error Because the sign-in widget isn't meant to be used server-side or it doesn't have support for a server-side rendering So you can see windows not defined and that's in the actual sign-in widget So we can't really control that it shows the files that that exists in and the path to get to it So what you can do is in the bottom of Gatsby node you can modify the webpack config To basically ignore the sign-in widget as a dependency So you see on create webpack config if the build HTML stage is happening and just Exclude and use a null loader for that So now if we were to try again This time it'll work There we are and now we can run Gatsby serve You'll see it runs it on 9,000 Before to try it there Let's try in an incognito window 9,000 doesn't have course so it's like we might have messed up something in our octa config Go to API trusted origins Locals, oh, I'd used HTTPS. So my bad Save that Now if we try again This time it'll work. So Make sure you have your core settings correctly or you'll end up with an information or an error like that one Back to our instructions. The next thing I want to show you is how to add user registration. So if you go to users registration And click on edit if this is the first time you've done it You'll see a different screen that just says do you want to actually enable this? But if you've done it before and turned it off, it's a little different So now we have that and these are just all the defaults. It'll show the sign-up link on the sign-in widget But we do have to configure that first So in login.js once you've turned it on you have to go in here and add a Bit of configuration at the top. So we have our auth prams and add a new one called features and Registration true And then we can go ahead and rebuild it and Run Gatsby serve now if we log out then we're to click my account You can see that there's a sign-up link now and it uses that same sign-in widget So it just prompts you for the email password first name last name and you can adjust those if you want So you can add new users that way So pretty sweet you did it or we did it and we can check this in Let's say at octa for off because friends don't let friends write authentication And I'm your friend So the other thing you can do is you can extend Gatsby's functionality So we added octa for authentication, but if you want to use Add sign up for a newsletter like with tiny letter That's pretty neat site. I have a friend that uses it and I read all his newsletter so that works really nicely and You can also store your user settings in octa since you have the user's information So our octa node SDK would allow you to do that or any back-end SDK and in fact If you're developed like a job or a dotnet one you could use fetch right from your Gatsby application Of course, you could do it note as well But this is how that code might look so in your component did mount you go and fetch the user settings You'd pass the bear token or the access token from the token manager Then you get your data back and you could do what you wanted with it So this blog post again is available at our octa developer blog The github repo is on octa developer as well And if you want to see the developer or the octa sign-in widget, you can customize that as well We have a little cloud for issue but that came up So you can make this look all kinds of different ways that you want to make it look and this will show you how to do it So thank you for watching if you go to our YouTube channel, which you are likely watching this on That's at youtube.com see slash octa dev we have many more tutorials on how to use various apis and authentication mechanisms and Please subscribe and I hope you have a great day. Thank you