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.

Folder structure

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 or Migrate from HTTP Functions to HTTP Endpoints.

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:

   Copy

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

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:

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:

   Copy

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

   Copy

Step 5 | Return to the main migration guide

Return to Install the extension's dependencies in the main migration guide.