> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Dashboard Page Extension Files and Code

## Article: Dashboard Page Extension Files and Code

## Article Link: https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md

## Article Content:

# Dashboard Page Extension Files and Code

When you generate a dashboard page extension, the CLI adds the following files to your project:

- `<your-page-name>.extension.ts`: Builds the [page](#page-builder).
- `<your-page-name>.tsx`: Defines the [page content](#page-content).

## Page builder

The `<your-page-name>.extension.ts` file contains a dashboard page's builder configuration.

The page builder is defined using the following schema, shown here as a TypeScript type:

```ts
export default extensions.dashboardPage({
  id: string,
  title: string,
  routePath: string,
  component: string,
});
```

Here's an example builder definition:

```ts
export default extensions.dashboardPage({
  id: '40c70303-4eac-44cb-bb53-4e583a036682',
  title: 'My Prohect',
  routePath: 'my-project',
  component: './extensions/dashboard/pages/my-project/my-project.tsx',
});
```

### Builder fields

The following fields can be used in the configuration object:

| Field | Type | Description |
|--|--|--|
| `id` | string | Page ID as a ([GUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)). The ID is used to register the page in the [app dashboard](https://manage.wix.com/account/custom-apps). It must be unique across all pages in the app. |
| `title` | string | The page title. The title is used as the browser tab title and as the dashboard sidebar label if the page is configured to appear in the sidebar. |
| `routePath` | string | Route that lead to this page. Use this route in code to reference the page. |
| `component` | string | A route to the page content component. |

## Page content

The `<your-page-name>.tsx` file contains a dashboard page's content.

The content is defined as a [React](https://react.dev/) component that renders when the page is active.

Inside a dashboard page component you can use:

- The [Wix Dashboard React SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to navigate users to pages in the dashboard, display modals, and send users alerts using toasts.
- The [Wix Design System](https://www.wixdesignsystem.com/) to display content using the same React components Wix uses to build its own dashboard pages.
- The [Wix JavaScript SDK](https://dev.wix.com/docs/sdk.md) to access and manage other Wix data.
- [`httpClient.fetchWithAuth`](https://dev.wix.com/docs/sdk/core-modules/essentials/http-client.md) from `@wix/essentials` to call your project's own [backend HTTP endpoints](https://dev.wix.com/docs/wix-cli/guides/development/http-endpoints/add-http-endpoints-to-your-project.md).