Deploy to Cloudflare Workers
Today you'll be building and deploying a Cloudflare Worker that uses Prisma to save every request to a MongoDB database for inspection later.
This guide covers Prisma, TypeScript, MongoDB, Data Proxy, and Cloudflare Workers from the ground up. Let's get started!
Note
We are continuously testing the Data Proxy with Cloudflare Workers. Open an issue if you run into problems or have questions about deploying to Cloudflare Workers.
Prerequisites
- Free MongoDB Atlas account
- Free Cloudflare Workers account
- Free GitHub account
- Node.js & NPM installed
- Git installed
1. Get a MongoDB Atlas connection string
After you create a MongoDB Atlas database cluster, you can get its connection string. By default, that connection string does not include a database name.
When you import your project in the Prisma Data Platform at step 6, you must provide a connection string that includes a database name.
However, you do not need to manually create a database in MongoDB Atlas. The project creation workflow in the Prisma Data Platform will create a database with the name you define in the connection string.
Create a free shared cluster in MongoDB Atlas.
On the Security Quickstart screen, complete the initial security configuration.
- Add a new database user.
- Click Add My Current IP Address so that you can connect to the MongoDB shared cluster from your current system.
- Click Finish and Close.
Paste the connection string in a text editor and add the collection name
Log
.The code sample below shows a connection string, that is originally provided by MongoDB Atlas, with the database name now added.
# The first line is a default-style MongoDB Atlas connection string.# The second line includes the inserted `Log` database name.mongodb+srv://<user>:<password>@cluster.mongodb.net/?retryWrites=true&w=majoritymongodb+srv://<user>:<password>@cluster.mongodb.net/Log?retryWrites=true&w=majority
You now have a complete connection string. You will paste the connection string when you create your project in 6. Import your project into the Prisma Data Platform.
For security reasons, do not keep the connection string in the text editor or save it in a text file.
2. Set up your application
Open your terminal and navigate to a location of your choice. Run the following commands to set up your application.
$mkdir prisma-mongodb-cloudflare$cd prisma-mongodb-cloudflare$npm init -y$npm install -D prisma typescript wrangler
3. Set up Wrangler
Wrangler is the official Cloudflare Worker CLI. You will use it to develop and deploy to Cloudflare Workers. This guide uses Wrangler v2.
First, initialize Wrangler. To do this, run the following command in your terminal:
$npx wrangler init
This will ask you a few questions.
$Would you like to use git to manage this Worker? (y/n)
We want to use Git, so answer yes.
$Would you like to use TypeScript? (y/n)
We also want to use TypeScript, so answer yes.
$Would you like to create a Worker at src/index.ts?
Select the Fetch Handler
option.
Once you're done, this will create a wrangler.toml
file with some initial configuration.
Next, authenticate the Wrangler CLI with your Cloudflare Workers account. To do this, run the following command in your terminal:
$npx wrangler login
You can now verify that you're logged in by running npx wrangler whoami
.
$npx wrangler whoami
4. Set up Prisma
Now you're ready to add Prisma to the project.
$npx prisma init
This creates a Prisma schema in prisma/schema.prisma
.
.env
file, but this file has no effect when you use Cloudflare Workers.Inside prisma/schema.prisma
, add the following schema:
generator client {provider = "prisma-client-js"}datasource db {provider = "mongodb"url = env("DATABASE_URL")}model Log {id String @id @default(auto()) @map("_id") @db.ObjectIdlevel Levelmessage Stringmeta Json}enum Level {InfoWarnError}
This data model will be used to store incoming requests from your Worker.
5. Create a repository and push to GitHub
To prepare for the steps ahead, let's create a private repository on GitHub.
Next, initialize your repository, then push your changes up to GitHub.
$git remote add origin https://github.com/<username>/prisma-mongodb-cloudflare$git add .$git commit -m "initial commit"$git push -u origin main
You're ready to import your project into the Prisma Data Platform.
6. Import your Project into the Prisma Data Platform
With Cloudflare Workers, you can't directly access your database because there is no TCP support. Fortunately, Prisma has your back with the Data Proxy.
To get started, sign up for a free Prisma Data Platform account.
Note
A GitHub account is required to sign up for the Prisma Data Platform.Click New Project and then select Import a Prisma repository.
Fill in the repository and project details, and click Next.
Next, you connect the Prisma Data Platform to the MongoDB Atlas database and set up the Data Proxy.
Paste the MongoDB Atlas connection string which also includes the database name as described in 1. Get a MongoDB Atlas connection string.
Under Location, select a Data Proxy location that is geographically close to your MongoDB database location.
Enable Static IPs and copy and paste them in the Network Access screen in MongoDB Atlas.
Click Create Project to test the connection and set up the Data Proxy.
If you see, "The database needs to be empty to proceed", you can simply use a different database name. Using the screenshot above, that would be renaming
Log
to something else.If all goes well, you'll be greeted with a new connection string that starts with
prisma://
.Copy the
prisma://
connection string to your clipboard.
7. Set the Data Proxy Connection string in your environment
Add the Data Proxy connection string to your local environment
.env
file..env- DATABASE_URL = "mongodb+srv://<user>:<password>@cluster.mongodb.net/Log?retryWrites=true&w=majority"+ DATABASE_URL = "prisma://aws-us-east-1.prisma-data.com/?api_key=•••••••••••••••••"In your code editor, add the connection string in the
wrangler.toml
file.wrangler.toml1 name = "prisma-mongodb-cloudflare"2 main = "src/main.ts"3 compatibility_date = "2022-11-07"4+ [vars]+ DATABASE_URL = "prisma://aws-us-east-1.prisma-data.com/?api_key=•••••••••••••••••"
You are now ready to generate a Prisma Client.
8. Generate a Prisma Client
Next, you'll generate a Prisma Client that connects through the Data Proxy over HTTP.
$npx prisma generate --no-engine
--no-engine
flag is not available. Instead, use the --data-proxy
flag.$npx prisma generate --data-proxy
The generated Client has a smaller bundle size and is optimized for edge environments like Cloudflare Workers.
The smaller bundle size is due to the fact that the interfaces talking to the database (the Prisma engines) are no longer bundled with Prisma Client as this logic is now handled by the Data Proxy.
9. Develop the Cloudflare Worker function
You're now ready to create a Cloudflare Worker. Create a src/index.ts
file with the following code:
import { PrismaClient } from '@prisma/client/edge'const prisma = new PrismaClient()addEventListener('fetch', (event) => {event.respondWith(handleEvent(event))})async function handleEvent(event: FetchEvent): Promise<Response> {const { request } = event// waitUntil method is used for sending logs, after response is sentevent.waitUntil(prisma.log.create({data: {level: 'Info',message: `${request.method} ${request.url}`,meta: {headers: JSON.stringify(request.headers),},},}).then())return new Response(`request method: ${request.method}!`)}
Run npx wrangler dev
to see your worker in development:
👂 Listening on http://127.0.0.1:8787
Go ahead and open http://127.0.0.1:8787
. If all goes well, you should see:
request method: GET!
Refresh the page a couple times to verify that it's working. Now if you click on the Data Browser tab on your Prisma Cloud project, you should see Info
logs written to your database.
It's working locally!
10. Publish to Cloudflare Workers
You're now ready to deploy to Cloudflare Workers. Run the following command:
$npx wrangler publish
This will pack your application with webpack and upload to Cloudflare. With a bit of luck, you'll see the following:
✨ Built successfully, built project size is 94 KiB.✨ Successfully published your script tohttps://prisma-mongodb-cloudflare.mattm.workers.dev
Visit your deployment URL and you'll again see:
request method: GET!
You're all set! You've successfully deployed a Cloudflare Worker written in TypeScript that uses Prisma to talk to your MongoDB database.
Give yourself a pat on the back, you deserve it!