### Example: Start Payload Dev Server for 'fields' Test Suite

Source: https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md

An example demonstrating how to start the Payload development server specifically for the `fields` test suite.

```bash
pnpm dev fields
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://github.com/payloadcms/payload/blob/main/examples/email/README.md

Install project dependencies and start the Payload development server using pnpm.

```shell
pnpm install && pnpm dev
```

--------------------------------

### Quickstart a new Payload app with create-payload-app

Source: https://github.com/payloadcms/payload/blob/main/docs/getting-started/installation.mdx

Use `create-payload-app` to quickly scaffold a new Payload application with a functioning setup.

```bash
npx create-payload-app
```

--------------------------------

### Create Payload App from Example

Source: https://github.com/payloadcms/payload/blob/main/README.md

Use this command to initialize a new Payload project by cloning and setting up one of the available examples from the examples directory.

```sh
npx create-payload-app --example example_name
```

--------------------------------

### Initialize a new Payload project

Source: https://github.com/payloadcms/payload/blob/main/README.md

Use this command to quickly set up a new Payload CMS project. This will guide you through the initial setup process.

```text
pnpx create-payload-app@latest
```

--------------------------------

### Initialize a New Payload TypeScript Project

Source: https://github.com/payloadcms/payload/blob/main/docs/typescript/overview.mdx

Run this command to start the interactive setup process for a new Payload application. Select a TypeScript project type when prompted.

```bash
npx create-payload-app@latest
```

--------------------------------

### Package Management Flow for Template/Example Creation

Source: https://github.com/payloadcms/payload/blob/main/packages/create-payload-app/CLAUDE.md

This sequence diagram illustrates the package installation and AST modification process when creating a new Payload project from a template or example using the `--template` flag.

```mermaid
sequenceDiagram
    participant CLI
    participant createProject
    participant FS as File System
    participant AST as AST Operations
    participant PM as Package Manager

    CLI->>createProject: --template with dbType
    createProject->>FS: Copy template/example files
    createProject->>AST: configurePayloadConfig(projectDir, {db})
    AST->>FS: Update payload.config.ts (imports/config)
    AST->>FS: Update package.json (dependencies)
    createProject->>PM: pnpm install
    PM->>FS: Install packages from package.json
    createProject->>CLI: ✓ Project ready
```

--------------------------------

### Create Payload App from Draft Preview Example

Source: https://github.com/payloadcms/payload/blob/main/examples/draft-preview/README.md

Run this command to initialize a new Payload project using the draft-preview example template.

```shell
npx create-payload-app --example draft-preview
```

--------------------------------

### Create Payload Project from Localization Example

Source: https://github.com/payloadcms/payload/blob/main/examples/localization/README.md

Run this command to initialize a new Payload project based on the localization example template.

```bash
npx create-payload-app --example localization
```

--------------------------------

### Create Payload Project from Example

Source: https://github.com/payloadcms/payload/blob/main/examples/tailwind-shadcn-ui/README.md

Use this command to initialize a new Payload project based on the tailwind-shadcn-ui example repository.

```bash
npx create-payload-app --example tailwind-shadcn-ui
```

--------------------------------

### Start Development Server

Source: https://github.com/payloadcms/payload/blob/main/examples/tailwind-shadcn-ui/README.md

Run one of these commands to start the Payload development server and begin local development.

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
npm run dev
```

--------------------------------

### Create Payload Project with Email Example

Source: https://github.com/payloadcms/payload/blob/main/examples/email/README.md

Use `create-payload-app` to initialize a new Payload project based on the email example template.

```shell
npx create-payload-app --example email
```

--------------------------------

### Install Vercel Postgres Adapter

Source: https://github.com/payloadcms/payload/blob/main/packages/db-vercel-postgres/README.md

Install the Vercel Postgres adapter package using npm.

```bash
npm install @payloadcms/db-vercel-postgres
```

--------------------------------

### Example MongoDB Connection String

