Migrate a Dashboard Modal Extension

Add a dashboard modal extension to your new Wix CLI project as part of migrating an app from the legacy Wix CLI.

Folder structure

Legacy path	New path
src/dashboard/modals/<name>/modal.json	src/extensions/dashboard/modals/<name>/<name>.extension.ts
src/dashboard/modals/<name>/modal.tsx	src/extensions/dashboard/modals/<name>/<name>.tsx

Step 1 | Copy and rename the file

In the new project:

1. Create the folder src/extensions/dashboard/modals/<name>/.
2. From the legacy project's src/dashboard/modals/<name>/ folder, copy modal.tsx into the new folder, and rename it to <name>.tsx.

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

Step 2 | Adapt the code to the new project

In <name>.tsx:

1. Replace any import from the legacy modal.json with the values themselves. The legacy CLI generates the extension with import { width, height, title } from './modal.json', and your code may also import id. The JSON file isn't copied to the new project. Set the values directly in the component, or pass them as props.
2. Update any imports as needed, to use the new paths.
3. 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 in the main migration guide.
4. 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 or Migrate from HTTP Functions to HTTP Endpoints.

Step 3 | Create the extension file

In the new project:

1. In src/extensions/dashboard/modals/<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 modal.json	Copy source as is
   title	title in modal.json	Copy source as is
   component	None	Path to <name>.tsx, relative to src/

3. Add any of the following fields that apply, inside the same object:

   Copy

   Field	Source in legacy project	What to specify	Condition
   width	width in modal.json	Copy source as is	Only if your legacy modal.json sets it
   height	height in modal.json	Copy source as is	Only if your legacy modal.json sets it

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.