> To build a Wix site agentically, follow https://www.wix.com/headless/skill.md
> 
> 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`).
> - If a reference page seems to be missing its schema (parameters, return types, or type definitions), append `?schema=true` to its `.md` URL (e.g. `https://dev.wix.com/docs/contexts/contexts/stores/category-info/use-category-info-context.md?schema=true`).
> - 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: Migrate a Dashboard Page Extension

## Article: Migrate a Dashboard Page Extension

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-dashboard-page-extension.md

## Article Content:

# Migrate a Dashboard Page Extension

Add a dashboard page extension to your new Wix CLI project as part of [migrating an app from the legacy Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md).

## Folder structure

| Legacy path | New path |
|--------|-----|
| `src/dashboard/pages/<name>/page.json` | `src/extensions/dashboard/pages/<name>/<name>.extension.ts` |
| `src/dashboard/pages/<name>/page.tsx` | `src/extensions/dashboard/pages/<name>/<name>.tsx` |

> **Note:** `<name>` is your extension's folder name in the legacy project. The new folder and files use the same name.

A legacy dashboard page's files can also sit directly in `src/dashboard/pages/` instead of in a subfolder. Migrate it like any other page. Since it has no folder to take a name from, choose a `<name>` for it, for example a slugified version of its title.

## Step 1 | Copy and rename the files

In the new project:

1. Create the folder `src/extensions/dashboard/pages/<name>/`.
2. From the legacy project's `src/dashboard/pages/<name>/` folder, or from `src/dashboard/pages/` if the extension has no subfolder, copy `page.tsx` into the new folder, and rename it to `<name>.tsx`.
3. Copy any asset files the extension imports into the new folder.

Don't copy the legacy `page.json` file. You recreate its values in `<name>.extension.ts`.

## Step 2 | Adapt the code to the new project

In `<name>.tsx`:

1. Update any imports as needed, to use the new paths.
2. Replace any import from the legacy `page.json`, such as `import { id } from './page.json'`, with the value itself. The JSON file isn't copied to the new project. The same applies to an import from another extension's legacy config file, such as a modal's `modal.json`.
3. If the component imports `wix.config.json`, for example to read `appId`, replace the import with the value. The new project has no `wix.config.json`.
4. If the component imports shared code from outside the extension's folder, such as components or hooks under `src/dashboard/`, copy that code into the new project at the same path, and update the relative imports from the component's new location. See [Add the extension to the new project](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md#add-the-extension-to-the-new-project) in the main migration guide.
5. If the component calls a web method or an HTTP function, replace the call. Fixing the import path isn't enough, because the legacy backend code doesn't exist in that form after the migration. See [Migrate from Web Methods to HTTP Endpoints](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-from-web-methods-to-http-endpoints.md#update-your-frontend-call-sites-as-you-migrate-each-extension) or [Migrate from HTTP Functions to HTTP Endpoints](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-from-http-functions-to-http-endpoints.md#update-your-frontend-call-sites-as-you-migrate-each-extension).

> **Note:** Asset imports such as `import logo from './logo.svg'` resolve to a URL string in the new project, as they do in your legacy project, so they need no change. An import with the `?url` suffix also works.

## Step 3 | Create the extension file

In the new project:

1. In `src/extensions/dashboard/pages/<name>/`, create `<name>.extension.ts`.
2. Add the following code, and set each field to the value the table below specifies:

    ```ts
    import { extensions } from '@wix/custom-extensions';

    export default extensions.dashboardPage({
      id: '<value>',
      title: '<value>',
      routePath: '<value>',
      component: './extensions/dashboard/pages/<name>/<name>.tsx',
    });
    ```

    | Field | Source in legacy project | What to specify |
    |-------|--------------------------|-----------------|
    | `id` | `id` in `page.json` | Copy source as is |
    | `title` | `title` in `page.json` | Copy source as is |
    | `routePath` | None | The page's current route, which keeps the URL the page already has, or a slug of your choice. See [Find the current route](#find-the-current-route). |
    | `component` | None | Path to `<name>.tsx`, relative to `src/` |
    | `priority` | `sidebar.priority` in `page.json` | If your legacy `page.json` sets it, add `priority` and copy the number as is, to preserve the sidebar order. See [Sidebar order (`priority`)](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/supported-extensions/dashboard/dashboard-pages/dashboard-page-extension-files-and-code.md#sidebar-order-priority). |

<blockquote class="important">

__Important:__
The `id` must match the value from the legacy `page.json`. Otherwise, the new entry is treated as a separate extension instead of a continuation of the legacy one.

</blockquote>

### Find the current route

A legacy `page.json` has no `routePath` field. The legacy CLI derives each page's route from where the page's files sit in `src/dashboard/pages/`:

- A page whose files sit directly in `src/dashboard/pages/` has an empty route. This is the page created with your app.
- A page in a subfolder has the subfolder's path as its route. Nested subfolders make a longer route.

For example, a page in `src/dashboard/pages/products/` has the route `products`, and a page in `src/dashboard/pages/products/analytics/` has the route `products/analytics`.

<blockquote class="important">

__Important:__
The page created with your app has an empty `routePath`, which is what makes it the page your app opens by default. Specify `routePath: ''` to keep that. An empty route is a valid value, and the new project's own starter page ships with one, so this page keeps the URL it already had.

</blockquote>

## Step 4 | Register the extension

In the new project, in `src/extensions.ts`:

1. Import the extension:

    ```ts
    import myDashboardPage from './extensions/dashboard/pages/<name>/<name>.extension';
    ```

2. Add a `.use()` call for it to the `app()` chain, on its own line:

    ```ts
    .use(myDashboardPage)
    ```

## Step 5 | Return to the main migration guide

Return to [Install the extension's dependencies](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md#install-the-extensions-dependencies) in the main migration guide.