> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Add Dashboard Page Extensions with the CLI
## Article: Add Dashboard Page Extensions with the CLI
## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/dashboard-extensions/dashboard-pages/add-dashboard-page-extensions-with-the-cli.md
## Article Content:
# Add Dashboard Page Extensions with the Wix CLI for Apps
**Deprecated**
The Wix CLI for Apps is deprecated and no longer receives updates or new features. New projects should use the unified [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md).
Wix Apps can extend the [Wix Dashboard](https://support.wix.com/en/article/about-your-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](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-pages/about-dashboard-page-extensions.md)
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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/get-started/quick-start.md).
+ You must be logged into your Wix Studio account. If you don’t have one, [sign up for a Wix Studio account](https://manage.wix.com/account/custom-apps).
## Step 1 | Create the extension
Run the following command and follow the prompts to create a dashboard page extension:
```tsx
npm run generate -- --type=DASHBOARD_PAGE
```
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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md#page-routes).
The extension files will be created in your local app files under the chosen route with the following structure:
```tsx
src
└── dashboard
└── pages
└──
├── page.json
└── page.tsx
```
For more information about these files, see [Dashboard Page Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md).
## Step 2 | Customize your dashboard page
1. Run the following command to open the `dev menu`:
```
npm run dev
```
1. 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.
1. Go to your dashboard page's `page.tsx` file and change `subtitle` in `Page.Content` to `"Hello world!"`:
```tsx
export default function() {
return (
);
}
```
1. 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.
1. Add the following import statement to your code:
```js
import { dashboard } from '@wix/dashboard';
```
1. To retrieve the data from the dashboard page, use the [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) function.
```js
dashboard.observeState((componentParams) => {
console.log("componentParams:", componentParams);
});
```
1. Use React to add code and logic to your dashboard page.
1. Save your file.
1. 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 release a version. You can view your [app versions](https://manage.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fversions-app) in the app dashboard.
1. Run the following command to build your app:
```tsx
npm run build
```
2. Run the following command and follow the prompts to release an app version:
```tsx
npm run release
```
An app version allows you to publish an app to the [Wix App Market](https://www.wix.com/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](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md).
## 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md).
> **Note**: If you've already [released a version](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md#step-3--release-an-app-version) of your app, deleting a dashboard page's files from your project does not remove the dashboard page from your app's latest version in the app dashboard. To remove the dashboard page, [release a new version](https://dev.wix.com/docs/wix-cli/legacy/wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md#step-3--release-an-app-version) after deleting the [dashboard page's files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md).
## Templates and Tutorials
The following CLI app templates with dashboard pages are available:
+ [Custom Products Catalog](https://dev.wix.com/apps-templates/template?id=24493a0d-18f2-4f68-b6d5-55992cef7daa) - Add or remove products via a dashboard page using [Wix Stores APIs](https://dev.wix.com/docs/rest/business-solutions/stores/about-wix-stores.md).
+ [Mixpanel Analytics](https://dev.wix.com/apps-templates/template?id=c442b755-2276-4336-918a-915865a9fa2b) - Embed Mixpanel's tracking code directly into the DOMs of sites.
## See also
- [Tutorial | Create an App with Wix CLI](https://dev.wix.com/docs/build-apps/get-started/quick-start/create-an-app-with-wix-cli.md)
- [Tutorial | Build a Locations App Using the Wix CLI](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-build-a-locations-app-with-the-cli.md)
- [Tutorial | Create a Custom Products Catalog App with the CLI](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-create-a-custom-products-catalog-app-with-the-cli.md)