style guide updates

Author: aidankmcalister

src/content/docs/hyperdrive/tutorials/prisma-postgres.mdx

@@ -2,7 +2,7 @@
 updated: 2025-08-05
 difficulty: Beginner
 pcx_content_type: tutorial
-title: Prisma Postgres with Cloudflare Hyperdrive
+title: Build a Prisma Postgres application with Cloudflare Hyperdrive
 products:
   - Hyperdrive
 tags:
@@ -12,13 +12,13 @@ languages:
   - Prisma
 ---
 
-This tutorial shows you how to set up and use Prisma ORM with Cloudflare Hyperdrive to connect to a Prisma Postgres database from your Cloudflare Workers.
+This tutorial shows you how to set up and use Prisma ORM with Cloudflare Hyperdrive to connect to a Prisma Postgres database from your Cloudflare Workers. By the end of this tutorial, you'll have a fully functional Worker that can interact with a Prisma Postgres database using Prisma.
 
 ## Step 1: Create a new Cloudflare Workers project
 
 Create a new directory and initialize a Cloudflare Workers project:
 
-```bash
+```bash title="Create a new Workers project"
 npm create cloudflare@latest hyperdrive-prisma-postgres
 cd hyperdrive-prisma-postgres
 ```
@@ -31,30 +31,30 @@ Choose the following options:
 - Do you want to use git for version control? → `Yes`
 - Do you want to deploy your application to Cloudflare? → `No`
 
-## Step 2: Install dependencies
+## Step 2: Install Prisma and Hyperdrive dependencies
 
 Install the required dependencies for Prisma and Hyperdrive:
 
-```bash
+```bash title="Install dependencies"
 npm install @prisma/client @prisma/adapter-pg
 npm install -D prisma
 ```
 
-## Step 3: Set up Prisma
+## Step 3: Configure Prisma for your project
 
-### 1. Initialize Prisma in your project
+### Initialize Prisma in your project
 
 To initialize Prisma in your project, run the following command:
 
-```bash
+```bash title="Initialize Prisma"
 npx prisma init
 ```
 
-### 2. Update your `prisma/schema.prisma` file
+### Update your Prisma schema
 
 Update your `prisma/schema.prisma` file to have the `driverAdapters` preview feature enabled so that we can use the `@prisma/adapter-pg` package. Then, add a `Note` model:
 
-```prisma
+```prisma title="prisma/schema.prisma"
 generator client {
   provider        = "prisma-client-js"
   output          = "../src/generated/prisma"
@@ -73,47 +73,51 @@ model Note {
 }
 ```
 
-### 3. Set up environment variables
+### Set up environment variables
 
-To get a Prisma Postgres connection string, you can use `npx create-db@latest` to create a new database. This database **must** be claimed within 24 hours or it will be deleted.
+To get a Prisma Postgres connection string, you can use `npx create-db@latest` to create a new database.
+
+:::caution[Database expiration]
+This database **must** be claimed within 24 hours or it will be deleted.
+:::
 
 Once you have a database, copy the database labeled **_Use this database for everything else_**. Then, open the `.env` file and set the `DATABASE_URL` variable to your database connection string.
 
-```env
+```txt title=".env"
 DATABASE_URL="..."
 ```
 
-### 4. Generate Prisma client and run migrations
+### Generate Prisma client and run migrations
 
 Generate the Prisma client with the custom output path:
 
-```bash
+```bash title="Generate Prisma client"
 npx prisma generate
 ```
 
 Create and run your database migrations:
 
-```bash
+```bash title="Create and run migrations"
 npx prisma migrate dev --name init
 ```
 
 This will create the `Note` table in your database.
 
-## Step 4: Create a Hyperdrive database
+## Step 4: Create a Hyperdrive database connection
 
 Create a Hyperdrive database by running the wrangler hyperdrive create command and passing in your database connection string:
 
-```bash
+```bash title="Create Hyperdrive database"
 npx wrangler hyperdrive create hyperdrive-prisma-postgres --connection-string="..."
 ```
 
 ## Step 5: Configure your Worker
 
-### 1. Update your `wrangler.jsonc` file
+### Update your Wrangler configuration
 
 Update your `wrangler.jsonc` file to include the Hyperdrive binding, and set the `compatibility_flags` to `nodejs_compat`:
 
-```jsonc
+```jsonc title="wrangler.jsonc"
 {
 	"$schema": "node_modules/wrangler/config-schema.json",
 	"name": "hyper-test",
@@ -134,15 +138,15 @@ Update your `wrangler.jsonc` file to include the Hyperdrive binding, and set the
 
 Replace `<YOUR-HYPERDRIVE-DATABASE-ID>` with the actual ID from your Hyperdrive database returned by the `wrangler hyperdrive create` command in the previous step.
 
-### 2. Create your Worker code
+### Create your Worker code
 
 Create your main Worker file at `src/index.ts`. This Worker will create a new note every time it's called and return all existing notes.
 
-### 3. Set up imports and environment interface
+#### Set up imports and environment interface
 
 To start, we'll set up the imports and environment interface.
 
-```typescript
+```typescript title="src/index.ts - Imports and environment"
 import { PrismaPg } from "@prisma/adapter-pg";
 import { PrismaClient } from "./generated/prisma";
 
@@ -151,23 +155,23 @@ export interface Env {
 }
 ```
 
-### 4. Create a database connection helper
+#### Create a database connection helper
 
 Next, we'll create a database connection helper using the `PrismaPg` adapter.
 
-```typescript
+```typescript title="src/index.ts - Database connection helper"
 export const getDb = (env: Env) => {
 	const connectionString = env.HYPERDRIVE.connectionString;
 	const adapter = new PrismaPg({ connectionString, maxUses: 1 });
 	return new PrismaClient({ adapter });
 };
 ```
 
-### 5. Implement the Worker handler
+#### Implement the Worker handler
 
 Finally, we'll implement the Worker handler which will create a new note every time it's called and return all existing notes.
 
-```typescript
+```typescript title="src/index.ts - Worker handler"
 export default {
 	async fetch(request, env, ctx): Promise<Response> {
 		const prisma = getDb(env);
@@ -186,12 +190,37 @@ export default {
 } satisfies ExportedHandler<Env>;
 ```
 
-## Step 6: Deploy to Cloudflare
+## Step 6: Deploy your Worker to Cloudflare
 
 Deploy your Worker to Cloudflare:
 
-```bash
+```bash title="Deploy to Cloudflare"
 npm run deploy
 ```
 
 The console will display a URL for your worker. Visit that URL to see a JSON response containing your note. On every refresh, a new note will be created.
+
+## Next steps
+
+You have successfully created a Cloudflare Worker that uses Prisma ORM with Hyperdrive to connect to a Prisma Postgres database. Your Worker can now:
+
+- Create new notes in the database
+- Retrieve all existing notes
+- Handle database connections efficiently through Hyperdrive
+
+To extend your application, consider:
+
+- Adding more CRUD operations (update, delete)
+- Implementing user authentication
+- Adding input validation
+- Creating a frontend interface
+- Setting up proper error handling
+
+## Related resources
+
+- [Hyperdrive documentation](/hyperdrive/)
+- [Prisma documentation](https://www.prisma.io/docs)
+- [Cloudflare Workers documentation](/workers/)
+- [More Hyperdrive tutorials](/hyperdrive/tutorials/)
+
+If you have any questions, need assistance, or would like to share your project, join the Cloudflare Developer community on [Discord](https://discord.cloudflare.com) to connect with other developers and the Cloudflare team.