> 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 a Site Plugin Extension in the CLI
## Article: Add a Site Plugin Extension in the CLI
## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/site-plugins/add-a-site-plugin-extension-in-the-cli.md
## Article Content:
# Add a Site Plugin Extension 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).
The Wix CLI makes it easy to add and develop [site plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) in your app. These are considered app extensions, and appear on the **Extensions** page in your [app's dashboard](https://manage.wix.com/account/custom-apps).
With site plugins, you can create interactive and feature-rich components that seamlessly [integrate into Wix’s business solutions](https://dev.wix.com/docs/build-apps/get-started/overview/integrating-with-wix-s-business-solutions.md), such as Wix Stores and Wix Bookings, extending their functionality and user experience.
Wix users can easily place site plugins into predefined **slots** (UI placeholders) within Wix apps, using the plugin explorer available in all Wix editors.
Site plugins in the CLI are built with [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) technology. The custom element is essentially a new HTML tag that you define, which is made available in the Wix editors as a plugin.
The Wix CLI creates the necessary files with template code so you can easily start developing your site plugin. It also calls [`define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) for the custom element that the site plugin is built on, so you don't need to explicitly call it in your code.
Follow the instructions below to:
1. Add a site plugin to your app.
2. Test the site plugin on a site.
3. Deploy your app with the site plugin.
## Before you begin
+ You must have an app project that was created using the Wix CLI.
+ 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 | Add a site plugin to your app
In the terminal:
1. Navigate to your project repo.
1. Run the following command:
```tsx
npm run generate -- --type=SITE_PLUGIN
```
The CLI displays a menu of extensions to generate. Select **Site Plugin** to continue. The CLI then prompts you for the following items:
+ **Site plugin folder**: The name of the folder in the project repo that contains the custom element code that the site plugin is built on.
+ **Site plugin name**: The name of the plugin that appears in the `plugin.json` configuration file, and in the app dashboard.
+ **Wix app**: The Wix business solution (app made by Wix) who's slot you want to add your plugin to.
+ **Slot**: The slot you want to add your plugin to. Use the arrow keys to navigate the list.
> **Note:** You can only choose one slot when generating your plugin, however you can add more slots later by adding them to the plugin's [`plugin.json`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md#pluginjson).
1. You will be asked if you would you like to set the Wix business solution to which you want to add your plugin as a requirement for your app. Press **Y**.
Upon completion, the extension files are created in your project directory with the following structure:
```tsx
.
└── /
└── src/
├── assets/
│ └── /
│ └── logo.svg
└── site/
└── plugins/
└── custom-elements/
└──
├── panel.tsx
├── plugin.json
├── plugin.module.css
└── plugin.tsx
```
+ [`logo.svg`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md#plugin-logo) - This file is the logo displayed for your plugin when a site owner views the plugins that can be added to a slot.
+ [`panel.tsx`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md#paneltsx) - This file is required and contains the code for the site plugin's settings panel.
+ [`plugin.json`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md#pluginjson) - This file is required and configures how your site plugin integrates with a Wix site. It defines the locations where the plugin can be added.
+ `plugin.module.css` - This file is optional and configures CSS styling to customize your plugin's appearance. It is generated with some initial styles to help you get started.
+ [`plugin.tsx`](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md#plugintsx) - This file is required and contains the custom element code that supports the site plugin.
## Step 2 | Testing your site plugin
Follow the steps below to test your site plugin:
1. Run the following command:
```bash
npm run dev
```
1. Select the option in the CLI menu to view your site plugin in the editor. This will open your test site editor in your local development environment.
1. Navigate to the page that contains your plugin slot and click on the page to select it.
1. Click the **Plugin** icon that appears in the page toolbar.
1. In the Plugins modal, find the plugin you created and click **+ Add**.
1. Publish your site.
1. Return to the CLI menu and select the option to view your site plugin on your site. This will open your site in the local development environment.
1. Navigate to the page that contains your plugin slot. Your plugin should be visible in the slot.
## Step 3 | Build and deploy your app
Once your app is ready for production, you can build it and release a version in the app dashboard.
1. Run the following command to build your app:
```bash
npm run build
```
2. 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. 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.
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).
## Step 4 | (Optional) Build a dashboard page to manage your site plugin
If your plugin requires a back office management interface, you can create one either within the Wix dashboard, or as an external dashboard on a third-party platform. Learn about [building a dashboard page to manage your site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/build-a-dashboard-page-to-manage-your-site-plugin.md).
## Delete a site plugin extension
To delete an existing site plugin extension from your app:
1. Delete the subfolder under `src/site/plugins/custom-element/` that contains your site plugin's files.
2. Delete your plugin extension's logo file in `src/assets`.
> **Note**: If you've already [created 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--create-an-app-version) of your app, deleting a site plugin's files from your project does not remove the site plugin from your app's latest version in the app dashboard. To remove the site plugin, create a new version after deleting the [site plugin's files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/site-plugin-extension-files-and-code.md).
## 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)