Using Supabase with Cloudflare Workers

Hi, everyone. Welcome to this segment where we'll be discussing how to use Superbase with Cloudflare Workers. I'm Gift Egwuenu. I'm a developer advocate here at Cloudflare. And today I have a guest with me, Paul Copplestone. Hi, Paul. It's really great to have you. Would you like to introduce yourself? Yeah. Hey, Gift. Nice to be here. So you want a brief introduction? Okay, sure. I'm the CEO and co-founder of Superbase. Superbase is an open source Firebase alternative. So we build the features of Firebase, but we're completely open source. And we use slightly different tooling. In fact, we try to use existing open source tools wherever possible. The main tool is actually the database, the Postgres database. And really, that's where our sweet spot is. We provide Postgres databases to developers, and then we provide a bunch of tooling on top that makes it really easy to use that database. So that's why we're here today. It works very nicely with Cloudflare. And we've got a bunch of ways that you can connect to your database. And yeah, pretty excited about what Cloudflare launched to make it incredibly easy to connect from the edge. And yeah, you can do some pretty neat stuff with it. So happy to go through this in this session. Yeah, absolutely. Excited for that too. A couple of weeks ago, we had our developer week where we announced database integrations with several different database providers, Superbase being one of them. So in this segment, we'll be working you through how that integration essentially works. I'll go ahead and share my screen. Just hope we're sharing the correct screen here. Good. Yeah, we can see. This is the announcement blog post that we released. Essentially, we have several different integrations with different providers, Superbase being one of them. And in this session, I'm going to work through how you can actually get your database up and running with Cloudflare Workers. So we have a Superbase dashboard here. We're going to try to do everything from scratch. So if you're trying to do this, you can also follow along or maybe you're watching it later. It makes sense to you. We also have everything written on Cloudflare developer documentation as well as Superbase documentation, right? So Paul, would you do the honors of explaining how to set up a database with Superbase here? Yeah, sure. First of all, I noticed that you are a light mode user. I almost didn't recognize this dashboard. That's cool. If you just click new project, it's going to ask you to, yeah, you can choose your organization. So yeah, let's choose that one. Just give it a name, whatever you want. Okay, so we use books. Cool. They're saying CAPS. Is that right? You don't mind? Yeah. Okay, cool. And any password, you'll have to remember. It's going to, okay, better. Now, this is actually your database password as well. So it needs to be relatively secure. Yeah, you can generate a password. In this case, you actually don't, you can copy it and you probably won't need it in this session. But if you ever want to connect directly to your database, which is one of the things that Cloudflare provides, you definitely need that password. You can reset it later, but yeah, for this session, I doubt we'll need it. If you just click now, create new project. Okay. And what this is launching is actually a suite of tools. I don't know if people are familiar with Firebase. So let me describe what Firebase is. Firebase is a kind of backend as a service and we provide the similar sort of functionality Superbase. They're a huge inspiration for us. So we really like their product and they make it very easy to build from within a weekend, what you would normally take maybe a month to build. So what this is launching is a database, a full Postgres database. Every developer gets one whole database and you can use it just the database if you want, but it's also launching auto-generated APIs. As you develop your database, the APIs auto -generate. You've got file storage for storing large files, images. You've got auth, which is incredibly popular. You've got real-time streams. So you can listen to changes in your database and you can build everything from this dashboard or using the CLI. So the project started up. Why don't we go into the table editor on the left or on, yep, this one. So a good example was just creating a table. You wanted to create some books. So let's create a table called books. Generally in Postgres, it doesn't matter, but I'll make a recommendation. Yeah, exactly. I figured it's good for demos just to stick to normal conventions. You can give it a description, doesn't matter, but the main thing that we want to do is go down the bottom, add a column called, let's call them name, because you want to name your book and then we can do a text column. Just type in T-E-X-T and it should take you there. Yeah, and that one, let's make it not null. So you can click on the dots, suggested, set as null. It's actually got a constraint. So don't worry about that. We'll just put in some books. Right. Click save. You want to store some more data or? I think the name and what else do you have in your book? Maybe a description, the author, anything like that. Yeah. Description, text. Text, yeah. And then auto. Okay, so yeah. Okay, let's make it an author. Yeah. Okay. Good. Okay. Great. Save. Okay. If anyone's ever used Airtable, it's pretty much the same the same as Airtable. And this is creating the tables in the background. You can see it. It's secured by Postgres itself using something called row level security. So that's great. No one can access it unless they've got, they've been authorized. Let's actually insert some data. Maybe a book that you like. Insert a row. Yep. You can leave that one because it's automatic. Let's just put a name and a description and an author. I just want to make a red box. Now a. Let's leave it null just for this. Leave it empty and then author is fine. Great. Okay. Okay. Save that. Yeah. Great. And now you've got some data. We can do more or we can just connect and show off the integration at this point. Sure. I think we should connect and show the integration. Okay. Cool. So the next part, of course, will be to create a Cloudflare worker project. I've already gone ahead to do that. So this is an example worker with a fetch function. Now to make the connection seamless where you don't have to set up all the credentials yourself would actually deploy this and go to Cloudflare's dashboard so that we can turn on the database integration. So right now I would run. Let's see. Oh, okay. There we go. NPM. NPS. Run. NPS run. So this will deploy our worker so that we can actually see it pop up in the dashboard. I'll choose the accounts that I want that deployed to. So there we go. So heading back to the dashboard here. Just refresh. Oh, there it is already. Nice. Yeah. There it is. So in your Cloudflare worker's dashboard, under the settings tab, there is the integration tab. So this is where you get to connect to one of the preferred choice of database that you want to use. So for this specific one, we'll go with super base. So I'm going to click add integration. And here you have to go through some authorization steps. So you review and grant permissions to allow the worker connect to the database. So I'm going to click on that. I think here you have like a pop up where you have to accept. So let me sign in with GitHub. Okay. Cloudflare wants to have access to my organization. So I'll authorize that. The interesting bit here is after this step, typically, if you want to do the connection yourself, you have to go and set up environment variables. But I think automatically that is also connected, right? Exactly. So I'm going to select the books. Okay. Let's hope you get the right one. We'll see. So what is key? So I see that there is an anonymous. So this means, you know, when we set up the table and I said it was very secure, the anonymous key means that is an anonymous user. So when they try to access it, they will get rejected unless you write rules to allow anonymous access. Then when a user is authenticated, it will connect using that user's credentials. However, the service role key will bypass all security. So you can use it in server environments and you can access your data for the demo. Then it's probably better that we use the service key. Okay. Sounds good. So go click continue. And the next step will be to configure the secrets, which has been done automatically. So I can just go on to add the integration. Now that one is in NWKH. If we go to your, just jump it back to your super base. I'll make sure that you connect it to the right project. NWKH. Yes. Okay. That's great. It's the right. Yeah, it's the right. Okay. Sounds good. All right. So the next step would be to actually use the super base JavaScript library in our worker to actually consume or read data from the database we just created, just so that we are sure that everything works. If I go to environment variable, I can see that it's already created. So it means that I can assess this directly in my worker. So going back to my worker, what I need to do here first is install that library. It's called NPM install. It's super base slash. Yeah, that's exactly it. Nice. So I have this install in the background while I work through what you actually have to do. So here you'd need to import the library. Yep. If you want, we've got a little snippet that you can just copy and paste. Yeah. If you go to the docs.superbase.com. I think I had that page open. Yeah. Okay. Let me just copy it to the system. Yes, exactly. That's the one. Okay. And then it makes it much easier because I always make mistakes when I'm typing. So we scroll down, you'll see here. Yeah. This snippet of code will, if we take the whole actually. Yeah. And now we can paste it in. Yeah. Now there is one thing that we're doing here is that you can see that we're going from await super base from our countries table. But if you want to connect to your books table, and then select star means we're going to select everything from the table and return that data. Yeah. Yeah. Okay. So now if I run this locally, so NPX. And the thing to show is that it's connecting to m .superbase URL and m.superbase key. Typically in the past, you'd have to copy and paste these from your super base dashboard into your code. But I think because of the integration now, you don't have to, they're already automatically populated. So that's one of the best things that I like about it because it makes the setup very seamless for you to start. So I think we're just going to be returning the books that we have in our database. So let me run this over here in the browser. Oh, we have an error. Superbase URL is required. So I think I have to also add this to the wrangler.toml file. Yeah. I think because you're, yeah, exactly. Because you're doing it locally. We could try deploy it and just see if it works, but I guess if you're, yeah, I think that's a good way to see if it works without even testing it locally. Okay. Let me empty it. So I'm going to deploy. And then we can check out what we have in the dashboard. Okay. That's deployed. Over here, I will just go and test it and hopefully it works this time. Okay. Here we have our preview URL to test suites and there you go. Our data from the database is already available for you to use directly in your worker. This was pretty seamless to set up, right? And I feel like that's, yeah, it makes you as a developer trying to connect your database. You don't have to think about the, you don't have to think too much about the setup to get it connected with this database integration. You can just set it up pretty seamlessly and already have access to your database to consume within your worker. We can add another book if you want and just prove that the data is live. There's also something I wanted to ask you about the SQL editor, because the last time I set up, I used this. So which would you, like, which is preferred, right? Is it easier to go on to here and just add in your tables, like create your table and do all of that or use the SQL editor? Yep. So actually there are several ways. Generally people, when they're kind of hacking around, use the table editor and then you can drop down into the SQL editor. If you're experienced with SQL, maybe you're not experienced with SQL, so the table editor is useful. And then the next level down is writing database migrations using a CLI. So making sure that it's all stored in code. We give you the full range of options and when you're starting, you might start with a table editor and not know anything about Postgres. And then as you move into production, you should be moving more towards the CLI. But I think a neat feature here, if we use the SQL editor, if you jump back into the SQL editor on the side, we can actually use, because a lot of people don't know SQL, why don't you click the drop down by new query and let's do a new AI query, for example, and you can describe what you want. Maybe like you can say that I want to generate a table of authors and populate it with some of the most popular authors in the world or something like that. This is a GPT thing, right? Yep. It's becoming relatively popular because our audience sometimes has never seen SQL, so it's incredibly useful. This is quite experimental, but you can see that it's creating a table called author and then it's going to insert some columns. Okay, great. Now, once it's generated, we can save to new SQL snippet. Okay. And then all going well, we'll click into that. Yeah. So you can click off this. I thought it would have. Yeah. And then go to that SQL snippet on the side. Okay. And that seems good. We can just run it because it looks pretty good in my opinion. Okay. Now, if you actually go back to the table editor, now, depending on how much time we've got, we've got five minutes, but what we can do really quick is we can, because it's a relational database, we'll show how to do this. So let's go to the books table and create a foreign key reference. So if you go insert new column. Okay. And then we're going to call it author underscore ID. Yeah. And then we can add a foreign key relation to the author table, public author on the ID. That's actually great. You can just save it and you can save that. Okay. And then we'll pretend like this is actually inside the author also ID column on the right hand side. So you're on site in the, sorry, go back to books. And then the column on the far right, it has a null inside it. Yeah. Yeah. Let's make it also number one, which is JK Rowling, but that's fine for now. Okay. And we can, that's saved. Okay. Now actually I'll show you on your code snippet how we can get the author inside of the code snippet. So from books where you've got that select star, you can go put after the star, a comma. Like in this star? Comma author. And then yeah. Okay. Just do that. The autocomplete seems, and take away the author underscore ID. Let's just take their name and not rename it. Yeah. And remove the column. The column is consuming. Keep the parentheses, but remove the column. Okay. So author name. Okay. Was name one of the columns inside the author? Yes. We have name and description. All right. Let's deploy that and see if it works. Okay. Sounds good. Now we have a few more minutes, but let's see if this works out. Yeah. Okay. We have that deployed. So if I head back to my published worker, actually the URL is here, so I'll just go directly here. Go home? Yeah. And there you go. You've got inside there. The author is JK Rowling. So that's nice. And you can see, actually, it's kind of overwritten the author because we didn't delete the other column and you've got two identical author IDs, but you could keep both of them. But in this case, we've overwritten that. So yeah. You've built a fully relational data, which is a database, which is accessible to the web using some AI as well, which is nice. Yeah. This is amazing. Thanks for adding the additional touch to it. Yeah. I'm very excited about this integration and right here at Cloudflare, we're even working on additional things. For example, we're working on a CLI support to allow you, like the parts where we had to go to the dashboard to connect, you can actually do that with Wrangler in the future. So that's something that we'll be working on to add to this amazing integration that we already have. So thank you so much for tuning in and I hope this gives you the motivation to go try it out just immediately because it's kind of cool, right? Also, thank you so much, Paul, for coming on and sharing exactly how this integration works with SuperViz. We're very delighted to have you. Thanks, Kip. Yeah. I appreciate the invitation. Sounds great. So that's pretty much everything we wanted to cover. After this session, I'll go on and link a few of the documentation for you if you're rewatching it to check it out. Thank you and see you next time.