### Cypress Test Setup with Helper Commands

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/contributing/acceptance-tests.md

Example of using Cypress helper commands like `autologin` and `createContent` within a `beforeEach` block to set up test preconditions. These commands automate login and content creation.

```javascript
beforeEach(() => {
  cy.autologin();
  cy.createContent({
    contentType: 'Document',
    contentId: 'my-page-1',
    contentTitle: 'My Page-1',
    allow_discussion: true,
  });
  cy.visit('/contents');
});
```

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

### Run Volto Docker Container with Sentry Configuration

Source: https://github.com/plone/volto/blob/main/docs/source/deploying/sentry.md

Example command to start a Volto Docker container with necessary Sentry environment variables.

```shell
docker run -p 3000:3000 -p 3001:3001 \
  -e SENTRY_URL=https://mysentry.com \
  -e SENTRY_AUTH_TOKEN=foo \
  -e SENTRY_ORG=my_organization \
  -e SENTRY_PROJECT=new_project \
  -e SENTRY_RELEASE=2.0.0 \
  -e RAZZLE_SENTRY_DSN=https://boo@sentry.com/1 \
  -e RAZZLE_SENTRY_RELEASE=2.0.0 volto-app:latest
```

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

### Start Volto Frontend

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/developing-core.md

Starts the Volto frontend development server.

```shell
pnpm start
```

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

### Start Acceptance Backend

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/acceptance-tests.md

Starts the backend server for acceptance tests. Run this in a dedicated terminal session.

```shell
make acceptance-backend-start
```

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

### Install uv on macOS, Linux, and Windows with WSL

Source: https://github.com/plone/volto/blob/main/docs/source/_inc/_install-uv.md

Use this command to install uv by downloading and executing an installation script via curl.

```shell
curl -LsSf https://astral.sh/uv/install.sh | sh
```

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

### Start Acceptance Frontend

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/acceptance-tests.md

Starts the frontend development server for acceptance tests. Run this in a dedicated terminal session.

```shell
make acceptance-frontend-dev-start
```

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

### Start Volto Backend with Docker

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/developing-core.md

Starts the Volto backend using Docker. This command downloads images, configures the backend, and creates a persistent data volume on the first run. Subsequent runs will only start the backend.

```shell
make backend-docker-start
```

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

### Volto Cypress Test Helper Commands

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/acceptance-tests.md

Example of common helper commands used in Volto's acceptance tests for setup and content creation.

```javascript
beforeEach(() => {
    cy.autologin();
    cy.createContent({
      contentType: 'Document',
      contentId: 'my-page-1',
      contentTitle: 'My Page-1',
      allow_discussion: true,
    });
    cy.visit('/contents');
  });
```

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

### Download and Run NVM Install Script

Source: https://github.com/plone/volto/blob/main/docs/source/_inc/_install-nvm.md

Downloads the NVM installation script from GitHub and executes it using bash. This command installs or updates NVM to the latest version.

```shell
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.39.5/install.sh | bash
```

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

### Start Volto Production Server Manually

Source: https://github.com/plone/volto/blob/main/docs/source/deploying/simple.md

Starts the Volto application in production mode by directly executing the built server file. This is an alternative to `pnpm start:prod`.

```bash
$ NODE_ENV=production node build/server.js
```

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

### ESLint Configuration Example

Source: https://github.com/plone/volto/blob/main/packages/eslintconfig/README.md

An example ESLint configuration file extending a React library configuration and specifying include and exclude paths.

```javascript
{
  "extends": "tsconfig/react-library.json",
  "include": ["src", "src/**/*.js"],
  "exclude": [
    "node_modules",
    "build",
    "public",
    "coverage",
    "src/**/*.test.{js,jsx,ts,tsx}",
    "src/**/*.spec.{js,jsx,ts,tsx}",
    "src/**/*.stories.{js,jsx,ts,tsx}"
  ]
}
```

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

### Clone Volto Repository and Install Dependencies

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/developing-core.md

Clone the Volto repository and install frontend dependencies using make.

```shell
git clone https://github.com/plone/volto.git
cd volto
make install
```

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

### Install Acceptance Testing Dependencies

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/test-add-ons-17.md

Run `make install-acceptance` once to install the necessary dependencies for running Cypress acceptance tests.

```shell
make install-acceptance
```

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

### Install Add-on from GitHub (Volto 18/19)

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/install-an-add-on.md

Install an add-on directly from a GitHub repository for Volto versions 18 and 19 using pnpm.

```shell
pnpm add collective/volto-dropdownmenu
```

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

### Install Add-on Configuration

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/install-an-add-on-dev-17.md

Run this command to install the configuration of `mrs.developer.json` in your project. This command is typically included by default when generating a Volto project.

```shell
make install
```

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

### Static Search Component Example

Source: https://github.com/plone/volto/blob/main/packages/volto/src/components/theme/Search/Search.md

A static example of the SearchComponent, showing its JSX structure without any surrounding Redux provider or store setup.

