Add Dashboard Page Extensions with the CLI

Wix Apps can extend the Wix Dashboard by adding new pages to the dashboard. You can create a dashboard page to help users manage their sites or businesses. Dashboard pages aren’t part of a live site, so site visitors never see them.

The Wix CLI makes it easy to create and develop dashboard page extensions, and to manage dashboard pages in the sidebar.

For general information about this extension type, read About Dashboard Page Extensions

Follow the instructions below to:

1. Create a dashboard page extension for a Wix CLI app.
2. Customize your dashboard page.
3. Build and deploy your app.

Once this task is complete, your app will have a dashboard page extension that adds a new dashboard page to a user's site.

Before you begin

• You must have an app project that was created using the Wix CLI.
• You must be logged into your Wix Developer account. If you don’t have one, sign up for a Wix Developer account.

Step 1 | Create the extension

Run the following command and follow the prompts to create a dashboard page extension:

Enter the route for your page. The route is the path that is appended to the dashboard base URL to access the dashboard page. For more information, see Page Routes.

The extension files will be created in your local app files under the chosen route with the following structure:

For more information about these files, see Dashboard Page Extension Files and Code.

Step 2 | Customize your dashboard page

1. Run the following command to open the dev menu:

   Copy

2. Press D to view a list of dashboard pages, then select the number corresponding to your new dashboard page's route name. This will open a browser window previewing your dashboard page.

   Note that the subtitle on the page is "Edit src/dashboard/pages/test-route-2/page.tsx to change this text."

   Leave this window open.

3. Go to your dashboard page's page.tsx file and change subtitle in Page.Content to "Hello world!":

   Copy

4. If you use a menu plugin to navigate to your dashboard page, you can customize your dashboard page extension to interact with any data that is passed from the dashboard page that hosts the menu plugin.

   1. Make sure the @wix/dashboard package is installed in your app.

   2. Add the following import statement to your code:

      Copy

   3. To retrieve the data from the dashboard page, use the observeState() function.

      Copy

   4. Use React to add code and logic to your dashboard page.

5. Save your file.

6. Navigate back to the dashboard page in your browser and see your changes.

Step 3 | Build and deploy your app

Now that your app is ready for production, you can build your app and create a version. You can view your app versions in the app dashboard.

1. Run the following command to build your app:

2. Run the following command and follow the prompts to create an app version:

An app version allows you to publish an app to the Wix App Market or install it on a site with a direct install URL.

For more information about building and deploying your app, see Build and Deploy an App with the CLI.

Delete a dashboard page

To delete an existing dashboard page from your app, delete the subfolder under src/dashboard/pages that contains your dashboard page's files.

Templates and Tutorials

The following CLI app templates with dashboard pages are available:

• Custom Products Catalog - Add or remove products via a dashboard page using Wix Stores APIs.
• Mixpanel Analytics - Embed Mixpanel's tracking code directly into the DOMs of sites.

See also

• Tutorial | Create an App with Wix CLI
• Tutorial | Build a Locations App Using the Wix CLI
• Tutorial | Create a Custom Products Catalog App with the CLI