Source: https://github.com/payloadcms/payload/blob/main/examples/tailwind-shadcn-ui/README.md

This is an example MongoDB connection string for the DATABASE_URL environment variable, pointing to a local instance.

```text
mongodb://127.0.0.1/payload-example-tailwind-shadcn-ui
```

--------------------------------

### Example Task with Schedule Configuration

Source: https://github.com/payloadcms/payload/blob/main/docs/jobs-queue/schedules.mdx

This example demonstrates how to define a `TaskConfig` with a `schedule` property to enqueue a job daily at midnight into the 'nightly' queue.

```ts
import type { TaskConfig } from 'payload'

export const SendDigestEmail: TaskConfig<'SendDigestEmail'> = {
  slug: 'SendDigestEmail',
  schedule: [
    {
      cron: '0 0 * * *', // Every day at midnight
      queue: 'nightly',
    },
  ],
  handler: async () => {
    await sendDigestToAllUsers()
  },
}
```

--------------------------------

### Install Live Preview Package

Source: https://github.com/payloadcms/payload/blob/main/docs/live-preview/client.mdx

Install the core `@payloadcms/live-preview` package to enable custom Live Preview hook development.

```bash
npm install @payloadcms/live-preview
```

--------------------------------

### Create Payload Project from Whitelabel Example

Source: https://github.com/payloadcms/payload/blob/main/examples/whitelabel/README.md

Use npx to scaffold a new Payload project based on the whitelabel example template.

```shell
npx create-payload-app --example whitelabel
```

--------------------------------

### Install React Live Preview Package

Source: https://github.com/payloadcms/payload/blob/main/docs/live-preview/client.mdx

Install the @payloadcms/live-preview-react package to enable client-side Live Preview functionality in React applications.

```bash
npm install @payloadcms/live-preview-react
```

--------------------------------

### Install core Payload packages with pnpm

Source: https://github.com/payloadcms/payload/blob/main/docs/getting-started/installation.mdx

Install the essential Payload and Next.js integration packages into your project.

```bash
pnpm i payload @payloadcms/next
```

--------------------------------

### Install Postgres Database Adapter with pnpm

Source: https://github.com/payloadcms/payload/blob/main/docs/getting-started/installation.mdx

Install the Postgres database adapter to connect Payload with a PostgreSQL database.

```bash
pnpm i @payloadcms/db-postgres
```

--------------------------------

### Install SQLite Database Adapter with pnpm

Source: https://github.com/payloadcms/payload/blob/main/docs/getting-started/installation.mdx

Install the SQLite database adapter to connect Payload with an SQLite database.

```bash
pnpm i @payloadcms/db-sqlite
```

--------------------------------

### Install Payload Skill from GitHub

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/README.md

Use this command to install the Payload skill directly from its GitHub repository into your Claude environment.

```bash
/plugin install github:payloadcms/payload
```

--------------------------------

### Install MongoDB Database Adapter with pnpm

Source: https://github.com/payloadcms/payload/blob/main/docs/getting-started/installation.mdx

Install the MongoDB database adapter to connect Payload with a MongoDB database.

```bash
pnpm i @payloadcms/db-mongodb
```

--------------------------------

### Initialize Project Dependencies and Environment File

Source: https://github.com/payloadcms/payload/blob/main/packages/plugin-cloud-storage/docs/local-dev.md

Install dependencies in the root and dev folders, then create the .env file for local configuration.

```bash
yarn
cd ./dev
yarn
cp .env.example .env
```

--------------------------------

### Install pnpm Globally using npm

Source: https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md

Use this command to install pnpm globally on your system if it's not already available.

```bash
npm add -g pnpm
```

--------------------------------

### Perform Standard GET Request (TypeScript)

Source: https://github.com/payloadcms/payload/blob/main/docs/rest-api/overview.mdx

This is a standard GET request equivalent to the method override example, demonstrating how parameters are passed in the query string.

