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.

And yeah. Yeah, 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, 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 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?

Yeah, that is absolutely correct. With Pages Functions gives, Pages Functions give 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 a bit 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, you know, it is under the hood, it's just a worker function.

So it acts as a 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 like a full presentation for this.

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, so yeah. So I'm actually going to reference it and build it.

Alright, so let's, let's go ahead and create our new application.

So we're going to say npx, create my stack and my CF app. And let's go ahead and get started.

So while this is booting up, let's go to GitHub, actually. And let's go to GitHub.

And let's create a new, which is going to go here in GitHub. And let's create a new repository.

Okay. All right. So just going to select owner, my CF demo, just keep it public.

And there we have it.

Alright, so I'm just going to copy this. Let's go back to our terminal.

And this is done. Alright, so what did I mean with my CF? Yeah, my CF app.

My CF app. Yeah. Alright, so let's go to my CF app. Let's make sure everything is working.

npm run dev. And let's go ahead. Let's go to localhost.

And there we have it. It's working. Alright, so, um, 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, that's going to be very interesting.

Because from these API routes, we're gonna, we're going to access our database.

And so that's, that's where the full stack, full stack kind of comes in.

We can, yeah, we can build like, pretty much fully fledged application, you know, from them back end.

And we don't really have to manage separate repositories or anything like that.

Everything was kind of, kind of bundled with Next.js.

So so yeah. Alright, so let's go ahead. And let's run our application again.

And I'm just going to make sure that the API route is working. Hello, okay, 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.

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 an 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.

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 code. Okay, this repository has no remote.

So I think I have to do that. Yeah. Yeah, forgot.

Forgot that step. 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 that's where it comes in.

Let's, let's publish. 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 gonna go to pages. As you can see, I already deployed one.

Let's do it again.

Connect to Git. And here. I think this is my next, my CF demo.

Yeah. All right. So it's really easy. Like, I love how easy Cloudflare is.

Just select the game 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.

Environment variable, we should. So I'm going to choose node version 1618. So it is better if you choose the latest node version.

Don't don't use 12. 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, you know, have different deploy versions, like when you deploy a pull request, for example, there's already one generated URL for you to check out where 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, that's a huge added advantage.

Like, you know, like here, we didn't even do anything, pretty much, you know, 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 so 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.

I just remember here. Okay, so I just went to dashboard.fauna .com.

So we're gonna 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 demo and classic.

So just like Cloudflare, Fauna also, like, it's a database that is like that has the edge philosophy.

So if you if you choose classic, it's just global region, you know, you're, yeah, just like Cloudflare Workers and how Cloudflare kind of works.

It's just, 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, product and save.

And next, all we have to do is create a new key.

And so this, this key is going to be used to connect to, to our workers.

So this is our keys.

So I'm not going to close just because we Yeah, yeah. Okay, so let's go ahead here.

And let's see if this is done. So it's like this is done. So here we go.

Our application is deployed. And if you go API, hello. It's probably Oh, so yeah, 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 yeah, we can go ahead and do that.

So right here. Okay, so let's go back to our here. Okay, so we actually can't use this.

So we have to use Yeah, has to use the function. Yeah.

Yeah, something like this, like export. Alright, so let's go back here. Let's run our application.

Okay, so okay, so this is working.

Alright, so what we can do, we can go over here. Oh, I'm not sure.

Okay, so here we have experimental. And that's big. Okay, that's good.

This is good. All right. So, uh huh. 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.

Um, yeah. And this, so a lot of 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 yeah, yeah. Yeah.

Okay, let's look at the syntax error.

Maybe something with the code you copied over because I saw some links and 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.

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 we'll 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 Fonta database.

So let's go ahead and do that.

So let's, let me just go over here and the pages. I'm going to create a new file.

Add product .js. All right.

And here, I can choose to start doing import. And I am just going to copy paste some of the code.

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 to 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 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 hit our database too.

So let's go ahead and create this product.js. And I'm also going to copy paste it here.

And basically, so this is like 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 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 right here.

So I'm just going to copy paste it. And yeah. 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. Did you also import or install Fauna db?

I'm guessing it's the npm package? Yes. So we do have to install that.

So npm i Fauna. So good catch. All right. So let's go ahead and do that. Okay.

So we're going to do npm. Okay.

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. Looks like it's working. All right.

Yeah. So now we can go to our collection. We'll see 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. In the examples? Yeah. Tutorials? Yeah. Somewhere. 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 the Fauna. And you can create a full stack application that way as well.

Yeah. Awesome. Thank you so much, Salih, for sharing that.

Just one question to see. So this is just creating a product.

If I want to also list out the products in my application, I can also do that directly from the Fauna API by just pulling it in, right?

Yeah, yeah, absolutely.

So I do have all the code here. So I also have all the code here for Fauna.

So basically, 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 db.js.

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 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 Fauna, you know, head over to fauna.com.

And like Fauna 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.

And there is an architectural piece from Fauna.

It's called Fauna Edge Computing Reference Architecture. And 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 re -watch 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 Fauna 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 next time. Thank you so much. Our little contribution as a company to say, how can we help ensure that the political process has integrity, that people can trust it and that people can rely on it?

It's like a small family or community here.

And I think elections around the nation is the same way.

We're not a big agency. We don't have thousands of employees.

We have tens of employees. We have less than 100 here in North Carolina. So what's on my mind when I get up and go to work every morning is, what's next?

What did we not think of?

And what are the bad actors thinking of? The Athenian project, we use that to protect our voter information center site and allow it to be securely accessed by the citizens of Rhode Island.

It's extremely important to protect that and to be able to keep it available.

There are many bad actors out there that are trying to bring that down.

And others trying to penetrate our perimeter defenses from the Internet to access our voter registration and or tabulation data.

So it's very important to have a elections website that is safe, secure, and foremost, accurate.

The Athenian project, for anyone who is trying to run an election anywhere in the United States, is provided by us for free.

We think of it as a community service.

I stay optimistic by reminding myself there's a light at the end of the tunnel.

It's not a train. Having this protection gives us some peace of mind that we know if for some reason we were to come under attack, we wouldn't have to scramble or worry about trying to keep our site up that Cloudflare has our back.