Add Dashboard Page Extensions with the Wix CLI for Headless

You can add new dashboard pages to your headless project using dashboard page extensions. You can use dashboard pages to help you manage your project.

The Wix CLI for Headless makes it easy to create and develop dashboard page extensions, and to manage dashboard pages in your project's dashboard 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 your project.
2. Customize your dashboard page.
3. Build and deploy your project.

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

Before you begin

• You must have a project that was created using the Wix CLI for Headless.
• You must be logged into your Wix Studio account. If you don't have one, sign up for a Wix Studio account.
• Learn how to interact with the Wix Dashboard using the Wix Dashboard SDK.

Step 1 | Create the extension

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

   Copy

2. Enter a name for your page's folder. The CLI will create this directory with the chosen name containing your page's files.

3. Enter the route for your page. The route is the path that is appended to your project's dashboard base URL to access the dashboard page.

The extension files will be created in your local project files under src/extensions/<your-dashboard-page-name>/ 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. Click the link to open your project's dashboard in your browser and navigate to the page you've created. 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 project.
   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 project

Now that your project is ready for production, you can build and release your project.

1. Run the following command to build your project:

2. Run the following command and follow the prompts to release your project:

For more information about building and deploying your project, see Build and Deploy a Project with the Wix CLI for Headless.

Delete a dashboard page

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