```ts
const res = await fetch(`${api}/${collectionSlug}?depth=1&locale=en`, {
  method: 'GET',
  credentials: 'include',
  headers: {
    'Accept-Language': i18n.language,
  },
})
```

--------------------------------

### Access Operation REST API Response Example

Source: https://github.com/payloadcms/payload/blob/main/docs/authentication/operations.mdx

This example shows the structure of the JSON response from the REST API's GET /api/access endpoint, detailing user permissions for collections and their fields.

```ts
{
  canAccessAdmin: true,
  collections: {
    pages: {
      create: {
        permission: true,
      },
      read: {
        permission: true,
      },
      update: {
        permission: true,
      },
      delete: {
        permission: true,
      },
      fields: {
        title: {
          create: {
            permission: true,
          },
          read: {
            permission: true,
          },
          update: {
            permission: true,
          },
        }
      }
    }
  }
}
```

--------------------------------

### Me Operation REST API Response Example

Source: https://github.com/payloadcms/payload/blob/main/docs/authentication/operations.mdx

This example illustrates the JSON response from the REST API's GET /api/[collection-slug]/me endpoint, returning the logged-in user's details, token, and expiration.

```ts
{
  user: { // The JWT "payload" ;) from the logged in user
    email: 'dev@payloadcms.com',
    createdAt: "2020-12-27T21:16:45.645Z",
    updatedAt: "2021-01-02T18:37:41.588Z",
    id: "5ae8f9bde69e394e717c8832"
  },
  token: '34o4345324...', // The token that can be used to authenticate the user
  exp: 1609619861 // Unix timestamp representing when the user's token will expire
}
```

--------------------------------

### Set Up a Local Development Environment from Scratch

Source: https://github.com/payloadcms/payload/blob/main/docs/plugins/build-your-own.mdx

Create a new `dev` directory and initialize a Payload application within it to serve as a local testing environment for your plugin.

```bash
mkdir dev
cd dev
npx create-payload-app@latest
```

--------------------------------

### Quick Start: Create and Run Payload App (Bash)

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/skills/payload/SKILL.md

Use these commands to quickly initialize a new Payload CMS project, navigate into its directory, and start the development server.

```bash
npx create-payload-app@latest my-app
cd my-app
pnpm dev
```

--------------------------------

### GET /api/orders/:id/tracking

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/skills/payload/reference/ENDPOINTS.md

Retrieves tracking information for a specific order within the 'orders' collection. This is an example of a collection-specific endpoint.

```APIDOC
## GET /api/orders/:id/tracking

### Description
Retrieves tracking information for a specific order within the 'orders' collection. This is an example of a collection-specific endpoint.

### Method
GET

### Endpoint
/api/orders/:id/tracking

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the order.

### Response
#### Success Response (200)
- **orderId** (string) - The ID of the order for which tracking information is returned.

#### Response Example
```json
{
  "orderId": "654321"
}
```
```

--------------------------------

### GET /search

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/skills/payload/reference/ENDPOINTS.md

Retrieves search results based on a query string. This example demonstrates defining a custom endpoint with OpenAPI documentation.

```APIDOC
## GET /search

### Description
Search posts based on a query parameter.

### Method
GET

### Endpoint
/search

### Parameters
#### Query Parameters
- **q** (string) - Required - The search query string.

### Response
#### Success Response (200)
- **Response Body** (array) - Search results.

#### Response Example
[
  // Example search result objects
]
```

--------------------------------

### Copy Environment File

Source: https://github.com/payloadcms/payload/blob/main/examples/localization/README.md

Duplicate the example environment file to create your local configuration.

```bash
cp .env.example .env
```

--------------------------------

### Define Custom Endpoints in a Payload Collection

Source: https://github.com/payloadcms/payload/blob/main/docs/rest-api/overview.mdx

This example demonstrates how to add multiple custom REST API endpoints to a Payload collection, including GET and POST methods, and an example of an authenticated endpoint. Endpoints are defined within the `endpoints` array of a `CollectionConfig`.

