docs icon indicating copy to clipboard operation
docs copied to clipboard

[do not merge] Broken MDX expandable component

Open nikolasburk opened this issue 1 year ago • 1 comments

This PR just serves to demonstrate how an expandable component breaks when it has certain kinds of content in it. See the route: /orm/prisma-client/deployment/edge/deploy-to-cloudflare-workers

This is the place where the expandable section starts: https://github.com/prisma/docs/blob/broken-mdx/content/200-orm/200-prisma-client/500-deployment/301-edge/450-deploy-to-cloudflare-workers.mdx#L123

<details><summary>Expand to see step-by-step deployment instructions</summary>

The following steps are the instructions to deploy the Cloudflare Worker.

#### 1. Configure Prisma schema & database connection

First, ensure that database connection is configured properly. In your Prisma schema, set the `url` of the `datasource` block to the `DATABASE_URL` environment variable. You also need to enable the `driverAdapters` feature flag:

```prisma file=schema.prisma
generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
```

Next, you need to set the `DATABASE_URL` environment variable to the value of your database connection string. You'll do this in a file called `.dev.vars` used by Cloudflare:

```bash file=.dev.vars
DATABASE_URL="postgresql://admin:[email protected]:5432/mydb"
```

Because the Prisma CLI by default is only compatible with `.env` files, you can adjust your `package.json` with the following script that loads the env vars from `.dev.vars`. You can then use this script to load the env vars before executing a `prisma` command.

Add this script to your `package.json`:

```js file=package.json highlight=5;add
{
  // ...
  "scripts": {
    // ....
    "env": "dotenv -e .dev.vars"
  },
  // ...
}
```

Now you can execute Prisma CLI commands as follows while enusring that the command has access to the env vars in `.dev.vars`:

```terminal
npm run env -- npx prisma
```

#### 2. Install dependencies

Next, install the required packages:

```terminal
npm install @prisma/adapter-pg
npm install pg
npm install @types/pg --save-dev # if you're using TypeScript
```

#### 3. Set `node_compat = true` in `wrangler.toml`

In your `wranger.toml` file, add the following line:

```toml file=wranger.toml
node_compat = true
```

#### 4. Migrate your database schema (if applicable)

If you ran `npx prisma init` above, you need to migrate your database schema to create the `User` table that's defined in your Prisma schema (if you already have all the tables you need in your database, you can skip this step):

```terminal
npm run env -- npx prisma migrate dev --name init
```

#### 5. Use Prisma Client in your Worker to send a query to the database

Here is a sample code snippet that you can code to instantiate `PrismaClient` and send a query to your database:

```ts
import { PrismaClient } from '@prisma/client'
import { PrismaPg } from '@prisma/adapter-pg'
import { Pool } from 'pg'

export interface Env {
  DATABASE_URL: string
}

export default {
  async fetch(_: any, env: Env) {
    const pool = new Pool({ connectionString: env.DATABASE_URL })
    const adapter = new PrismaPg(pool)
    const prisma = new PrismaClient({ adapter })

    const users = await prisma.user.findMany()
    const result = JSON.stringify(users)
    return new Response(result)
  },
}
```

#### 6. Run the Worker locally

To run the Worker locally, you can run the `wrangler dev` command:

```terminal
npx wrangler dev
```

#### 7. Set the `DATABASE_URL` environment variable and deploy the worker

To deploy the worker, you first need to the `DATABASE_URL` environment variable [via the `wrangler` CLI](https://developers.cloudflare.com/workers/configuration/secrets/#secrets-on-deployed-workers):

```terminal
npx wrangler secret put DATABASE_URL
```

The command is interactive and will ask you to enter the value for the `DATABASE_URL` env var as the next step in the terminal.

> **Note**: This command requires you to be authenticated, and will ask you to log in to your Cloudflare account in case you are not.

Then you can go ahead then deploy the worker:

```terminal
npx wrangler deploy
```

</details>

If I remove all the content from the expandable section, the page and the build are working.

nikolasburk avatar Mar 05 '24 08:03 nikolasburk

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ❌ Failed (Inspect) Mar 5, 2024 8:15am

vercel[bot] avatar Mar 05 '24 08:03 vercel[bot]

@nikolasburk not urgent, but with the switch to Docusaurus do you think we can close this PR?

jharrell avatar Apr 20 '24 08:04 jharrell