> 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 Plugin Extension with the CLI

## Article: Add Dashboard Plugin Extension with the CLI

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/dashboard-extensions/dashboard-plugins/add-dashboard-plugin-extension-with-the-cli.md

## Article Content:

# Add a Dashboard Plugin Extension with the CLI

<blockquote classname="warning">

**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).

</blockquote>

Dashboard plugins allow you to extend and enhance the functionality of apps built by Wix, such as Wix Bookings and Wix Stores.  

The Wix CLI makes it easy to create and develop dashboard plugins for dashboard pages. 
You build your plugin using Wix’s React/Node.js stack. Your plugin is then deployed and hosted on the Wix cloud. 

For more information on dashboard plugin extensions, read [About Dashboard Plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md).

Follow the instructions below to:
1. Create a dashboard plugin extension for a Wix CLI app.
1. Customize your dashboard plugin.
1. Build and deploy your app.

Once this task is complete, your app will have a dashboard plugin extension that adds a plugin to a specific dashboard page of 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 already have one, [sign up for a Wix Studio account](https://manage.wix.com/account/custom-apps).


## Step 1 | Create the plugin extension

In the terminal: 

1. Navigate to your project repo.
1. Run the following command.
    `npm run generate -- --type=DASHBOARD_PLUGIN`
1. Follow the prompts for creating a  dashboard plugin.

Upon completion, the extension files will be created in your app directory with the following structure: 
```tsx
.
└── <your-app-name>/
    └── src/
        └── dashboard/
            └── plugins/
                └── <your-plugin-name>/
                    ├── plugin.json
                    └── plugin.tsx
```


- [`plugin.json`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md#plugin-extension-configuration-pluginjson): This file contains your plugin’s JSON configuration.
- [`plugin.tsx`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md#plugin-content-plugintsx): This file contains your plugin’s react component.

Learn more about [dashboard plugin extension files and code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md).

## Step 2 | Customize your dashboard plugin

Once you finish generating your dashboard plugin, you can find your plugin’s auto-generated React component in the `plugin.tsx` file. 

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

    `npm run dev`

1. Press the number that corresponds to the dashboard page hosting your plugin. This will open a browser window previewing your dashboard page.
    
    ![page plugin](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6a4cd4e474e7ccc11407f2c2a9a2ddcf.png)
    Leave this window open.

1. Go to your `plugin.tsx` file and edit the subtitle in the `<Card.Content>`  component to "Hello world!". Note that the subtitle on your plugin says “Replace this with your own code”.

    ```tsx
    function PagePlugin() {
      return (
        <WixDesignSystemProvider>
          <Card>
            <Card.Header
              title="Page Plugin"
              subtitle={
                <Box direction="horizontal" gap="1">
                  <Text secondary>This is your page plugin.</Text>
                  <TextButton as="a" href="https://wix.to/JaXp37C" target="_blank">
                    Learn more
                  </TextButton>
                </Box>
              }
            />
            <Card.Divider />
            <Card.Content size="medium">
              <EmptyState
                theme="section"
                title="Here is some content"
                subtitle="Hello world!"
              />
            </Card.Content>
          </Card>
        </WixDesignSystemProvider>
      );
    }
    ```

    >**Note:** When it comes to designing the UI for your plugin, consider using the [Wix Design System](https://www.wixdesignsystem.com/), a collection of reusable React components that you can use to make your app appear and feel like a native app built by Wix. 


1. Customize your plugin to interact with the dashboard page data passed to the [plugin’s slot](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md) using the [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) function from the Dashboard SDK:

    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()` function. 
    
        ```js
        dashboard.observeState((componentParams) => {
          console.log("componentParams:", componentParams);
        });
        ```

    1. Use React to add code and logic to your plugin. 
 
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 with your new plugin, you can build your app and release a version on the [**Custom Apps** page](https://manage.wix.com/account/custom-apps) in your Wix Studio workspace.

1. Run the following command to build your app:

    ```bash
    npm run build
    ```

1. Run the following command and follow the prompts to release an app version:

    ```bash
    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.

>**Note:** If you make changes to your plugin after you’ve released a version of your app, you will need to release a new version in order to see the updated plugin.

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 plugin
To delete an existing dashboard plugin from your app, delete the subfolder under `src/dashboard/plugins` that contains your dashboard plugin’s files. 

> **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 plugin's files from your project does not remove the dashboard plugin from your app's latest version in the app dashboard. To remove the dashboard plugin, release a new version after deleting the [dashboard plugin's files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md).


## See also
- [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md)
- [About Dashboard Plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md)
- [About Dashboard Page Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md)
- [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md)
- [About Dashboard Plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md)
- [About Dashboard Page Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md)
- [Tutorial | Create an App with Wix CLI](https://dev.wix.com/docs/build-apps/get-started/quick-start/create-an-app-with-the-wix-cli.md)