```typescript
import type { CollectionConfig } from 'payload'

// a collection of 'orders' with an additional route for tracking details, reachable at /api/orders/:id/tracking
export const Orders: CollectionConfig = {
  slug: 'orders',
  fields: [
    /* ... */
  ],
  // highlight-start
  endpoints: [
    {
      path: '/:id/tracking',
      method: 'get',
      handler: async (req) => {
        const tracking = await getTrackingInfo(req.routeParams.id)

        if (!tracking) {
          return Response.json({ error: 'not found' }, { status: 404 })
        }

        return Response.json({
          message: `Hello ${req.routeParams.name as string} @ ${req.routeParams.group as string}`,
        })
      },
    },
    {
      path: '/:id/tracking',
      method: 'post',
      handler: async (req) => {
        // `data` is not automatically appended to the request
        // if you would like to read the body of the request
        // you can use `data = await req.json()`
        const data = await req.json()
        await req.payload.update({
          collection: 'tracking',
          data: {
            // data to update the document with
          },
        })
        return Response.json({
          message: 'successfully updated tracking info',
        })
      },
    },
    {
      path: '/:id/forbidden',
      method: 'post',
      handler: async (req) => {
        // this is an example of an authenticated endpoint
        if (!req.user) {
          return Response.json({ error: 'forbidden' }, { status: 403 })
        }

        // do something

        return Response.json({
          message: 'successfully updated tracking info',
        })
      },
    },
  ],
  // highlight-end
}
```

--------------------------------

### Create a new Astro project with basics template

Source: https://github.com/payloadcms/payload/blob/main/examples/astro/website/README.md

Use this command to initialize a new Astro project configured with the basic starter template.

```sh
npm create astro@latest -- --template basics
```

--------------------------------

### Retrieve Payload Client Config using useConfig Hook (React)

Source: https://github.com/payloadcms/payload/blob/main/docs/admin/react-hooks.mdx

Use this hook to access the Payload client configuration object, for example, to get the server URL.

```tsx
'use client'
import { useConfig } from '@payloadcms/ui'

const MyComponent: React.FC = () => {
  // highlight-start
  const { config } = useConfig()
  // highlight-end

  return <span>{config.serverURL}</span>
}
```

--------------------------------

### Create Payload Project from Auth Example

Source: https://github.com/payloadcms/payload/blob/main/examples/auth/README.md

Use npx to initialize a new Payload project based on the authentication example, setting up the necessary files and dependencies.

```bash
npx create-payload-app --example auth
```

--------------------------------

### Dockerfile for Production Payload CMS

Source: https://github.com/payloadcms/payload/blob/main/docs/production/deployment.mdx

Use this multi-stage Dockerfile to build an optimized production image for a Payload CMS application. It handles dependency installation, application build, and runtime setup.

```Dockerfile
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js
```

--------------------------------

### Initialize Local Environment Variables

Source: https://github.com/payloadcms/payload/blob/main/templates/blank/README.md

Copies the example environment file for local development, requiring updates for MongoDB and S3 storage.

```shell
cd my-project && cp .env.example .env
```

--------------------------------

### Defining a Custom Endpoint for a Payload Collection

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/skills/payload/reference/ENDPOINTS.md

This example demonstrates how to add a custom GET endpoint to a Payload collection, accessible via `/api/{collection-slug}/{path}`, to retrieve specific data related to an individual document.

```typescript
import type { CollectionConfig } from 'payload'

export const Orders: CollectionConfig = {
  slug: 'orders',
  fields: [
    /* ... */
  ],
  endpoints: [
    {
      path: '/:id/tracking',
      method: 'get',
      handler: async (req) => {
        // Available at: /api/orders/:id/tracking
        const orderId = req.routeParams.id
        return Response.json({ orderId })
      }
    }
  ]
}
```

--------------------------------

### Access Application and Admin Panel

