Building a globally distributed full-stack app using Cloudflare Pages, Next.js and Fauna

Hi, everyone. Thank you for joining our live segment. I am Gift, Developer Advocate at Cloudflare. And with me here, I have a guest, Shadid. Would you like to introduce yourself? Yeah. Hey, I'm Shadid. I'm a Developer Advocate at Fauna and really glad to be here with Gift. Thank you so much for joining. In today's segment, we're going to be doing something interesting. We're going to be walking you through how to build a full stack application using Cloudflare Pages and Fauna. And with me here, I have Shadid from Fauna, who is going to be showing us a demo of how these two applications or two products can be used to build full stack applications. So I think we'll start off with just sharing your screen. Does that work? Yeah, yeah, absolutely. Cool. All right. All right. So yeah, I'll take it from here. All right. Thank you, Gift. So yeah, let's talk about Cloudflare Pages and Cloudflare Pages Function a little bit. So here, yeah. So this Cloudflare Pages Function, this is something new that actually allows us to kind of build full stack application. So for example, we can actually create Cloudflare Worker Functions through Pages Function now. Is that right, Gift? Yeah, that is absolutely correct. With Pages Functions, Pages Functions gives developers the ability to not only build their applications and deploy to Cloudflare Pages, but now they can now add dynamic functionality using functions directly in their frontend applications. And under the hood, Cloudflare Pages Functions is just a worker. And it gives you an ability to just extend what you could do with your application, with your frontend app. Yeah, so it's exciting. Yeah, yeah, absolutely. And because it is under the hood, it's just a worker function. So it acts as an edge function, pretty much. And you can dynamically create dynamic content and connect to a database. And that's where kind of Fauna comes in. So today we're going to build a really simple full stack application using Cloudflare Pages, Next .js, and Fauna. So Fauna would be the database, and we're going to use Cloudflare Pages and Pages Functions. So let's go ahead and let's start building. So you're in my terminal. All right. By the way, we also created a full presentation for this workshop. You can go to Cloudflare.workshops.fauna.com. And anybody in the audience, if you guys want to see the whole thing, like see the slides, the whole application is in there. And I also give the audience a written tutorial, like how to build this thing. So yeah. So I'm actually going to reference it and build it. All right. So let's go ahead and create our new application. So I'm going to say npx create my stack and my CF app. And let's go ahead and let's get started. So while this is booting up, let's go to GitHub actually. And let's go to new. I'm just going to go here and run GitHub. And let's create a new repository. All right. So I'm just going to select Fauna. My CF demo. Just keep it public. And there we have it. All right. So I'm just going to copy this. And let's go back to our terminal. And this is done. All right. So what did I mean with my CF? Yeah, my CF app. My CF app. Yeah. All right. So let's go to my CF app. Let's make sure everything is working. Same thing. And let's go ahead. Let's create a local host. And there we have it. It's working. All right. So yeah. So let's open up the code for this. So here we have a very standard Next.js application. We have the API routes. So now when we actually deploy this to Cloudflare Pages, this API route is going to be a workers function. And that's going to be very interesting. Because from these API routes, we're going to access our database. And so that's where the full stack kind of comes in. Yeah. We can build like pretty much fully fledged application, you know, front end, back end. And we don't really have to manage separate repositories or anything like that. Everything is kind of bundled with Next.js. So yeah. All right. So let's go ahead and let's run our application again. Run dev. And I'm just going to make sure that the API route is working. Hello. It's working. Okay. So in order to so let's go back to our code. Now, in order to make these API routes edge compatible, we actually have to enable. So a lot of people probably already using Next.js. So we're using Next .js 13 here. And actually, the edge function on Next.js is still in experimental mode. So we actually have to enable that. So let's go ahead and enable experimental mode. So what we have to do, we can just go into that function. So I'm just going to use this function and put in this. I'll also make this like this. Okay, that's good. And we also probably have to go in here. Let's keep it. And here, we also got to turn on the experimental runtime. There we have it. Okay. So now we can go to Cloudflare and try to deploy this application. Let me just... This repository has no remote. So I think... Yeah, you have to do that. Yeah. Yeah. I forgot that step. Sorry. So is this where the Next.js on pages comes in? Like after you deploy this application then? Yeah, absolutely. Absolutely. And that's where it comes in. Let's publish and let's see if... Let's first get this repository up in there. Okay. So now, I'm going to go to my Cloudflare account. Let's go over here. Yep. Okay. So we're going to go to pages. As you can see, I already deployed one, the same type of code. But yeah, let's do it again. Connect to Git. And here, I think this is the one. My next... My CRT, yeah. Yeah, this is the one. All right. So it's really easy. I love how easy Cloudflare is. Just select, begin setup. And all you have to do, choose a branch. So you have to choose a branch. So it's going to be the main branch because that's the only branch we have. And framework preset, we can just choose Next.js. And it will auto select everything for us. Yes. Oh, I'm in the environment variable. I should... So I'm going to choose Node version 1618. So it is better if you choose the latest Node version. Latest. Yeah. Don't use 12. It's going to break everything. I don't... Yeah, I think that would break everything. I just wanted to say, speaking about how you mentioned it's easy to work with Pages, I think one of the additional things with using Pages functions is the Git integration compared to if you're writing just pure Cloudflare worker functions. So I like that it's also integrated with the Pages experience where you can deploy your code. You can have different deploy versions. Like when you deploy a pull request, for example, there's already one generated URL for you to check out what your code has been... What has been published, right? But you don't have that with the experience with workers. So that's an added advantage if you decide to go throughout of using Pages functions. Yeah. Yeah. Yeah, absolutely. And that's a huge added advantage. Like, you know, here we didn't even do anything pretty much. Just plug in our repository and I'm going to hit seven deploy and it will just do the magic pretty much. So absolutely. And it's beginning to deploy. And while this is doing its thing, we can go to Fauna and create our database. So I can go to dashboard .fauna.com. Okay. So I just went to dashboard.fauna.com. So we're going to connect to the database from Cloudflare Pages. So let's go ahead and create a new database. And I'm going to keep it like real simple. So I'm going to call this demo. And classic. So just like Cloudflare, Fauna also... It's a database that has the edge philosophy. So if you choose classic, it's just global region. You know, you're... Yeah. Just like Cloudflare workers and how our Cloudflare kind of works. It's just going to get data from the closest location pretty much. Yeah. So that's all we do. And then I can just create a new collection. I'm going to call it product. And hit save. And next, all we have to do is create a new key. So this key is going to be used to connect to our workers. So server key. And this is our key. So I'm not going to close just because... Yeah, it goes. Yeah. Okay. So let's go ahead here. And let's see if this is done. So it's like this is done. So you can go in here. There we go. Our application is deployed. And if you go API hello... It's probably... Oh. So this... Yep. This is not supposed to... So I think we haven't... We actually haven't configured the experimental runtime. That's why it's probably not working. But we can go ahead and do that. So right here. Okay. So let's go back to our code. And go here. Okay. So we actually can't use this. So we have to use... Yeah. It has to use the function. Yeah. Yeah. Something like this. Like export async. All right. So let's go back here. Let's run our application. And we can go here. Okay. So API hello. Okay. So this is working. All right. So what we can do... We can go over here. And... Oh. I'm not showing my... Okay. So here we have experimental. Okay. That's all good. This is good. All right. So so one of the ways that we can actually check that if this is going to work by npx Cloudflare next on pages. Experimental min. So if we run this and if this runs, then we will know that it will actually work. Yeah. And this... So a lot of like Next.js 13, we're using Next.js 13. So a lot of the things are still in beta for Next.js 13. So sometimes things break. But we'll do our best. So let's go ahead. Yeah. If it helps, I also tried running this before this call. And it worked for me. So yeah. I think it's the syntax that we did not update. That was the issue. So we'll see. Yeah. Yeah. Okay. Let's look. Syntax error. Maybe something with the code you copied over because I saw like some linting errors on it. Right here, right? Yeah. Let me see. This is okay. But this is like a synchronous import. That should be fine. Okay. So that's all good. Yeah. Looks good. All right. Let's actually go ahead and add the database and stuff. And we'll redeploy it and figure it out. Okay. So... All right. So let's create... Okay. So let's create... Okay. Let's run the application again. Let's go here. Okay. So let's create a new page. So we're going to have a new page called add products. And in that page, we'll be able to add product to our Fauna database. So let's go ahead and do that. So let's... Let me just go over here. And in the pages, I'm going to create a new file. Add product.js. All right. And here, I can do this. Start the import. React. Default function. And I am just going to copy this. Yeah. Otherwise... Yeah. The whole time. Yeah. Okay. Okay. So I'm going to change... By the way, I'm copy pasting it from here. So anybody in the audience, you can just go and copy paste it from here. So that's where I'm actually copy pasting this. All right. Actually, let me just copy this over. There we go. So it's just a simple form that we added. And yeah. And we're... What we're doing here is we're actually making an API call to products. And that's where we're going to create another API endpoint. And that's where we're going to... We're going to hit our database, too. So let's go ahead and create this. Products.js. And I'm also going to copy paste it here. And basically, so this is a... This is a worker function. So here we're checking if the method is post. And then we're reading the body, pretty much. And yeah. And we're just going to use this create product database function. And hit... Yeah. And hit the database to create a product. So we kind of have to go ahead and create that create product function. So it's supposed to be in db. So let's go db.js. And I also have the code where it works. So I'm just going to copy paste it. And here we're just bringing in the Fauna db and plugging in the secret. And we're just doing it from there. So here we're just going to plug in the secret that we had that we just created. So this guy. So let's go ahead. So I'm just going to do it directly here for now. And then we can change it to a process environment. All right. Did you also import or install Fauna db? I'm guessing it's the npm package? npm package? Yes. So we do have to install that. So npm i Fauna. All right. So let's go ahead and import that. Okay. So we're going to do npm.io. Okay. So we're here. So let's try to new product. Let's do price. Some random stuff. Let's see if it works. Fingers crossed. Yeah, it works. Like, looks like it's working. All right. Yeah. So now we can go to our collection. We'll see that that new product actually. Yeah, it's actually been created. Yeah. So that's pretty much it. I think anybody who's interested, you guys can follow along this tutorial. We're also going to have this tutorial live on the Cloudflare, under Cloudflare pages functions. So right here. The examples? Yeah. Tutorials? Yeah. Somewhere up. Oh, somewhere up. Yeah. Somewhere there. Yeah. So we're going to have it somewhere here under the tutorials. Yeah. And since Next.js 13 is kind of new, you know, this might break during deployment. But, you know, there's a really good team behind it. So if you guys do find any issues, I would suggest just go to this page. Cloudflare Next on pages. And just submit an issue right here. And you can also, like anybody in the audience, they can also follow this guide. And pretty much add Lefana. And you can create a full stack application that way as well. Yeah. So. Awesome. Yeah. Oh, thank you so much, Adit, for sharing that. Just one question to see. So this is just creating a product. I assume if I want to also list out the products in my application, I can also do that directly from the Fona API by just pulling it in. Right? Yeah. Yeah. Yeah. Absolutely. So I do have all the code here. So I also have all the code here for Fona. So basically, so if you want to pull down all the okay. So if you want to pull down all the let's say you want to pull down all the products, you can just go to. Yeah, right here. So the db.js. Yeah. Get product by ID. There's also get all products. So yeah. There's all the examples are there. So all the examples are on this tutorial. Okay. And also in the sample app. So yeah, I'll have both of the sample apps and the tutorial and the tutorial for Cloudflare. All of that included with the video. Yeah. And if you guys want to know more about Fona, head over to Fona.com. And like, Fona really works well with Cloudflare Edge, because it's also like an edge type of database. Because it gets data from the closest region, just like Cloudflare workers. There is an architectural piece from Fona. It's called Fona Edge Computing Reference Architecture. And it kind of, it kind of like, tells people about like, like explains people about like, how data residency and everything kind of works. And we got Cloudflare Workers examples there as well. Yeah. Interesting. Cool. Thank you so much for sharing that. I will check it out myself. Yeah. Also for the links, I think it's also possible to add it to the description of this once it goes live. Once it's done, and then you can rewatch the stream after I would ask to add the links somewhere in the description. So people can also reference it. Other than that, this was great. Thank you so much for sharing how we can leverage both Fona and Cloudflare pages functions to build full stack application. And this is just like scratching the surface, right? You can go off to build more complex, dynamic applications for your use case. So yeah, let us know if you want to explore this more. Check out the examples. Also, we're on Discord. You can ask questions about any of what Shadi shared in the stream. And with that, I'll see you all next time. Thank you so much.