Use Supabase with RedwoodJS

  <Admonition type="tip">

  Be sure to make note of the Database Password you used as you will need this later to connect to your database.

  </Admonition>
</StepHikeCompact.Details>

<StepHikeCompact.Code>
  ![New project for redwoodjs](/docs/img/guides/getting-started/quickstarts/redwoodjs/new-project.png)
</StepHikeCompact.Code>

Open the project [**Connect** panel](/dashboard/project/_?showConnect=true). This quickstart connects using the [**Transaction pooler**](/dashboard/project/_?showConnect=true&method=transaction) and [**Session pooler**](/dashboard/project/_?showConnect=true&method=session) mode. Transaction mode is used for application queries and Session mode is used for running migrations with Prisma.

To do this, set the connection mode to `Transaction` in the [Database Settings page](/dashboard/project/_/database/settings) and copy the connection string and append `?pgbouncer=true&&connection_limit=1`. `pgbouncer=true` disables Prisma from generating prepared statements. This is required since our connection pooler does not support prepared statements in transaction mode yet. The `connection_limit=1` parameter is only required if you are using Prisma from a serverless environment. This is the Transaction mode connection string.

To get the Session mode connection pooler string, change the port of the connection string from the dashboard to 5432.

You will need the Transaction mode connection string and the Session mode connection string to setup environment variables in Step 5.

<Admonition type="tip">

You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps.

</Admonition>
</StepHikeCompact.Details>

<StepHikeCompact.Code>
  ![pooled connection for redwoodjs](/docs/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png)
</StepHikeCompact.Code>

  <Admonition type="note">

    The [`yarn` package manager](https://yarnpkg.com) is required to create a RedwoodJS app. You will use it to run RedwoodJS commands later.

    While TypeScript is recommended, If you want a JavaScript app, omit the `--ts` flag.

  </Admonition>
</StepHikeCompact.Details>

<StepHikeCompact.Code>
  ```bash name=Terminal
  yarn create redwood-app my-app --ts
  ```
</StepHikeCompact.Code>

<StepHikeCompact.Code>
  ```bash name=Terminal
  cd my-app
  code .
  ```
</StepHikeCompact.Code>

  In your `.env` file, add the following environment variables for your database connection:

  * The `DATABASE_URL` should use the Transaction mode connection string you copied in Step 1.

  * The `DIRECT_URL` should use the Session mode connection string you copied in Step 1.

</StepHikeCompact.Details>

<StepHikeCompact.Code>
  ```bash name=.env
  # Transaction mode connection string used for migrations
  DATABASE_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"

  # Session mode connection string — used by Prisma Client
  DIRECT_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:5432/postgres"
  ```
</StepHikeCompact.Code>

  Update your Prisma schema file `api/db/schema.prisma` to use your Supabase Postgres database connection environment variables you setup in Step 5.
</StepHikeCompact.Details>

<StepHikeCompact.Code>
  ```prisma name=api/db/schema.prisma
  datasource db {
    provider  = "postgresql"
    url       = env("DATABASE_URL")
    directUrl = env("DIRECT_URL")
  }
  ```
</StepHikeCompact.Code>

<StepHikeCompact.Code>
  ```prisma name=api/db/schema.prisma
  model Instrument {
    id   Int    @id @default(autoincrement())
    name String @unique
  }
  ```
</StepHikeCompact.Code>

  Update the file `scripts/seeds.ts` to contain the following code:
</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```ts name=scripts/seed.ts
  import type { Prisma } from '@prisma/client'
  import { db } from 'api/src/lib/db'

  export default async () => {
    try {
      const data: Prisma.InstrumentCreateArgs['data'][] = [
        { name: 'dulcimer' },
        { name: 'harp' },
        { name: 'guitar' },
      ]

      console.log('Seeding instruments ...')

      const instruments = await db.instrument.createMany({ data })

      console.log('Done.', instruments)
    } catch (error) {
      console.error(error)
    }
  }
  ```
</StepHikeCompact.Code>

  <Admonition type="tip">

    The reset database command `yarn rw prisma db reset` will recreate the tables and will also run the seed script.

  </Admonition>
</StepHikeCompact.Details>

<StepHikeCompact.Code>
  ```bash name=Terminal
  yarn rw prisma db seed
  ```
</StepHikeCompact.Code>

<StepHikeCompact.Code>
  ```bash name=Terminal
  yarn rw g scaffold instrument
  ```
</StepHikeCompact.Code>

<StepHikeCompact.Code>
  ![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-splash.png)

</StepHikeCompact.Code>

  You may now edit, delete, and add new books using the scaffolded UI.
</StepHikeCompact.Details>