Source: https://github.com/payloadcms/payload/blob/main/examples/tailwind-shadcn-ui/README.md

Use these commands to open the application's home page and the admin panel in your browser after the server has started.

```bash
open http://localhost:3000
```

```bash
open http://localhost:3000/admin
```

--------------------------------

### Fetch Current User via HTTP API

Source: https://github.com/payloadcms/payload/blob/main/examples/auth/README.md

This example shows how to make an HTTP GET request to the `/api/users/me` endpoint to retrieve the currently authenticated user's data from the client-side or server-side without Local API access.

```ts
await fetch('/api/users/me', {
  method: 'GET',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
  },
})
```

--------------------------------

### Example .env File Content

Source: https://github.com/payloadcms/payload/blob/main/docs/configuration/environment-vars.mdx

Shows common environment variables like `SERVER_URL` and `DATABASE_URL` defined within a `.env` file.

```plaintext
SERVER_URL=localhost:3000
DATABASE_URL=mongodb://localhost:27017/my-database
```

--------------------------------

### Advanced Lexical Editor Configuration with Global and Field-Specific Settings in TypeScript

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/skills/payload/reference/FIELDS.md

This example shows a global Lexical editor configuration with a wide range of features, including custom link fields. It also demonstrates a field-specific editor setup with custom toolbars.

```ts
import {
  BoldFeature,
  EXPERIMENTAL_TableFeature,
  FixedToolbarFeature,
  HeadingFeature,
  IndentFeature,
  InlineToolbarFeature,
  ItalicFeature,
  LinkFeature,
  OrderedListFeature,
  UnderlineFeature,
  UnorderedListFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'

// Global editor config with full features
export default buildConfig({
  editor: lexicalEditor({
    features: () => {
      return [
        UnderlineFeature(),
        BoldFeature(),
        ItalicFeature(),
        OrderedListFeature(),
        UnorderedListFeature(),
        LinkFeature({
          enabledCollections: ['pages'],
          fields: ({ defaultFields }) => {
            const defaultFieldsWithoutUrl = defaultFields.filter((field) => {
              if ('name' in field && field.name === 'url') return false
              return true
            })

            return [
              ...defaultFieldsWithoutUrl,
              {
                name: 'url',
                type: 'text',
                admin: {
                  condition: ({ linkType }) => linkType !== 'internal',
                },
                label: ({ t }) => t('fields:enterURL'),
                required: true,
              },
            ]
          },
        }),
        IndentFeature(),
        EXPERIMENTAL_TableFeature(),
      ]
    },
  }),
})

// Field-specific editor with custom toolbar
const richTextWithToolbars: RichTextField = {
  name: 'richText',
  type: 'richText',
  editor: lexicalEditor({
    features: ({ rootFeatures }) => {
      return [
        ...rootFeatures,
        HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
        FixedToolbarFeature(),
        InlineToolbarFeature(),
      ]
    },
  }),
  label: false,
}
```

--------------------------------

### Define Custom Endpoint with OpenAPI Documentation in TypeScript

Source: https://github.com/payloadcms/payload/blob/main/tools/claude-plugin/skills/payload/reference/ENDPOINTS.md

Use the `custom` property within an endpoint definition to embed OpenAPI specification metadata, enabling automatic API documentation generation. This example defines a GET `/search` endpoint with a required `q` query parameter and a 200 response schema.

```typescript
export const endpoint = {
  path: '/search',
  method: 'get',
  handler: async (req) => {
    // Handler implementation
  },
  custom: {
    openapi: {
      summary: 'Search posts',
      parameters: [
        {
          name: 'q',
          in: 'query',
          required: true,
          schema: { type: 'string' }
        }
      ],
      responses: {
        200: {
          description: 'Search results',
          content: {
            'application/json': {
              schema: { type: 'array' }
            }
          }
        }
      }
    }
  }
}
```

--------------------------------

### Quick Start Commands for Payload CMS

Source: https://github.com/payloadcms/payload/blob/main/CLAUDE.md