```jsx
<SearchComponent path="" searchableText="" items={[]} />
```

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

### Start Volto Development Server

Source: https://github.com/plone/volto/blob/main/docs/source/upgrade-guide/index.md

Verify the upgrade by running the Volto development server.

```shell
yarn start
```

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

### Get Add-ons List

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/client/actions/addons.md

Retrieves a list of all installed add-ons. This can be accessed via a query function or a hook.

```APIDOC
## GET /@addons

### Description
Retrieves a list of all installed add-ons in the Plone site.

### Method
GET

### Endpoint
/@addons

### Parameters
None

### Response
#### Success Response (200)
- **addons** (array) - A list of add-on objects, each containing details about an installed add-on.

### Response Example
{
  "addons": [
    {
      "id": "plone.session",
      "title": "Plone Session",
      "description": "Manages user sessions.",
      "enabled": true
    }
  ]
}
```

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

### Get Add-ons List

Source: https://github.com/plone/volto/blob/main/docs/source/client/actions/addons.md

Retrieves a list of all installed add-ons for a Plone site. This operation requires the `cmf.ManagePortal` permission.

```APIDOC
## GET /@addons

### Description
Retrieves a list of all installed add-ons for a Plone site.

### Method
GET

### Endpoint
/@addons

### Permissions
Requires `cmf.ManagePortal` permission.

### Response
#### Success Response (200)
- **addons** (array) - A list of add-on objects, each containing details about an installed add-on.

### Response Example
{
  "addons": [
    {
      "id": "plone.session",
      "title": "Session Management",
      "description": "Manages user sessions.",
      "enabled": true
    }
  ]
}
```

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

### Build and Start Volto with RAZZLE_API_PATH

Source: https://github.com/plone/volto/blob/main/docs/source/configuration/environmentvariables.md

Demonstrates how to build a Volto application and start it in production with a specific API path set via an environment variable.

```shell
pnpm build && RAZZLE_API_PATH=https://plone.org pnpm start:prod
```

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

### Start Acceptance Test Server

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/test-add-ons-17.md

Start the backend server for acceptance testing using `make start-test-acceptance-server`. The frontend runs in development mode.

```shell
make start-test-acceptance-server
```

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

### Invariant Validator for Date Range

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/configuration/validation.md

An example of an invariant validator that ensures the event's start date is before its end date, using 'formData' to access other field values.

```typescript
export const startEventDateRangeValidator = ({
  value,
  field,
  formData,
  formatMessage,
}: Validator) => {
  const isValid =
    value && formData.end && new Date(value) < new Date(formData.end);
  return !isValid
    ? formatMessage(messages.startEventRange, {
        endDateValueOrEndFieldName: formData.end || 'end',
      })
    : null;
};
```

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

### Invariant Validator for Date Range Check

Source: https://github.com/plone/volto/blob/main/docs/source/configuration/validation.md

An example of an invariant validator that checks if the 'end' date is after the 'start' date using data from 'formData'. This is useful for validating related fields.

```typescript
export const startEventDateRangeValidator = ({
  value,
  field,
  formData,
  formatMessage,
}: Validator) => {
  const isValid =
    value && formData.end && new Date(value) < new Date(formData.end);
  return !isValid
    ? formatMessage(messages.startEventRange, {
        endDateValueOrEndFieldName: formData.end || 'end',
      })
    : null;
};

```

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

### Start Coresandbox Development Server

Source: https://github.com/plone/volto/blob/main/packages/coresandbox/AGENTS.md

Starts the Volto development server with the coresandbox add-on enabled. Use this command for local development and testing.

```sh
pnpm --filter @plone/volto start:coresandbox
```

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

### Install nvm

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/contributing/developing-core.md

Downloads and executes the nvm installation script. This command is used to install or update the Node Version Manager.

```shell
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.39.5/install.sh | bash

```

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

### Example of Customized Settings in Volto Config

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/upgrade-guide/index.md

Shows how to include your custom configuration within the default settings.

```js
export const settings = {
  ...defaultSettings,
  navDepth: 3,
};

```

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

### Verify NVM Installation

Source: https://github.com/plone/volto/blob/main/docs/source/_inc/_install-nvm.md

Checks the installed NVM version to confirm the installation was successful. This command should output the version number of NVM.

```shell
nvm --version
```

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

### Initialize Plone Client with Context Provider

Source: https://github.com/plone/volto/blob/main/docs/source/client/future-improvements.md

Demonstrates how to initialize the PloneClient and provide it to the application using PloneClientProvider for context-based access.

```jsx
import { PloneClient, PloneClientProvider } from `@plone/client`;

const ploneClient = new PloneClient({
  baseURL: '...'
})

ploneClient.login(username, password);

const App = () => {
  return (
    <PloneClientProvider ploneClient={ploneClient}>
      <MainApp />
    </PloneClientProvider>
  )
}
```

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

