Skip to content

Commit b232dac

Browse files
ankur-archclaude
andcommitted
Getting started: single dominant golden path, collapsed alternate setups, CodeRabbit fixes
Landing page hierarchy per product feedback (too many competing paths): - Hero pitch now defines Prisma before naming versions, keeps one primary CTA (tutorial); secondary CTA becomes "Prisma 7 docs" so existing users exit early without a competing journey. Stack layers link to product overviews instead of three different setup flows. - One-line bridge above the tabs card ties it to the tutorial (same journey, condensed); CLI deploy step discloses the free-account sign-in. - Framework picker reframed as a step in the same journey; SvelteKit/Deno local-only caveat stated up front instead of inside the prompt only. - Prisma 7 section moved above alternates; five alternate-path prompt rows now sit behind a native <details> disclosure (content stays in static HTML and .md output, keyboard accessible). - /next drops the duplicate "What you can try" card block; /next/getting-started drops the duplicate Prisma Postgres section; /getting-started leads with the recommended quickstart and folds deploy into its own section. - Fill empty Prerequisites on the Prisma 7 Prisma Postgres quickstart. CodeRabbit findings: - Template-to-guide slug mapping in the deploy step of the hero prompt (next/nest/svelte no longer produce dead .md URLs). - Framework guide prompts run the dev server in the background, wait for readiness, and stop it after verification. - TanStack Start guide: garbled npm fence replaced with `npm install nitro`. - llm-markdown: fenced code is protected before all component transforms (prefix-aware restore replays dedent/blockquote shifts on fence lines), and GetStartedTabs parses via the brace-aware component parser so `>` inside the cli template literal cannot truncate the match. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent 73fc18d commit b232dac

14 files changed

Lines changed: 141 additions & 129 deletions

File tree

apps/docs/content/docs/(index)/getting-started.mdx

Lines changed: 18 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,60 +6,44 @@ metaTitle: Prisma 7 getting started
66
metaDescription: Choose the fastest Prisma 7 setup path. Quickstarts and existing-project guides for Prisma ORM 7, Prisma Postgres, and Prisma Compute, plus an agent prompt.
77
---
88

9-
Prisma 7 is the current generally available release of Prisma ORM, and `npx prisma@latest init` installs it. This page collects the Prisma 7 starting points: deploy an app, create a database, use Prisma ORM locally, or add Prisma to an existing project.
9+
Prisma 7 is the current generally available release of Prisma ORM, and `npx prisma@latest init` installs it. This page collects the Prisma 7 starting points: start a new project, add Prisma to an existing one, then deploy.
1010

1111
:::note
1212

13-
Starting a new project? [Prisma Next](/next) is the recommended path for new apps. It is the next major version of Prisma ORM (soon Prisma 8), available now in Early Access. The [getting started page](/) walks the full stack path.
13+
Starting a new project? [Prisma Next](/next) is the recommended path for new apps. It is the next major version of Prisma ORM (soon Prisma 8), available now in Early Access. The [getting started page](/) covers it.
1414

1515
:::
1616

17-
## Choose your path
17+
## Start a new project
1818

19-
### Deploy a full-stack app with a database
19+
The recommended path is the [Quickstart with Prisma Postgres](/prisma-orm/quickstart/prisma-postgres): it provisions a managed PostgreSQL database for you and gets you from install to first query in about five minutes.
2020

21-
Use this path if you want to deploy a TypeScript app with Prisma Compute and run it alongside Prisma Postgres.
21+
Working with a specific database instead?
2222

23-
- [Deploy your first app](/prisma-compute/deploy) on [Prisma Compute](/compute), currently in Public Beta, to run it next to your Prisma Postgres database
24-
25-
### Start a new project
26-
27-
Use this path if you are creating a new app and want to set up Prisma from the beginning.
28-
29-
- [Quickstart with Prisma Postgres](/prisma-orm/quickstart/prisma-postgres) for the fastest end-to-end path with a managed PostgreSQL database
30-
- [Quickstart with PostgreSQL](/prisma-orm/quickstart/postgresql) if you want to work with PostgreSQL
23+
- [Quickstart with PostgreSQL](/prisma-orm/quickstart/postgresql)
3124
- [Quickstart with SQLite](/prisma-orm/quickstart/sqlite) for a lightweight local setup
32-
- [Quickstart with MySQL](/prisma-orm/quickstart/mysql) if your application uses MySQL
33-
- [Quickstart with MongoDB](/prisma-orm/quickstart/mongodb) if your application uses MongoDB
25+
- [Quickstart with MySQL](/prisma-orm/quickstart/mysql)
26+
- [Quickstart with MongoDB](/prisma-orm/quickstart/mongodb)
3427