Use these commands to quickly set up and run the Payload CMS development environment.

```shell
pnpm install
```

```shell
pnpm run build:core
```

```shell
pnpm run dev
```

```shell
pnpm run dev:postgres
```

--------------------------------

### Conventional Commits for Templates and Examples

Source: https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md

Examples of `chore` type Conventional Commits with specific scopes for changes related to templates or examples.

```text
chore(templates): adds feature to template
```

```text
chore(examples): fixes bug in example
```

--------------------------------

### GET /api/payload-preferences/{key}

Source: https://github.com/payloadcms/payload/blob/main/docs/rest-api/overview.mdx

Get a preference by key

```APIDOC
## GET /api/payload-preferences/{key}

### Description
Get a preference by key

### Method
GET

### Endpoint
/api/payload-preferences/{key}

### Parameters
#### Path Parameters
- **key** (string) - Required - The key of the preference to retrieve.

### Response
#### Success Response (200)
- **_id** (string) - Unique identifier of the preference.
- **key** (string) - The key of the preference.
- **user** (string) - The ID of the user associated with the preference.
- **userCollection** (string) - The collection name for the user.
- **__v** (number) - Version key.
- **createdAt** (string) - ISO 8601 timestamp of creation.
- **updatedAt** (string) - ISO 8601 timestamp of last update.
- **value** (string) - The value of the preference.

#### Response Example
{
  "_id": "644bb7a8307b3d363c6edf2c",
  "key": "region",
  "user": "644b8453cd20c7857da5a9b0",
  "userCollection": "users",
  "__v": 0,
  "createdAt": "2023-04-28T12:10:16.689Z",
  "updatedAt": "2023-04-28T12:10:16.689Z",
  "value": "Europe/London"
}
```

--------------------------------

### GET /api/globals/{global-slug}

Source: https://github.com/payloadcms/payload/blob/main/docs/rest-api/overview.mdx

Get a global by slug

```APIDOC
## GET /api/globals/{global-slug}

### Description
Get a global by slug

### Method
GET

### Endpoint
/api/globals/{global-slug}

### Parameters
#### Path Parameters
- **global-slug** (string) - Required - The slug of the global to retrieve.

### Response
#### Success Response (200)
- **announcement** (string) - The announcement content.
- **globalType** (string) - The type of the global.
- **createdAt** (string) - ISO 8601 timestamp of creation.
- **updatedAt** (string) - ISO 8601 timestamp of last update.
- **id** (string) - Unique identifier of the global.

#### Response Example
{
  "announcement": "Here is an announcement!",
  "globalType": "announcement",
  "createdAt": "2023-04-28T08:53:56.066Z",
  "updatedAt": "2023-04-28T08:53:56.066Z",
  "id": "644b89a496c64a833fe579c9"
}
```

--------------------------------

### Start Payload Admin UI for Testing

Source: https://github.com/payloadcms/payload/blob/main/ISSUE_GUIDE.md

Use this command to boot up the Payload admin panel with your specific test configuration, enabling manual recreation of issues. Note that the test database will be wiped on restart.

```bash
# This command will start up Payload using your config
# NOTE: it will wipe the test database on restart
pnpm dev _community
```

--------------------------------

### Perform GET Request with Method Override (TypeScript)

Source: https://github.com/payloadcms/payload/blob/main/docs/rest-api/overview.mdx

Send a GET request using the POST method by setting `X-Payload-HTTP-Method-Override` to `GET` and `Content-Type` to `application/x-www-form-urlencoded`.

```ts
const res = await fetch(`${api}/${collectionSlug}`, {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Accept-Language': i18n.language,
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Payload-HTTP-Method-Override': 'GET',
  },
  body: qs.stringify({
    depth: 1,
    locale: 'en',
  }),
})
```

--------------------------------

### Start Local Development Server

Source: https://github.com/payloadcms/payload/blob/main/docs/plugins/build-your-own.mdx

