> 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
> - To build a Wix site agentically, follow https://www.wix.com/headless/skill.md

## Resource: Migrate a Site Plugin Extension

## Article: Migrate a Site Plugin 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-site-plugin-extension.md

## Article Content:

# Migrate a Site Plugin Extension

Add a site plugin 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/site/plugins/custom-elements/<name>/plugin.json` | `src/extensions/site/plugins/<name>/<name>.extension.ts` |
| `src/site/plugins/custom-elements/<name>/plugin.tsx` | `src/extensions/site/plugins/<name>/<name>.tsx` |
| `src/site/plugins/custom-elements/<name>/panel.tsx` | `src/extensions/site/plugins/<name>/<name>.panel.tsx` |
| `src/site/plugins/custom-elements/<name>/plugin.module.css` | `src/extensions/site/plugins/<name>/<name>.module.css` |

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

## Step 1 | Copy and rename the files

In the new project:

1. Create the folder `src/extensions/site/plugins/<name>/`.
2. From the legacy project's `src/site/plugins/custom-elements/<name>/` folder, copy the following files into the new folder, and rename them:
    - `plugin.tsx` to `<name>.tsx`
    - `panel.tsx` to `<name>.panel.tsx`
    - `plugin.module.css`, if present, to `<name>.module.css`

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

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

In `<name>.tsx` and `<name>.panel.tsx`:

1. Update any imports as needed, to use the new paths.
2. If either file 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).

## Step 3 | Create the extension file

In the new project:

1. In `src/extensions/site/plugins/<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.sitePlugin({
      id: '<value>',
      referenceComponentId: '<value>',
      name: '<value>',
      marketData: <value>,
      placements: [
        {
          appDefinitionId: '<value>',
          widgetId: '<value>',
          slotId: '<value>',
        },
      ],
      installation: {
        autoAdd: <value>,
      },
      tagName: '<name>',
      element: './extensions/site/plugins/<name>/<name>.tsx',
      settings: './extensions/site/plugins/<name>/<name>.panel.tsx',
    });
    ```

    | Field | Source in legacy project | What to specify |
    |-------|--------------------------|-----------------|
    | `id` | `id` in `plugin.json` | Copy source as is |
    | `referenceComponentId` | `referenceComponentId` in `plugin.json` | Copy source as is |
    | `name` | `marketData.name` in `plugin.json` | Copy source as is |
    | `marketData` | `marketData` in `plugin.json` | Copy source as is. If `marketData.logoUrl` references a local `assets/` folder, see [Update the logo URL](#update-the-logo-url). |
    | `placements` | `placements` in `plugin.json` | 1 object per legacy entry, with the same `appDefinitionId`, `widgetId`, and `slotId` |
    | `installation.autoAdd` | `installation.autoAddToSite` in `plugin.json` | Copy source as is, or `false` if the legacy config doesn't set it |
    | `tagName` | None | The extension folder name |
    | `element` | None | Path to `<name>.tsx`, relative to `src/` |
    | `settings` | None | Path to `<name>.panel.tsx`, relative to `src/` |

<blockquote class="important">

__Important:__
The `id` and `referenceComponentId` must match the values from the legacy `plugin.json`. If `id` differs, the new entry is treated as a separate extension instead of a continuation of the legacy one. If `referenceComponentId` differs, the plugin registers a new custom element component instead of reusing the one the legacy app already registered.

</blockquote>

### Update the logo URL

If the legacy `plugin.json` has a `marketData.logoUrl` that references a local `assets/` folder, replace it with `{{BASE_URL}}/site-plugin-logo.svg`:

```ts
marketData: {
  name: '<value>',
  logoUrl: '{{BASE_URL}}/site-plugin-logo.svg',
},
```

Move the logo file itself into the new project's `public/` folder, which is where `{{BASE_URL}}` resolves to.

## Step 4 | Register the extension

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

1. Import the extension:

    ```ts
    import mySitePlugin from './extensions/site/plugins/<name>/<name>.extension';
    ```

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

    ```ts
    .use(mySitePlugin)
    ```

## 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.