35-
### Add Prisma to an existing project
28+
## Add Prisma to an existing project
3629

37-
Use this path if you already have an application or database and want to add Prisma ORM.
30+
Use these guides if you already have an application or database and want to add Prisma ORM:
3831

3932
- [Add Prisma ORM to an existing PostgreSQL project](/prisma-orm/add-to-existing-project/postgresql)
4033
- [Add Prisma ORM to an existing MySQL project](/prisma-orm/add-to-existing-project/mysql)
4134
- [Add Prisma ORM to an existing SQLite project](/prisma-orm/add-to-existing-project/sqlite)
4235
- [Add Prisma ORM to an existing MongoDB project](/prisma-orm/add-to-existing-project/mongodb)
4336
- [Add Prisma ORM to an existing Prisma Postgres project](/prisma-orm/add-to-existing-project/prisma-postgres)
4437

45-
## What you will do
46-
47-
Most Prisma ORM and Prisma Postgres guides follow the same basic flow:
38+
## Deploy to Prisma Compute
4839

49-
1. Define a database connection and data model in your [Prisma schema](/orm/prisma-schema/overview).
50-
2. Set up your database, either with [Prisma Postgres](/postgres) or another supported database.
51-
3. Install Prisma CLI and [Prisma Client](/orm/prisma-client).
52-
4. Run `prisma generate` to create a type-safe client for your schema.
53-
5. Create or introspect your database.
54-
6. Start sending queries from your application.
55-
56-
Then you can deploy your app to [Prisma Compute](/compute). The flow is:
40+
Once your app runs locally, [Prisma Compute](/compute) (currently in Public Beta) runs it next to your Prisma Postgres database:
5741

5842
1. Sign in with `npx @prisma/cli@latest auth login`.
59-
2. Run `npx @prisma/cli@latest app deploy` from your app directory to get a live URL.
60-
3. Connect your app to [Prisma Postgres](/postgres) or another database with [environment variables](/compute/environment-variables).
61-
4. Redeploy to apply the environment variables.
62-
5. Keep deploying from the CLI, or [connect GitHub](/compute/github) to deploy on push.
43+
2. Run `npx @prisma/cli@latest app deploy` from your app directory to get a live URL, adding `--env .env` so environment variables like `DATABASE_URL` reach the deployment.
44+
3. Keep deploying from the CLI, or [connect GitHub](/compute/github) to deploy on push.
45+
46+
The [deploy guide](/prisma-compute/deploy) covers build settings, frameworks, and troubleshooting.
6347

6448
## Use with your agent
6549

@@ -87,12 +71,7 @@ Current docs: https://www.prisma.io/docs/getting-started.md and https://www.pris
8771
After setup, these pages are usually the next ones people need:
8872