Run the development server for your local Payload project using `pnpm dev` to test your plugin in a browser.

```bash
pnpm dev
```

--------------------------------

### Install Stripe SDK with pnpm

Source: https://github.com/payloadcms/payload/blob/main/docs/ecommerce/plugin.mdx

Install the Stripe SDK package using pnpm, as it is a required dependency for the PayloadCMS Stripe adapter and is not installed automatically.

```bash
pnpm add stripe
```

--------------------------------

### Create Products Collection with Full Configuration

Source: https://github.com/payloadcms/payload/blob/main/docs/ecommerce/advanced.mdx

Use this snippet to initialize a products collection with detailed configurations for access control, variant support, multiple currencies, and inventory management.

```ts
import { createProductsCollection } from 'payload-plugin-ecommerce'

const Products = createProductsCollection({
  access: {
    isAdmin,
    adminOrPublishedStatus,
  },
  enableVariants: true,
  currenciesConfig: {
    defaultCurrency: 'usd',
    currencies: [
      {
        code: 'usd',
        symbol: '$',
      },
      {
        code: 'eur',
        symbol: '€',
      },
    ],
  },
  inventory: {
    enabled: true,
    trackByVariant: true,
    lowStockThreshold: 5,
  },
})
```

--------------------------------

### Install Sentry Plugin

Source: https://github.com/payloadcms/payload/blob/main/docs/plugins/sentry.mdx

Installs the Sentry plugin for Payload using pnpm.

```bash
  pnpm add @payloadcms/plugin-sentry
```

--------------------------------

### Install Redirects Plugin with pnpm

Source: https://github.com/payloadcms/payload/blob/main/docs/plugins/redirects.mdx

Install the Payload Redirects plugin using pnpm.

```bash
  pnpm add @payloadcms/plugin-redirects
```

--------------------------------

### Install Payload MongoDB Adapter

Source: https://github.com/payloadcms/payload/blob/main/packages/db-mongodb/README.md

Use npm to install the official MongoDB adapter for Payload.

```bash
npm install @payloadcms/db-mongodb
```

--------------------------------

### Install Payload GraphQL Dependency

Source: https://github.com/payloadcms/payload/blob/main/docs/graphql/graphql-schema.mdx

Installs the `@payloadcms/graphql` package as a development dependency for schema generation.

```bash
pnpm add @payloadcms/graphql -D
```

--------------------------------

### Example beforeList Server Component

Source: https://github.com/payloadcms/payload/blob/main/docs/custom-components/list-view.mdx

This is an example of a custom server component for the `beforeList` slot, receiving `BeforeListServerProps`.

```tsx
import React from 'react'
import type { BeforeListServerProps } from 'payload'

export function MyBeforeListComponent(props: BeforeListServerProps) {
  return <div>This is a custom beforeList component (Server)</div>
}
```

--------------------------------

### Install Sharp for Image Processing

Source: https://github.com/payloadcms/payload/blob/main/docs/migration-guide/v3.mdx

Install the `sharp` package if your upload-enabled collections use image processing options like `formatOptions`, `imageSizes`, or `resizeOptions`.

```bash
pnpm i sharp
```

--------------------------------

### Install Nodemailer Email Adapter

Source: https://github.com/payloadcms/payload/blob/main/packages/email-nodemailer/README.md

Install the Nodemailer email adapter and Nodemailer library using pnpm.

```sh
pnpm add @payloadcms/email-nodemailer nodemailer
```

--------------------------------

### Initialize Payload Project using create-payload-app

Source: https://github.com/payloadcms/payload/blob/main/packages/payload/README.md

Start a new Payload project using the `create-payload-app` CLI. The `-t website` flag initializes a project with the website template, including a frontend.

```text
pnpx create-payload-app@latest
```

```text
pnpx create-payload-app@latest -t website
```

--------------------------------

### Install Resend Email Adapter with pnpm

Source: https://github.com/payloadcms/payload/blob/main/packages/email-resend/README.md

