💻 Connecting your SQL or MongoDB Database to Cloudflare Workers with Prisma

Thank you for joining the Cloudflare speaker series. I'm Matt Mueller and I'm with the Prisma team. I work as a product manager on the Prisma client and I want to show you how to use Prisma with Cloudflare and MongoDB. So I'm actually going to build this example from scratch today and we'll see how far we get here. So as you can see, I've got a empty directory here. And so I'll basically, so what we'll be building today is actually like a request logger. So we'll deploy this request logger to Cloudflare Workers. And then that'll talk like when you have get requests, post requests, et cetera, they'll be stored into a MongoDB Atlas database. And so what you'll need today is a free MongoDB Atlas database, free Cloudflare worker account, free GitHub account, Node.js NPM installed and Git, all of the basics. And so let's get started. So I'm going to do NPM init, yes, and initialize a new package.json. I'm going to install some dependencies here. It's going to take a little bit of time. And so I'm installing Prisma, TypeScript, Wrangler, which is the official Cloudflare worker CLI and Webpack. And so now I'm going to run a mpx wrangler init to initialize Wrangler. And that's going to create a wrangler.toml file here. And now I'm going to actually log into Wrangler. So it's going to ask me to open this browser. Actually, I've already logged in. So I'm going to cancel out of this, but you would actually hit yes and go through the OAuth flow. The next thing I want to do is this is going to be a TypeScript project. So I'm going to bring a, I'm going to do mpx. It's a little bit slow here. mpx.tsc.init like this. And we'll initialize a Cloudflare, sorry, a TypeScript configuration file. We don't need a lot of this. So I'm going to actually just pull in a kind of a boilerplate one here. All right. It's got es-next is the target, CommonJS modules. And then we've got this TypeSquare, sorry, Cloudflare worker types type definition, which I'll kind of explain a bit more in a bit. Let's install a few more development dependencies. So I'm going to install those type definitions and TS loader, which is a way to work with compiled TypeScript to JavaScript via Webpack. So one of the cool things about Wrangler is that it actually integrates tightly with Webpack. And so you can kind of just bring your own Webpack configuration and it will compile that before uploading to Cloudflare Workers. And so you can like add TypeScript and whatever else you would normally do in a Webpack config. So I'm going to go ahead and create a Webpack config here. And it's a pretty, pretty standard one. We're going to be, our Cloudflare worker entry point is going to be source index.ts. We're going to output to this worker.js file. The target's WebWorker because WebWorker is like the most similar environment to a Cloudflare worker. Cloudflare Workers run on V8, so they don't have like a Node.js runtimes or like the browser DOM APIs or anything like that. So this one is a good target for us. We're doing a bit of aliasing here for the Prisma client and the Prisma client, like we need to target, we need to make sure we're targeting the Webpack, sorry, the Cloudflare worker compatible Prisma client, not the browser Prisma client. So we do a bit of aliasing here. One thing that is interesting is we need to set dev tools to none. Wrangler doesn't like, Webpack on its own will generate some eval commands and Wrangler has some problems with that. So we just set that to none. And then finally, we're going to compile TypeScript here. One more thing we need to do with this is set the configuration in the wrangler.toml file to point to this Webpack config that we just created here. And so now we're actually ready to set up Prisma. And so Prisma is, makes it easy to connect and query your database. And so I'm going to go ahead and run mpix Prisma net, and that's going to create a .env file and a Prisma.schema.prisma file. And so this is normally where you would kind of store your data model and your schema for your application. And so our application is going to be very simple here. It's just going to be a log model. So storing logs in a database, and then each of these logs is a level. They may have a message and some potentially some meta information. The other interesting things to note in this Prisma schema is that we've enabled the MongoDB preview feature and the data proxy preview feature. And so the data proxy is what we'll be actually connecting through, and it will allow us to scale up our Cloudflare worker deployment. So Cloudflare Workers by default will, you can have a hundred requests go to them and they will gracefully handle 100 requests, but your database may not be able to handle a hundred concurrent requests. And so the data proxy provides a way to kind of funnel and manage these connections to your database in an efficient way. And so we'll be deploying our Prisma client to the Cloudflare worker, and that can scale to as many as you want basically. And then that will actually connect through the data proxy, which will officially manage the connections for you seamlessly free to set up and everything. And then you may have like eight or 10 connections to actual MongoDB database. So it helps you with serverless deployments quite a bit. Okay. So we've set this up. I'll run npx prisma generate to generate a Prisma client for us. And the next thing I want to do is actually set up a private repo because we want to set up the data proxy for us here. So I'm going to create a private repository on GitHub. Let me pull this screen down here and I'll just name it Prisma MongoDB Cloudflare. Don't need a description. We'll make it private and we'll just go ahead and create that repository. Okay. Let's pull this back up. And now we're just going to kind of go through the get motions here. So we'll do get init and initialize get repo for this project and with the main branch. And then we're going to go ahead and add the repo to the remote so we can push up to it. I'm changing my username here and then I'll add all the files and create like an initial commit. And finally push up to that branch and let's just verify quickly. We'll be demoing GitHub a little bit here today. Yeah. So we've got our project up on GitHub, which is awesome. Pulling that away. Now I'm going to show you setting up the Prisma data platform, which is also free to set up. If you go to prisma.io, make this full screen here and just try Prisma in the cloud, basically. You'll be prompted with this screen here and we'll go continue to GitHub. And I've already got this set up, but it's free to set up on your end. And so I'm going to go ahead and create a new project here and I'll name it Prisma MongoDB Cloudflare. And I'm going to go ahead and import that repository we just created here. So Prisma MongoDB Cloudflare. Nope. I have quite a few repos, so it may take a bit. Interesting. Okay. We actually still, I have that project. I'm just going to flip the name around a bit. I guess I have that project too. Let me try this. Okay. Cloudflare Prisma MongoDB. Let's then do, I believe it, I named repo Prisma MongoDB Cloudflare. Perfect. And I'll name the, I use the main branch for this. And this takes a little bit of time. I'm not quite sure why, but we'll probably be working on this soon. Okay. Yeah. So it pulled it up here. So we verified that. And then our schema, which we initialized by default is in the right location. So we can keep that as is. And then I'm going to actually use my own database here. And so in the background, before I set up a MongoDB Atlas database here, they're also free to set up. You just kind of go through the, go to, I think it's like MongoDB and then Atlas and then yeah, products, Atlas. And then you just sign up. I've done that already and I've created a free test deployment here. And to get connected, you do connect and then connect your application. And then you'll get this. And then you want to go to, I think it's database access and you can go through here and get your credentials. So I'm going to show my credentials here, but I'll be deleting this database right after. So you can try it if you want. It's not going to work. So I'm going to go ahead and let's see, I'll pull this up here. We'll add this as a connection string. Normally you'd keep this private. You wouldn't broadcast this live to folks, but for our purposes, it's okay. And one thing I'll do is instead of first database here, I'll name it like logs or log. And here's the data proxy that I'm talking about. You can set it into either North Virginia or Frankfurt currently. We'll be opening new places where you can provision this in the future. And then I'm going to go ahead and create the project. And so awesome. It seems to be working properly. And so I'm going to reveal this here and copy it. And so this will be what we use to connect our Prisma clients to. So if you've used the Prisma client before, you would normally just put in the MongoDB connection string or the Postgres connection string or the MySQL connection string. Well, here's a new connection string that connects specifically to the data proxy, which then forwards requests efficiently to the MongoDB database. So I'm going to go ahead and take this and put this into our environment variable file here. And so this is kind of the one that was set up for us when we initialized Prisma. I'm going to copy and paste this in here. And that is set up basically. We should be good there. And so now I'm actually going to generate a Prisma client that we can use to build our worker with. So the way to do that is Prisma client engine type data proxy tells... It's an environment variable that essentially tells Prisma to generate a Cloudflare worker compatible Prisma client. And so by default, this is off. By default, Prisma uses a local binary, actually like a WASM, sorry, a node API library. So it's actually, it's a separate binary that is downloaded and installed. And we can communicate locally over that. But this kind of, by using this feature, you've kind of optimized it for serverless where it's like the binary is no longer there. You're actually connecting just through HTTPS to the data proxy. And so it's actually quite a smaller client as well, which is pretty cool. Especially in like environments like Cloudflare Workers, where you have size limits. Okay. So with all of that set up, we're actually ready to create our Cloudflare worker. And so if you recall, I specified in our web pack config that we'd be creating a entry file called source index.ts. And I'm just going to go ahead and copy and paste some code here. And what this code does is upon each Cloudflare request, it will run this function essentially. And this function, all it does is creates a new log entry, info log, and a request. It logs the method. So either get request, post request, delete. And then the request URL. And then in the meta field, it logs any headers. And then we respond with whatever the request method was. And so one of the interesting things about this is you kind of need to, because we're using, I guess, like global types, you just need to like kind of resave the TS config here. And then like it sorts it out, basically. So the red squigglies go away. And so one of the cool things, like since we've defined our Prisma schema here and we've defined the fields, you get this really like, I haven't shown this, but if you're new to Prisma, you get this like really nice type safe API. So like you can do create and then like everything kind of just fills in as you go, which is one of the awesome benefits of using Prisma over like maybe a traditional database client here. And we'll even tell you, hey, like you haven't specified a level yet. And like, here you go, like here are the options for all each of the levels you can do. So it's a pretty cool tool for doing that. And one more thing is like, as you're kind of iterating over time with Prisma, like say you actually change this like messages or something like that. And you run like, we'll run the generate command again here. Like, you'll see that like, this is no longer a valid too. So it gives you like really nice way to kind of incrementally, like safely iterate on your code over time. So I'll actually just bring that back to this and do this one more time, regenerate. Okay. So now that we've kind of set up this worker to log requests to the data proxy, which actually ends up in the MongoDB database, we'll be running MPX Wrangler dev. And this is just going to set up like a Cloudflare like, Cloudflare worker like environment locally. So we, it won't have like the node API, so it won't have the DOM. So we can be pretty confident if this works that, and then it will work in Cloudflare Workers. It's taken a bit to install. Actually, I think this is, this might be new. I don't remember seeing an installing like this, maybe just some logging, but it's pretty cool. Oh, nice. Okay. So it seems to have actually installed and then went ahead and started the dev server. So I'm going to go ahead and open this up. And awesome. So we're making get requests. I'll do a few more of these and it looks like it's working as expected, which is cool. Awesome. So that seems to be working locally. Let's try to actually deploy this to a Cloudflare worker. So I'm going to X out of that and then I'll run MPX Wrangler publish. And what this is going to do is it's going to like run this webpack config, compile this source index TS file. It's going to bring in like the node modules and all that stuff and package it up into like one JS file and then push that up to Cloudflare Workers. So awesome. It looks like we've got a URL here. So I'm going to go ahead and open this. It's taking a bit of... Oh, interesting. Let's see what is going on here. So log... I haven't actually encountered any bugs here. So I'm going to see if I can do this live. Let's see. So we're going to try to tail the logs here and see if we get anything interesting back. Okay. I don't know what happened, but it seemed to have taken a bit. Now it looks like we're actually good. So when I do get requests, it's going ahead and serving that, like logging that thing and responding with the get, which is cool. That's exactly what we wanted. And now just to verify like this working end to end, because there's quite a few moving pieces here. We've deployed to Cloudflare workers. That's using the Prisma client to talk to the data proxy and the data proxy is then talking to the MongoDB database. And so let's actually check to see if this is all working as we hope. So I've deployed this project. I've gotten the Prisma URL. So I'm going to hit done here. So we're taken to this new project area and we've got a couple of cool things that Prisma provides you out of the box. One is the data browser here. And so if I go to this log here, we're going to see, yes, indeed, we've been logging requests to MongoDB. And we can actually verify that. I'll show you in a second. But one of the cool things that I like to see from this is you actually get a little insight of how the browser works. So the browser makes a request to the favicon first when you're doing request logging, and then it will make a request to the index. So you get to see a bit of insight into how the browser works in this example. There's a bunch of other cool things you can do now that this is all set up. We've got this online like editor, which you can kind of use almost like a scratch pad to like test out different queries. And you can see like different ways this works and stuff. It's also like it works, let's see, like where level is info, for example. And it's also type safe. So you've got a bit of information about what the schema is that's been provided in a couple settings here. So we're going to be building this out quite a bit more in the future. But this is kind of like a sneak peek at how this works. And then the last thing I want to show is just that it is indeed working as expected. So I'm going to open up the compass, MongoDB compass here to see if the data actually made it to Mongo. It's not open for some reason. Let me try MongoDB compass one more time. Initializing. Okay. So this is like a different view into essentially the same thing. Pull that URL here. And so you'll see we've got this new database collection in here called log. And log contains these 38 entries or 36 entries. And so that's all I have for you today. If you have any questions about the whole flow or you want to try this yourself, we've got this guide that we published on the Prisma docs. It's right here. So like if you just go to like Prisma docs and then like you can probably you can just do a search actually for Cloudflare Workers. And then that's the first thing that'll pop up is this guide. And that's what I showed you today. It's really easy to set up and you can kind of maybe see while this is not like a production ready example or anything like that. You can see where you can take this pretty quickly. So yeah. That's all I've got. If you've got any other questions, feel free to like tweet at me, I guess. I'm at Matt Miller or just also tweet at Prisma as well. I'm sure we'll hear about it in some way. That's all I've got. Thanks a lot. Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai Transcribed by https://otter.ai have been able to manage Cloudflare on their own for more or less anything and everything. Cloudflare also empowers BookMyShow to manage its traffic across a complex, highly performant global infrastructure. We are running on not only hybrid, we are running on hybrid and multi -cloud strategy. Cloudflare is the entry point for our customers. Whether it is a cloud in the back end or it is our own data center in the back end, Cloudflare is always the first point of contact. We do load balancing as well as we have multiple data centers running. Data center selection happens on Cloudflare. It also gives us fine-grained control on how much traffic we can push to each data center depending upon what is happening in that data center and what is the capacity of the data center. We believe that our applications and our data centers should be closest to the customers. Cloudflare just provides us the right tools to do that. With Cloudflare, BookMyShow has been able to improve its security, performance, reliability, and operational efficiency. With customers like BookMyShow and over 20 million other domains that trust Cloudflare with their security and performance, we're making the Internet fast, secure, and reliable for everyone. Cloudflare, helping build a better Internet.