> 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 Blocks Site Widget Extension in the CLI

## Article: Add a Blocks Site Widget Extension in the CLI

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/site-extensions/blocks-site-widgets/add-a-blocks-site-widget-extension-in-the-cli.md

## Article Content:

# Add a Blocks Site Widget Extension with the Wix CLI for Apps

<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>

<blockquote class="important">

**Important:** This article describes the Blocks-CLI integration, which only works with the Wix CLI for Apps. We're introducing a [unified Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md), which we recommend for developing apps and headless projects. The unified Wix CLI doesn't support this integration.

</blockquote>

The Wix CLI makes it easy to add and develop [site widgets](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md) in your app. These are considered app extensions, and appear on the Extensions page in your app's dashboard.

The CLI offers two types of site widget extensions: Blocks site widget extensions and custom element site widget extensions. Read more about the differences between the types and the benefits of each in [About Site Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/about-site-extensions.md#site-widget-extensions).

Blocks site widget extensions are created with a hybrid development workflow that combines the visual design capabilities of Wix Blocks with the CLI development environment.

This allows you to design your widget in the Wix Blocks Editor, and then sync it to the CLI where you can develop its code locally.

When your widget is synced from Blocks, the CLI adds the necessary files with template code so you can easily start developing. 

Learn more [about the Blocks-CLI integration](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-blocks-cli-integration.md).

> **Note:** Unlike other CLI extensions, Blocks site widget extensions can’t be created by manually adding the required code files to your app. You must create a widget in Blocks, then sync it to the CLI. 

Follow the instructions below to:

- Add a site widget to your app.
- Test the site widget on a site.
- Deploy your app with the site widget.

## 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 | Add a site widget to your app

In the terminal:

1. Navigate to your project repo.
1. Run the following command:

    ```tsx
    npm run generate -- --type=SITE_WIDGET
    ```

    The CLI displays a menu of extensions to generate. Select **Blocks** and press enter.

    The first time you run this command, the CLI configures your project's integration with Blocks behind the scenes and creates a widget in Blocks. It then displays instructions on how to finish setting up the extension.
   
   > **Note**: You only need to run the generate command the first time you create a widget in your project.

1. Run `npm run dev`, then press ’B’. The Blocks Editor opens in a new tab.
1. [Design the UI for your widget in Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-blocks-cli-integration.md#design-the-ui-in-blocks-and-sync-it-to-the-cli), then click **Sync** in Blocks to sync your design to your local code files.

 To create a new widget, open the Blocks Editor again, add a new widget, and click **Sync**.

Upon completion, the extension's files are added to your project’s directory with the following structure:

```tsx
.
└── <your-app-name>/
    └── src/
        └── site/
            └── widgets/
                └── blocks/
                    └── <your-widget-name>
                        ├── api.ts
                        ├── widget.json
                        └── widget.ts
```

For more information, see [Files and Code for Blocks Site Widgets](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/blocks-site-widgets/widget-files-and-code.md).

If you add [panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/about-panels-in-blocks.md) to your widget in the Blocks editor, a `panels` directory is created inside your widget’s directory. `panels` contains subdirectories for each panel you added in Blocks.

For example:

```tsx
.
└── <your-app-name>/
    └── src/
        └── site/
            └── widgets/
                └── blocks/
                    └── <your-widget-name>/
                        ├── panels/
                        │   └── <your-panel-name>/
                        │       ├── panel.json
                        │       └── panel.ts
                        ├── api.ts
                        ├── widget.json
                        └── widget.ts
```

For more information, see [Files and Code for Blocks Site Widget Panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/blocks-site-widgets/panel-files-and-code.md).

## Step 2 | Develop and test your site widget

Your widget's UI is managed in Blocks, and its code is managed in the CLI.

To develop your widget's UI:
1. Run `npm run dev`, then press ’B’ to open the Blocks Editor.
1. [Design the UI for your widget in Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-blocks-cli-integration.md#design-the-ui-in-blocks-and-sync-it-to-the-cli), then click **Sync** to sync your design to your local code files.

To develop your widget's code, edit your widget extension's files in the CLI.

You can test your site widget while you're developing by running the following command:

```bash
npm run dev
```

You can then either:

- Press `E` to view your site widget in the editor. This opens your test site editor in your browser, where you can view and try out your site widget and custom panels as they will appear to Wix users. Certain behavior, such as using the [Editor API](https://dev.wix.com/docs/sdk/host-modules/editor/introduction.md), can only be tested in the editor.
- Press `S` to view your site widget on your test site. This opens the live site in your browser where you can try out your site widget and custom panels as they appear to site visitors and members. Certain behavior, such as using the [Site API](https://dev.wix.com/docs/sdk/host-modules/site/introduction.md), can only be tested on a live site.

    Before you can test your site widget on your test site, you must complete the following one-time setup:

    1. [Build and release your app](#step-3--build-and-deploy-your-app).
    1. Add your widget to your test site in the editor and publish the site.    

When you sync changes from the Blocks Editor or make changes to your extension's code in the CLI, the changes are immediately reflected in the test site and editor.

## Step 3 | Build and deploy your app

Once your app is ready for production, you can build it and release an [app version](https://dev.wix.com/docs/build-apps/manage-your-app/versioning/about-app-versioning.md).

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. 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-clis/legacy-wix-cli-for-apps/app-development/build-and-deploy-an-app-with-the-cli.md).

## Delete a Blocks site widget extension

To delete a Blocks site widget extension from your app, delete the widget in the Blocks editor and sync the changes to the CLI. Deleting the widget's files in your IDE won't delete the widget in Blocks, and the files will be restored to your project the next time you sync from Blocks.

> **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 Blocks site widget from your project does not remove it from your app's latest version in the app dashboard. To remove it from the app dashboard, create a new version after deleting the extension in your project.

## See also

- [About the Blocks-CLI Integration](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-the-blocks-cli-integration.md#design-the-ui-in-blocks-and-sync-it-to-the-cli)
- [Manage Blocks App Versions](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/manage-blocks-app-versions.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)