Install the Resend email adapter package using pnpm.

```sh
pnpm add @payloadcms/email-resend
```

--------------------------------

### Install Payload TypeScript Plugin

Source: https://github.com/payloadcms/payload/blob/main/docs/typescript/ts-plugin.mdx

Install the TypeScript Language Service Plugin as a development dependency in your project.

```bash
pnpm add -D @payloadcms/typescript-plugin
```

--------------------------------

### Create Payload Multi-Tenant App

Source: https://github.com/payloadcms/payload/blob/main/examples/multi-tenant/README.md

Use this command to initialize a new Payload project based on the multi-tenant example.

```bash
npx create-payload-app --example multi-tenant
```

--------------------------------

### Using create-payload-app CLI

Source: https://github.com/payloadcms/payload/blob/main/packages/create-payload-app/README.md

This snippet shows various ways to initialize a new Payload project using the `create-payload-app` command-line interface, including setting the project name and selecting a template.

```text
  USAGE

      $ npx create-payload-app
      $ npx create-payload-app my-project
      $ npx create-payload-app -n my-project -t website

  OPTIONS

      -n     my-payload-app         Set project name
      -t     template_name          Choose specific template

        Available templates:

        blank                       Blank Template
        website                     Website Template
        ecommerce                   E-commerce Template
        plugin                      Template for creating a Payload plugin
        payload-demo                Payload demo site at https://demo.payloadcms.com
        payload-website             Payload website CMS at https://payloadcms.com

      --use-npm                     Use npm to install dependencies
      --use-yarn                    Use yarn to install dependencies
      --use-pnpm                    Use pnpm to install dependencies
      --no-deps                     Do not install any dependencies
      -h                            Show help
```

--------------------------------

### Run Remix Development Server

Source: https://github.com/payloadcms/payload/blob/main/examples/remix/website/README.md

Starts the Remix development server for local development.

```shellscript
npm run dev
```

--------------------------------

### Example Description Client Component

Source: https://github.com/payloadcms/payload/blob/main/docs/custom-components/list-view.mdx

This is an example of a client-side React component that can be used as the `Description` component in Payload CMS.

```tsx
'use client'
import React from 'react'
import type { ViewDescriptionClientProps } from 'payload'

export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
  return <div>This is a custom Collection description component (Client)</div>
}
```

--------------------------------

### Project Structure with .env File

Source: https://github.com/payloadcms/payload/blob/main/docs/configuration/environment-vars.mdx

Illustrates the typical project directory structure, showing the `.env` file located at the root for storing environment variables.

```plaintext
project-name/
├─ .env
├─ package.json
├─ payload.config.ts
```

--------------------------------

### Example Description Server Component

Source: https://github.com/payloadcms/payload/blob/main/docs/custom-components/list-view.mdx

This is an example of a server-side React component that can be used as the `Description` component in Payload CMS.

```tsx
import React from 'react'
import type { ViewDescriptionServerProps } from 'payload'

export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
  return <div>This is a custom Collection description component (Server)</div>
}
```

--------------------------------

### Start Google Cloud Storage Emulator and Payload Dev Server

Source: https://github.com/payloadcms/payload/blob/main/packages/plugin-cloud-storage/docs/local-dev.md

Launch the GCS Docker emulator and then start the Payload development server configured for the GCS adapter.

```bash
cd ./src/adapters/gcs/emulator && docker-compose up -d
yarn dev:gcs
```

--------------------------------

### Example afterListTable Client Component

Source: https://github.com/payloadcms/payload/blob/main/docs/custom-components/list-view.mdx

This is an example of a client-side React component that can be used with the `afterListTable` property in Payload CMS.

```tsx
'use client'
import React from 'react'
import type { AfterListTableClientProps } from 'payload'

export function MyAfterListTableComponent(props: AfterListTableClientProps) {
  return <div>This is a custom afterListTable component (Client)</div>
}
```