💻 Superpowered Sites with Cloudflare Pages and Sanity.io

Aloha, everyone. My name is Kapehe. You can also call me Cap. You might see Cap around. But I do developer relations at Sanity.io. I live in Las Vegas, Nevada, with my husband and my five animals. I actually have a special guest with me today. This is my lap cat. This is Polly. So, she's going to be snoozing during the talk, but she will be hanging out with all of us today. But I do have two bunnies, two cats, and a dog. And for Vegas standards, that's a farm. That's a mini farm. But yeah, we love them. And yeah. So, today my talk is going to be a bunch of live coding and live deploying. So, let's hope it all works and that the odds are in my favor. So, today I will be covering a bunch of things. So, let me formally introduce you to my talk. So, Cloudflare Pages and Sanity.io, meet the viewers. We're going to be showing you all just how Cloudflare Pages work with a Next .js frontend. And all of our content for our website will be structured and managed by Sanity.io. And we will do all that. We will look through all that. Now, we don't have time to code up from scratch our entire frontend. So, I already have the next frontend code ready for us. And it's locally running. So, we don't need to worry about any of that. I thought it would be fitting since this is an event to make an events page with Next. So, if you do want the project, please reach out to me. I do have the GitHub repo that you can fork and clone. And I will get that to you. But definitely reach out if you would like that GitHub repo. And then at the very end, I will give you my Twitter so you can find me. So, you will need to update. Let me show you what the code kind of looks like. You will need to update within the repo under Studio and then under Sanity.json, the name of the project, your project ID, and your data set. Now, that might not make sense right now to you, but it will once we kind of get to the end of this talk on where to find those, really. But just make sure you update those so you can get that GitHub repo functioning for yourself. So, the different platforms we're going to be using today are Cloudflare Pages, Sanity .io, Next.js, and Webhooks. And we'll talk about Webhooks. But what are Cloudflare Pages? I'm on the homepage for it right now. It's pretty new. But new in the sense of tech new. So, is that really new? I don't know. But I'm very excited it's here and we all have access to it. The most basic explanation of Cloudflare Pages is it's a place to deploy your websites. So, we'll be deploying our frontend to it. And you'll see it's a pretty effortless Git integration that they have set up. This is just the homepage of it. But once we get into it, we'll set up our Git. And it will be pretty seamless. It's really great. Now, when you deploy to Cloudflare Pages, you now have access to Cloudflare's Edge Network. Cloudflare's Edge Network is like this. When you have a user and they visit your website, the browser has to go get the information from your servers. So, Cloudflare's Edge Network makes sure that the servers are as close as possible to the user. So, me being in Las Vegas, instead of pinging to New York City, it would find the Edge Network would find something closer and grab information from that. Say San Francisco. So, it makes for a quicker website, less time for the user to have to wait. And that makes the user happy. It also makes the developers happy, of course. So, we'll be deploying our frontend to Cloudflare Pages. Now, our backend. Let me go to Sanity. Our backend is all Sanity.io. So, it's going to be handled with Sanity. And this is where we are going to structure and manage all of our content. Sanity is a platform for content. Now, websites usually have content. I feel like it's safe to say that 99.99% of websites have some sort of content. And when you think content, you think text. But content doesn't just mean text. Content can be more than just the paragraphs within a blog post. Content can be the headers, the hero image, the gallery images. Also, it could be a product's description. It could be a product's price. A demo video that you have. A tweet with a poll. The poll's answers. The data sent back from a study. The inventory of products that you have in your eCommerce store. The lack of inventory you may have. And warnings that pop up when you need to order more inventory. So, you get the picture. Content is all over the web. So, we're going to be using Sanity to manage our content. And what I'll show you today is only the beginning of what Sanity can do. I wish I could show you more, but we'll do the most that we can today. And if you do have more questions, there's a Sanity Slack community that you can go to at Slack.sanity.io. And this is where you can find more information about Slack, ask questions, and it's pretty great. Now, this means our front end is going to be built with Nuxt.js. Nuxt is Vue. Vue is Nuxt. It's a really great framework to statically generate your Vue websites. So, you can build some pretty quick sites with Vue. And then finally, we're going to be using webhooks. But not just any webhooks. We're going to be using Sanity's new Grok -powered webhooks. These are really new. These came out, I want to say, a month ago. I don't want to, like, spoil the magic yet, but you're in for a treat and I'll show you. So, webhooks are a way to send a request to some endpoint when something happens. So, we're going to do something and it's going to send a request. Now, Grok-powered webhooks, so the Grok-powered part adds a cool layer to it. And I'll show you soon. So, stand by. Now, let's head on over to Sanity, which we're here. And we're going to show I'm going to show you real quick how to get a project up and running. I already have our project that we're going to be doing today up and running. But if you did want to get started, this is how you do it. So, Sanity .io. We're going to click on get started. And there's a couple different ways. There is the command line way. So, you can do this npm install the Sanity CLI. Once you do that, then you can do Sanity init. So, you have the CLI installed. Sanity init is how you initialize a brand new Sanity project. And that's how you would do that. It would ask you a series of questions like name of the project, the path of the project, that kind of stuff. If you want any data to be uploaded, like to be imported. And then there's also starter projects that you can find. These have a front end and the Sanity back end and then it gets deployed. So, also starters that you can work with and then make your own. So, we already have our project up and running. So, here it is over here. I've called it Sanity Cloudflare events demo. And that is the project we are going to be playing around with. Now, I already have it running locally. So, localhost 3000. This is what our events page looks like. This is the next side of everything. And we're going to be kind of changing some things in our Sanity Studio, which I'll show you in a second. And I'll show you how that works and all the good stuff. Now, our back end, our Sanity side, will look like this. This is our Sanity Studio. Now, our Sanity Studio is the human friendly way to view our content. All of our content is going to be living in our content lake. And this is the human friendly way to view all of that. And we'll go through all that. But first, let's get our project deployed to Cloudflare Pages. So, we have our local host. Now, I'm going to go over to the pages.Cloudflare.com and we're going to log in. I already have an account. I've already logged in. So, it's going to take me straight to the dashboard for the pages. Now, the first thing I'm going to do is I'm going to do create a project. And here you will connect your GitHub. If you've already done that, which I already have, you'll see this. If not, you will authorize and make sure that your GitHub is all good to go. Now, I'm going to click on the project that we want deployed. Sanity Cloudflare Events Demo. I have given access to all of my repositories to Cloudflare Pages. You could just give like access to one. I chose to do all. But you'll see that when you authorize. And then I'm going to do begin setup. Now, here is where the name of the project can live. And it will actually also be our URL. If we wanted to change that, we could. We don't need to. Production branch will be main. Now, build settings. This is where we're going to need to make sure we put in the correct information. We could do next. And it would give us a generic next build command and build output directory. But we're not going to use that today. So, we're going to do npm run build for our build command. And then our output directory is going to be webdist. So, I'm going to show you where that is. So, this is a mono repo. So, our studio backend and our frontend, our next frontend are hanging out together. Under web, under dist, that is our that's where our index HTML is. So, we're going to point it to that folder. And then leave it all is and save and deploy. All right. So, it's initializing the build. Let's let this do its thing and take care of a couple other things while this deploys. And we will come back. But one very important thing we need to do is our project will not trust the URL that we are deploying to. Let me show you what I mean. So, I'm going to go over to my manage dashboard, which I actually already have the tab. And if I go to manage sanity .io slash manage, this is my account. These are all my sanity projects. Now, you'll see a lot with the same name because I've tested out this demo a couple times. But I do know that the one that we're working with right now is the second one. Hopefully, you don't have all your projects named the same thing. But I'm going to click into the one that I know it is. Now, if you want to make sure that it is the one that you want to use, here's the project ID. So, this project ID, the H52, I'm going to go back over to my code. If I go under studio and then sanity.json, you see this project ID. So, that matches with that project ID in our manage dashboard. And now we know we are working with the correct one. Now, what I want to do is kind of show you all what the dashboard would look like. There's members. You can add people to the project. Otherwise, you are the only one who has access to your content, which is correct. And then we have the data sets. We're using production. Who has access? And the admin of this project that I've created. Usage. So, as you're creating stuff and people are using and they're making API requests, this would show up here. Then we can go to plan. And plan would be whatever plan you choose. We're using the free plan today. Then there's settings. And you can delete and archive here. But the one I want to point out is API settings, which they now have their own tab, is right here. So, there are a couple things that we want to look at here. First is and I know you see Grok powered webhooks, but not yet. So, course origin is where we're going to go. And so, sanity. So, that one needs to be updated. I need to do add course origin. And I need to put the link, the URL that we're about to get from Cloudflare once it's deployed. I need to put that right here. Because if I don't, if I click on that link, it will just be a loading thing forever and ever. Because that URL doesn't have access to the content in this for this particular project. Now, you already see that localhost 3000 is there. But definitely make sure you go here and allow access to that URL. So, we're gonna leave that here for now. And let's actually go deploy our sanity backend. And this is what it will look like. So, I'm in the I'm in my VS code for my project. And I'm going to I don't think I have I do. Okay. So, I'm going to cd into my studio folder. Whoops. Wrong one. I'm going to cd into my studio folder. And this is now my sanity backend that I'm in. And I'm just going to run the command sanity deploy. Now, the first question and the only question it's going to ask is, what do you want to name it? Let's name this sanity Cloudflare demo. Yeah. If it's available, it will keep going. So, it's available. Now, sanity Cloudflare demo is no longer available. So, if you end up doing this and you follow along, you have to come up with a unique name. So, our sanity backend will live at sanity Cloudflare demo.sanity .studio. And that's going to build out. Let's go look at our studio for a second. So, in here, we have our event information, sessions, programs, person's code of So, this is a really great start for a sanity for an events page. You have sessions. You have talks. You have people that are going to be giving those talks. So, you have to have bios for them. And then you can link all of these together so that a session has a particular person on it. Now, if we went to event information, let me actually pull this out. Oops. So, if I go to so, we see your next event and your next event. Let's do sanity Cloudflare event. And we have a little error up here. So, let's go find what that error is. So, it says only one day events are supported. So, the dates in here are incorrect. Let's change that to starting at 9. We'll do starting at 9 a.m. And then we'll do 13. I think I have to click in. Yeah. And then we'll do until 5 p.m. So, now everything is good and that publish button became active because before it was disabled because we had that warning. So, I'm going to publish that. And then now document is published. And we'll give a quick refresh over here. And right away, that is updated. So, sanity Cloudflare event. So, within the sanity studio, we have our UI for all of our content link. And it will speak to our front end that we already have set up and update whenever we update here and publish. So, all that is good to go. Let's see. All right. So, now it's deployed. So, I'm going to take this. This is our sanity studio. Let's put it on the same one as this. Awesome. And here's the dashboard. But we won't spend time here. We're just going to go straight to the desk. So, it is the same as what we saw here. Where there was the content with all of our and these are document types. Same thing. So, now this is just the deployed version. Now let's go check on our deployment for it's done. All right. So, our Cloudflare pages well, it's been deployed to Cloudflare pages. And we have our URL. We can just click on that. And it won't load anything. We have to take this URL. So, it's just going to be loading like that over and over. Put it into here. Save. And then come back here. Let's give it a refresh. And now we have our content. And it has the content that we updated when we did it locally. So, whether we did it locally or deployed, it will save our information because it's always syncing. So, now that we have our frontend deployed to Cloudflare pages and we have our sanity backend deployed to sanity deployed, let's actually change some content so we can kind of see what's going on. So, we have both our deployed versions hanging out. And that was pretty quick and seamless to deploy to Cloudflare pages and now we have access to that Cloudflare network and it's all good to go. By just hooking up your GitHub repo to it, it was able to take care of the rest. Now I'm going to go into persons and I'm going to add one. And you all are going to meet my bunny. Bonnie. So, we're going to do Bonnie. We're going to generate a slug. So, this is me creating a brand new person. We're going to do an image. Let me bring in an image. The image is me and Bonnie. And there we are. Hanging out. We need to do some alt text. So, we'll do and we'll give Bonnie. Bonnie likes to eat carrots all day. And we'll do a carrot emoji. Yes. Okay. So, we'll publish that. Now, this isn't being used anywhere on our frontend, this new persons. But persons are being referenced over on our frontend. So, we know that it's being used somewhere within our content link. So, let's actually update the lightning talk to be given by Bonnie instead of the sort of famous one speaker. So, we're going to go to content and we'll go to sessions. Then here's lightning talk. So, here is all of the content for our lightning talk. If I wanted to change this to be, like, capital letters, I could do that. But the thing I want to change right here is this reference to the persons, the sort of famous one. So, I'm going to delete this. Confirm delete. And let's add. And you can either do the dropdown or you can do this way. Add Bonnie. And let's publish. And now it's published. So, let's go to our deployed version. And we should see Bonnie show up. Perfect. So, if we click into this, it will now have a speaker profile for that person. So, now all the content was just filled in to however you set it up with your NUX frontend and her little bio and what sessions Bonnie is going to be speaking at. So, that is all good to go. Now, let me show you webhooks. So, webhooks, if I go into my manage, grok powered webhooks. So, I'm still in the manage dashboard for the project that I'm in. So, I'm going to do create a webhook. Now, there's a couple things we need to add. We'll do name. So, we'll do new speaker. We'll do a description. Rebuild when a new speaker is added. We'll do created. Created, updated, or deleted. URL, we actually need to get from whoever we're trying to, like, ping or get the request from. So, in our case, we're going to be doing Cloudflare. So, we need to get that from Cloudflare. We're going to do all data sets, trigger on create, update, or delete. And we'll come back to that. Let's go get our URL. So, if I come back to my Cloudflare, make this a little bit bigger. And all that looks great. Continue to project. If I go to settings, build and deployments, and I go to deploy hooks, I'm going to add a deploy hook. And we'll call it new speaker. And we'll do add. Now, this URL is what we need. So, I'm going to go back, put that URL in. And then here's where the grok power comes in. So, we don't want to rebuild on just anything happening. We want to rebuild only when, and this is grok that I'm now doing, when type is equal to person. Now, to find out what the type is, let me go back to content, persons, Bonnie. And I click on these three little dots. And I click on inspect. Here is type person. So, we can look at it in JSON. But type is person. So, we want to have that same thing lined up and write it in grok. So, all that looks good. We'll keep it all how it is. Save that. And let's bring this back like this. And let's see all of this in action. So, let's go back to deployments. Now, let's go update, create, or delete. Because we And that's all we need to do. And let's publish that. And if we give it a second, we should see a deployment startup over here. And sure enough, there it is. So, it's important, especially for an event, if you have, like, a new speaker come on, you do want your speaker list or anything that is speaker related to be updated immediately. So, the moment you hit that publish button, you could just save it in there. And it would just save in your studio. You don't have to hit publish. So, if you're not ready to publish it. But when we hit publish, we've set up that webhook that if any speaker information is updated, created, or deleted, trigger a rebuild. And because we have it on Cloudflare pages, that's what's happening. Now, let's do another one. So, I'm gonna go back to create a webhook. So, we have new speaker. Let's do we'll name this one Slack. Yeah. Slack message. No. Slack message for speaker. And we'll say send a Slack DM to CAP when a speaker is updated, created, or deleted. Cool. Now, this one is going to have to be a URL from Slack. I've already set that up. We don't have time to go find all that. But I already have a URL. So, I'm going to post that in there. Trigger on. Update. Keep create and delete. And let's filter on. So, we'll do type is equal to person. And if the so, we'll do so, this is Delta Grok. Delta Grok is a new version of Grok where you can look at something, how it was before, piece of content, what it was before. And if it's different than what it was after, then do something. So, we're gonna do and before. So, we're gonna have the name is not equal to the after name. And then our projection. Notice that we didn't have to do a projection for the last one because it was just a redeploy. This one, I actually want the Slack bot to say something. So, we're going to say text is we'll say hi, Cloudflare devs. Name has been created, updated, or deleted. And we'll add in an emoji. Green heart. Perfect. So, we'll keep all that how it is and we'll hit save. And let me get my Slack ready. And all right. So, we're going to trigger a name change. So, before I publish, let me bring my Slack over. I've tested this before. So, you're gonna see my testing. But it's a Slack DM to me that we've set up. And let's hit publish. And we should see. And there it is. So, right when it was published, we got a thing saying Bonnie. So, we put in the name. Bonnie has been created, updated, or deleted. And that all works. But also, because a speaker was updated, created, or deleted, we should see a new build. And there it is. So, the new build was also triggered for that webhook. Now, you could change it to a program, like a session or whatever it is. But that is Grok-powered webhooks. So, we have deployed our frontend, our next frontend to Cloudflare pages. We deployed our Sanity backend. We changed some content and made sure they were talking to each other and made sure everything was set up correctly. And then we added some speaker information for Bonnie because we're all very excited to hear Bonnie speak about carrots, probably. And then we saw Grok-powered webhooks and how you can really filter down and make that projection exactly what you want with Grok -powered webhooks. So, that is it from me. If you all have questions, you can find me on Twitter. I tweet about my animals. I tweet about working out and tech. But yeah. Thank you so much for allowing me to speak at this. Very exciting. And if you do want that GitHub repo, definitely reach out and I can get that for you. And if you have any questions about Sanity, let me show you that URL again. You can find it at slack.sanity.io. And there is a large Sanity community always willing to help. And yeah. Thank you so much for listening. And I will see you all around on Twitter or in Slack.