### Add-on Configuration File Example (CommonJS)

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/how-to-guides/register-an-add-on.md

Provide your add-on registration configuration in a CommonJS module format. This example registers a single add-on named 'my-volto-config-addon'.

```javascript
module.exports = {
  addons: ['my-volto-config-addon'],
};
```

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

### Volto Build Configuration (Pre-Volto 13)

Source: https://github.com/plone/volto/blob/main/docs/source/configuration/zero-config-builds.md

Example of how Volto was configured at build time using environment variables before version 13.

```shell
PORT=11001 RAZZLE_API_PATH=https://plone.org/api pnpm build
```

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

### Set up Isolated Add-on Testing Environment

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/test-add-ons-17.md

Run `make dev` once to set up the necessary boilerplate for a dockerized environment to test add-ons in isolation.

```shell
make dev
```

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

### Install Add-on

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/client/actions/addons.md

Installs a specified add-on. Requires the add-on ID.

```APIDOC
## POST /@addons/{addonId}/install

### Description
Installs a specified add-on. This operation requires the `cmf.ManagePortal` permission.

### Method
POST

### Endpoint
/@addons/{addonId}/install

### Parameters
#### Path Parameters
- **addonId** (string) - Required - The unique identifier of the add-on to install.

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the add-on was installed successfully.

### Response Example
{
  "message": "Add-on 'plone.session' installed successfully."
}
```

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

### Install Project Dependencies

Source: https://github.com/plone/volto/blob/main/docs/source/upgrade-guide/index.md

Run `yarn` to install the updated packages after modifying `package.json`.

```shell
yarn
```

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

### Install uv on Windows using PowerShell

Source: https://github.com/plone/volto/blob/main/docs/source/_inc/_install-uv.md

Use this command to install uv by downloading and executing a PowerShell script. Ensure your execution policy allows it.

```powershell
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```

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

### Start Volto with Custom API Path

Source: https://github.com/plone/volto/blob/main/docs/source/development/environment-variables.md

Start the Volto development server, pointing the internal proxy to a custom backend API path.

```shell
RAZZLE_DEV_PROXY_API_PATH='http://localhost:55001/myplonesite' pnpm start
```

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

### Install TypeScript Dependencies

Source: https://github.com/plone/volto/blob/main/docs/source/contributing/typescript.md

Install the necessary TypeScript and ESLint related packages as development dependencies.

```shell
yarn add --dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @types/react @types/react-dom concurrently
```

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

### Install Add-on

Source: https://github.com/plone/volto/blob/main/docs/source/client/actions/addons.md

Installs a specified add-on in the Plone site. This operation requires the `cmf.ManagePortal` permission.

```APIDOC
## POST /@addons/{addonId}/install

### Description
Installs a specified add-on in the Plone site.

### Method
POST

### Endpoint
/@addons/{addonId}/install

### Parameters
#### Path Parameters
- **addonId** (string) - Required - The unique identifier of the add-on profile to install.

### Permissions
Requires `cmf.ManagePortal` permission.

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the add-on was installed successfully.

### Response Example
{
  "message": "Add-on 'plone.session' installed successfully."
}
```

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

### Install Vitest and Dependencies

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/test-add-ons-18.md

Run this command to add Vitest and necessary testing libraries to your development environment.

```shell
pnpm add -D vitest @testing-library/react jsdom
```

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

### Example 'isNumber' Validator

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/configuration/validation.md

An example validator function that checks if a given value is a valid number.

```typescript
export const isNumber = ({ value, formatMessage }: Validator) => {
  const floatRegex = /^[+-]?\d+(\.\d+)?$/;
  const isValid =
    typeof value === 'number' && !isNaN(value) && floatRegex.test(value);
  return !isValid ? formatMessage(messages.isNumber) : null;
};
```

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

### Install and Use Volto Add-on Generator

Source: https://github.com/plone/volto/blob/main/docs/source/development/add-ons/create-an-add-on-17.md

Installs the `generator-volto` globally and then uses it to create a new Volto add-on. Replace `[<addonName>]` with your desired add-on name and `[options]` with any relevant generator options.

```shell
npm install -g @plone/generator-volto
yo @plone/volto:addon [<addonName>] [options]
```

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

### Install Add-on Profile

Source: https://github.com/plone/volto/blob/main/packages/registry/docs/client/actions/addons.md

Installs a specific profile for an add-on. Requires both the add-on ID and the profile name.

```APIDOC
## POST /@addons/{addonId}/install-profile

### Description
Installs a specific profile for a given add-on. This operation requires the `cmf.ManagePortal` permission.

### Method
POST

### Endpoint
/@addons/{addonId}/install-profile

### Parameters
#### Path Parameters
- **addonId** (string) - Required - The unique identifier of the add-on.
- **profile** (string) - Required - The name of the profile to install.

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the profile was installed successfully.

### Response Example
{
  "message": "Profile 'default' for add-on 'plone.session' installed successfully."
}
```