Migrate a Dashboard Modal Extension

This guide explains how to add a dashboard modal extension to your new Wix CLI project as part of migrating an app from the legacy Wix CLI.

Folder structure

Step 1 | Move and rename files

To move existing files into the new project:

1. In the new project, create the folder src/extensions/dashboard/modals/<name>/.
2. Copy modal.tsx from the legacy project's src/dashboard/modals/<name>/ folder into the new project's src/extensions/dashboard/modals/<name>/ folder, and rename it to <name>.tsx.
3. Fix any import paths in the .tsx file if needed, including imports of backend code.

Don't copy the old modal.json file. It is replaced by a new .extension.ts file.

Step 2 | Create the extension file

In src/extensions/dashboard/modals/<name>/, create <name>.extension.ts:

Step 3 | Register the extension

In the new project, in src/extensions.ts, import the extension and add it with .use():

Step 4 | Return to the main migration guide

Return to the Test, build, and release step in the main migration guide.