8973
- [Prisma Client overview](/orm/prisma-client)
90-
- [Generating Prisma Client](/orm/prisma-client/setup-and-configuration/generating-prisma-client)
9174
- [Prisma Migrate getting started](/orm/prisma-migrate/getting-started)
9275
- [Prisma schema overview](/orm/prisma-schema/overview)
93-
94-
## If you want the fastest path
95-
96-
- [Quickstart with Prisma Postgres](/prisma-orm/quickstart/prisma-postgres) if you want Prisma to provision the database layer for you
97-
- [Open Prisma Studio](/studio/getting-started) if you want to inspect and edit data visually once your app is running
98-
- [Review pricing](https://www.prisma.io/pricing) if you're evaluating Prisma Postgres or other paid workflows for a team
76+
- [Open Prisma Studio](/studio/getting-started) to inspect and edit data visually
77+
- [Review pricing](https://www.prisma.io/pricing) if you're evaluating Prisma Postgres for a team

apps/docs/content/docs/(index)/index.mdx

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,37 @@ full: true
1010

1111
<HeroGrid>
1212
<HeroPitch
13-
badge="Recommended"
13+
badge="Recommended path"
1414
primaryHref="/next/full-stack-tutorial"
1515
primaryLabel="Start the full-stack tutorial"
16-
secondaryHref="/prisma-compute/deploy"
17-
secondaryLabel="Deploy your first app"
16+
secondaryHref="/getting-started"
17+
secondaryLabel="Prisma 7 docs"
1818
>
19-
Build and ship with the complete Prisma stack: [Prisma Next](/next) (soon Prisma 8) to model and query your data, [Prisma Postgres](/postgres) to store it, and [Prisma Compute](/compute) to run your app next to it. One scaffold command wires up all three, for you and your coding agent.
19+
Prisma is a complete TypeScript stack for building with data: [Prisma ORM](/orm) to model and query it, [Prisma Postgres](/postgres) to store it, and [Prisma Compute](/compute) to run your app next to it. Start new projects with [Prisma Next](/next), the next major version of the ORM and soon Prisma 8: one scaffold command wires up all three, for you or your coding agent.
2020
</HeroPitch>
2121
<StackDiagram caption="One project. Type-safe, end to end.">
22-
<StackLayer title="Prisma Compute" href="/prisma-compute/deploy" icon={<Cpu />}>
23-
Deploy your app. Public Beta.
22+
<StackLayer title="Prisma Compute" href="/compute" icon={<Cpu />}>
23+
Deploy and host your app. Public Beta.
2424
</StackLayer>
25-
<StackLayer title="Prisma Next" href="/next/quickstart/postgresql" icon={<Sparkles />}>
26-
Model and query. The next major version of Prisma ORM, soon Prisma 8. Early Access.
25+
<StackLayer title="Prisma Next" href="/next" icon={<Sparkles />}>
26+
Model and query your data. The next Prisma ORM, soon Prisma 8. Early Access.
2727
</StackLayer>
28-
<StackLayer title="Prisma Postgres" href="/prisma-postgres/quickstart/prisma-next" src="/img/technologies/prisma-postgres.svg">
28+
<StackLayer title="Prisma Postgres" href="/postgres" src="/img/technologies/prisma-postgres.svg">
2929
Store your data, provisioned during setup.
3030
</StackLayer>
3131
</StackDiagram>
3232
</HeroGrid>
3333

34+
The tutorial's journey, condensed: hand the prompt to your coding agent, or run the CLI steps yourself.
35+
3436
<GetStartedTabs cli={`# Scaffold the app
3537
npx create-prisma@next
3638
# Initialize, seed, and run
3739
cd my-app
3840
npm run db:init
3941
npm run db:seed
4042
npm run dev
41-
# Deploy to a live URL
43+
# Deploy to a live URL (free account, browser sign-in)
4244
npx @prisma/cli@latest app deploy --env .env`}>
4345

4446
```text
@@ -50,14 +52,14 @@ If I have not told you which framework, stop and ask before scaffolding. Valid -
5052
2. From the project directory, apply the starter contract and seed: `npm run db:init`, then `npm run db:seed`. If seeding fails with `Cannot read properties of undefined (reading 'where')`, change `db.orm.User` to `db.orm.public.User` in `src/prisma/seed.ts`, `src/prisma/users.ts`, and any route files that query `db.orm`, then rerun.
5153
3. Edit the starter contract under `src/prisma/` into a small schema for my use case, then run `npm run contract:emit` and plan and apply the migration: `npx prisma-next migration plan`, then `npx prisma-next migrate --yes`. Migration planning diffs the emitted contract, so the emit step is required.
5254
4. Update the seed script and the app routes to query the new schema, start `npm run dev` in the background, and verify with a request against the running app. For the `nest` template, if routes return 500s with `reading 'findAll'` in the logs, add explicit `@Inject()` tokens as shown in https://www.prisma.io/docs/guides/next/frameworks/nestjs.md.
53-
5. Deploy with Prisma Compute. First apply the framework's deploy requirement from https://www.prisma.io/docs/guides/next/frameworks/[framework].md: Next.js needs `output: "standalone"` in `next.config.ts` (without it the deployed app returns 504s), TanStack Start needs the nitro build plugin, Astro needs the `@astrojs/node` adapter plus `--env HOST=0.0.0.0`, and Elysia needs `--framework bun --entry src/index.ts` on the deploy command. If the template is `svelte`, skip this step; Compute does not support SvelteKit yet. Check `npx @prisma/cli@latest auth whoami`. If I am not signed in, stop and ask me to run `npx @prisma/cli@latest auth login`, because that step opens a browser. Then run `npx @prisma/cli@latest app deploy --env .env` so DATABASE_URL reaches the deployment, and verify the deployed URL with curl.
55+
5. Deploy with Prisma Compute. First apply the framework's deploy requirement from the guide at https://www.prisma.io/docs/guides/next/frameworks/[guide].md, where [guide] is the template name except: template `next` → guide `nextjs`, `nest` → `nestjs`, `svelte` → `sveltekit`. The requirements: Next.js needs `output: "standalone"` in `next.config.ts` (without it the deployed app returns 504s), TanStack Start needs the nitro build plugin, Astro needs the `@astrojs/node` adapter plus `--env HOST=0.0.0.0`, and Elysia needs `--framework bun --entry src/index.ts` on the deploy command. If the template is `svelte`, skip this step; Compute does not support SvelteKit yet. Check `npx @prisma/cli@latest auth whoami`. If I am not signed in, stop and ask me to run `npx @prisma/cli@latest auth login`, because that step opens a browser. Then run `npx @prisma/cli@latest app deploy --env .env` so DATABASE_URL reaches the deployment, and verify the deployed URL with curl.
5456
5557
Use the installed Prisma Next skills and the current Prisma docs: https://www.prisma.io/docs/llms.txt (append `.md` to any docs URL for a markdown version).
5658
```
5759

5860
</GetStartedTabs>
5961

60-
<SectionRow title="Add Prisma to your framework" description="Every guide covers the same journey: scaffold, connect Prisma Postgres, run a real query, and deploy where the framework is supported on Compute.">
62+
<SectionRow title="Pick your framework" description="Every guide runs the same journey with the same commands: scaffold, connect Prisma Postgres, run a real query, and deploy. SvelteKit and Deno don't deploy to Compute yet; their guides stop at a verified local run.">
6163

6264
<IconGrid columns={3}>
6365
<IconLink href="/guides/next/frameworks/nextjs" title="Next.js" src="/img/technologies/nextjs.svg" invertDark />
@@ -72,11 +74,26 @@ Use the installed Prisma Next skills and the current Prisma docs: https://www.pr
7274
<IconLink href="/guides/next/runtimes/deno" title="Deno" src="/img/technologies/deno.svg" invertDark />
7375
</IconGrid>
7476

75-
If you're using Express or another Node.js server, follow the [existing-project path](/next/add-to-existing-project/postgresql). The [full-stack tutorial](/next/full-stack-tutorial) walks the whole journey step by step with expected output.
77+
If you're using Express or another Node.js server, follow the [existing-project path](/next/add-to-existing-project/postgresql) instead.
78+
79+
</SectionRow>
80+
81+
<SectionRow title="Using Prisma 7?" description="Prisma 7 is the current generally available release of Prisma ORM, fully supported, and `npx prisma@latest init` installs it. It pairs with Prisma Postgres and Prisma Compute the same way. When you're ready, Prisma Next is the path to Prisma 8.">
82+
83+
<IconGrid>
84+
<IconLink href="/getting-started" title="Prisma 7 setup paths" description="All database quickstarts, plus the agent prompt" icon={<Milestone />} />
85+
<IconLink href="/prisma-orm/quickstart/prisma-postgres" title="Prisma 7 quickstart" description="With Prisma Postgres" badge="5 min" icon={<Database />} />
86+
</IconGrid>
7687

7788
</SectionRow>
7889

79-
<SectionRow title="More setup paths" description="Each path has a guide to follow and a prompt to hand to your agent.">
90+
<SectionRow title="Other setups" description="Already have an app or a database, or need a single Prisma product on its own? Each path has a guide to follow and a prompt to hand to your agent.">
91+
92+
{/* Native <details> keeps the collapsed paths in the static HTML for crawlers
93+
and agents, and stays keyboard-accessible without client JS. */}
94+
95+
<details className="group rounded-xl border bg-fd-card px-4 py-1 open:pb-3">
96+
<summary className="cursor-pointer select-none py-2.5 text-sm font-medium text-fd-foreground marker:text-fd-muted-foreground hover:text-fd-primary">Existing project, your own database, or a single product (ORM, Postgres, or Compute) on its own</summary>
8097

8198
<AgentPrompt title="Add Prisma to an existing project" guideHref="/next/add-to-existing-project/postgresql" guideTitle="PostgreSQL guide" icon={<FolderPlus />}>
8299

@@ -159,14 +176,7 @@ Current docs: https://www.prisma.io/docs/prisma-compute/deploy.md.
159176

160177
If you're using MongoDB, follow the [MongoDB quickstart](/next/quickstart/mongodb) or [add Prisma Next to an existing MongoDB app](/next/add-to-existing-project/mongodb). If you work with [Kysely](/prisma-postgres/quickstart/kysely), [Drizzle](/prisma-postgres/quickstart/drizzle-orm), or [TypeORM](/prisma-postgres/quickstart/typeorm), the Prisma Postgres quickstarts cover those tools.
161178

162-
</SectionRow>
163-
164-
<SectionRow title="Using Prisma 7?" description="Prisma 7 is the current generally available release of Prisma ORM, and `npx prisma@latest init` installs it. It pairs with Prisma Postgres and Prisma Compute the same way. When you're ready, Prisma Next is the path to Prisma 8.">
165-
166-
<IconGrid>
167-
<IconLink href="/getting-started" title="Prisma 7 setup paths" description="All database quickstarts, plus the agent prompt" icon={<Milestone />} />
168-
<IconLink href="/prisma-orm/quickstart/prisma-postgres" title="Prisma 7 quickstart" description="With Prisma Postgres" badge="5 min" icon={<Database />} />
169-
</IconGrid>
179+
</details>
170180

171181
</SectionRow>
172182

apps/docs/content/docs/(index)/next/getting-started.mdx

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ npx create-prisma@next
2020
The whole journey in one sitting: scaffold, Prisma Postgres, first query, and a Prisma Compute deploy.
2121
</Card>
2222
<Card href="/next/quickstart/postgresql" title="Quickstart with PostgreSQL" icon={<Database className="text-primary" />}>
23-
Create the app, choose PostgreSQL, initialize the database, seed data, and run the first query.
23+
Create the app, pick Prisma Postgres (provisioned for you) or your own PostgreSQL, seed data, and run the first query.
2424
</Card>
2525
<Card href="/next/quickstart/mongodb" title="Quickstart with MongoDB" icon={<Database className="text-primary" />}>
2626
Create the app, choose MongoDB, start or connect to MongoDB, seed data, and run the first query.
@@ -44,21 +44,6 @@ Use the installed Prisma Next skills and the current Prisma docs: https://www.pr
4444

4545
</AgentPrompt>
4646

47-
## Use Prisma Postgres
48-
49-
```npm
50-
npx create-prisma@next
51-
```
52-
53-
<Cards>
54-
<Card href="/prisma-postgres/quickstart/prisma-next" title="Quickstart with Prisma Postgres" icon={<Database className="text-primary" />}>
55-
Create a Prisma Next app and let setup provision Prisma Postgres for the first run.
56-
</Card>
57-
<Card href="/next/prisma-postgres/from-the-cli" title="From the CLI" icon={<Terminal className="text-primary" />}>
58-
Start from the command line when you want the Prisma Postgres path without browsing Console first.
59-
</Card>
60-
</Cards>
61-
6247
## Add to an existing project
6348

6449
```npm

0 commit comments

Comments
 (0)