> 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 Event Extensions with the CLI

## Article: Add Event Extensions with the CLI

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/backend-extensions/events/add-event-extensions-with-the-cli.md

## Article Content:

# Add Event Extensions 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>


Events are triggered when specific conditions on your app or a user’s site are met. Wix Apps can respond to these events using event extensions created in the CLI. Events in the CLI are built on Javascript SDK webhooks, and event extensions subscribe your app to these webhooks behind the scenes.

Learn more [about event extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/events/about-event-extensions.md).

<blockquote class="tip">

**Tip:**

- In Wix Blocks, you can [handle events using Velo](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md).
- When [self-hosting your app](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/about-self-hosting-for-wix-apps.md), you can implement [webhooks](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/events-and-webhooks/about-webhooks.md) using REST APIs or the Javascript SDK.

</blockquote>

Follow the instructions below to:

1. Create an event extension for your app.
1. Add permissions requirements to your app.
1. Test the event extension on a site.
1. Deploy your app with the event extension.

Once this task is complete, your app will have an event extension that is triggered when a specific event occurs on a site.

## Step 1 | Create the extension

In the terminal:

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

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

3. The CLI will display a menu of extensions to generate.
<!--
4. The CLI will prompt you to select an event from a list of available events.
5. The CLI will prompt you to select which permission related to the event you wish to add to your app. You may only select one permission. If your app already requests one of the permissions related to the event, the CLI will skip this step.
6. The CLI will prompt you to name your event folder. This is the name of the folder in the project repo that contains the event code, and the name of the event in the Wix Dev Center. Only you will see this name.

Upon completion, the extension file will be created in your project directory with the following structure:

```tsx
.
└── <your-app-name>/
    └── src/
        └── backend/
            └── events/
                └── <your-event-name>
                    └── event.ts
```

### **event.ts**

This file is required and contains:

- The relevant import statement for the event.
- An empty function where you can implement your custom logic. Wix calls this function when the given event occurs, passing the event object and its metadata.

For example, the `event.ts` for the Wix Stores [Product Created event](https://dev.wix.com/docs/api-reference/business-solutions/stores/catalog-v1/catalog/product-created.md) looks like this:

```tsx
import { products } from "@wix/stores";

products.onProductCreated((event, metadata) => {
  // Add you logic here
});
```

--->

4. The CLI will prompt you to name your event folder. This is the name of the folder in the project repo that contains the event code, and the name of the event in the app dashboard. Only you will see this name.

Upon completion, an extension file will be created in your project directory with the following structure:

```tsx
.
└── <your-app-name>/
    └── src/
        └── backend/
            └── events/
                └── <your-event-name>
                    └── event.ts
```

### **event.ts**

This file is required and must contain:

- The relevant import statement for the event.
- An event function where you can implement your custom logic. Wix calls this function when the given event occurs, passing the event object and its metadata. Event functions are documented in their module in the [Javascript SDK reference](https://dev.wix.com/docs/sdk.md).

The generated `event.ts` file will contain example code for an event.

The `event.ts` file must be in the following format:

```tsx
import { <submodule> } from '@wix/<service-module>';

<submodule>.<event-handler>((event) => {
// Add your logic here
});
```

For example, an `event.ts` for the Wix CRM [onContactCreated()](https://dev.wix.com/docs/api-reference/crm/members-contacts/contacts/contacts/contact-v4/contact-created.md) event should look like this:

```tsx
import { contacts } from "@wix/crm";

contacts.onContactCreated((event) => {
  // Add your logic here
});
```

## Step 2 | Add required permissions to your app

Events require certain [permissions](https://dev.wix.com/docs/build-apps/develop-your-app/access/authorization/about-permissions.md) that you need to [configure](https://dev.wix.com/docs/build-apps/develop-your-app/access/authorization/configure-permissions-for-your-app.md) for your app.

The required permission scopes for an event are listed in the documentation for that event in the [SDK reference](https://dev.wix.com/docs/sdk.md). For example, to work with the Wix CRM [`onContactCreated()`](https://dev.wix.com/docs/api-reference/crm/members-contacts/contacts/contacts/contact-v4/contact-created.md), your app could request the `MANAGE MEMBERS AND CONTACTS - ALL PERMISSIONS` permission scope.

![onContactCreated permission scopes](https://wixmp-833713b177cebf373f611808.wixmp.com/images/a9a53ed4248cac895ce0f306d197e59a.png)

To configure permissions requirements for your app:

1. Go to the [Permissions page](https://dev.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fdev-center-permissions) in your app's dashboard.
1. Click **Add Permissions**.
1. Click **Search by name or ID** and enter the name of the permission scope you selected.
1. The permission scope will appear under **Choose Permission Scopes**. Click the checkbox next to it, and then click **Save**.

## Step 3 | Test your event extension

<blockquote class="important">

**Important:**
Currently, local development is not supported for all events in the CLI. If you are unable to test your event in the local development environment as described in this step, you can still see it in action by pushing your changes to production. (See [Step 4 | Build and deploy your app.](#step-4--build-and-deploy-your-app))

</blockquote>

To test your event extension, you must:

1. Add logging inside your backend logic.
1. Trigger the event.
1. View the logs in the terminal.

### Add logging inside your backend logic

Inside your `event.ts` file, add a `console.log()` command to one of your functions. For example:

```tsx
import { contacts } from "@wix/crm";

contacts.onContactCreated((event) => {
  console.log("A contact was created.", event.entity);
});
```

### Trigger the event

The process for triggering an event depends on the type of event:

- Events that can be triggered by actions on a site or its dashboard can be triggered in the CLI's local development environment, in which case logs will be displayed in the CLI.
- Events that can't be triggered by actions on a site or dashboard cannot currently be tested with the CLI.

To trigger to the event in the local development environment, you must navigate to the site or its dashboard in your local development environment, then take an action will trigger your event.

1. From your app's directory in the terminal, run the following command:

   ```tsx
   npm run dev
   ```

1. Press `D` to open a dashboard page of your development site in your browser.
1. If you can take an action to trigger your event in the dashboard, do so. Otherwise, proceed to the next step.
1. Navigate to the **Home** tab in the dashboard sidebar.
1. Click the three dots and then click **View live site** as shown in the image below. <br><br>
   ![View live site](https://wixmp-833713b177cebf373f611808.wixmp.com/images/bdc5286a8e4c95e7572e4e00bd218dfa.png)
1. Take an action will trigger your event. This action depends on your specific event.

### View the logs in the terminal

Navigate back to the CLI terminal and you will see the logs from your backend logic in the following form:

```tsx
5:45:11 PM Your console log message.
```

> **Note:** To view logs for events in production, use the [`logs`](https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/app-development/command-reference.md) command.

## Step 4 | 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.

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

> **Note:** Event extensions are built on [webhooks](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/events-and-webhooks/about-webhooks.md). Changes to event extensions automatically create a new minor app version. Learn more about [webhooks and versioning](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/events-and-webhooks/about-webhooks.md#webhooks-and-versioning).

## Delete an event extension

<blockquote class="caution">

**Caution:**
Event extensions are managed independently from app versions. Deleting an event extension and creating a new version of your app deletes the event extension from all versions.

</blockquote>

To delete an event extension from your app, delete the subfolder under `src/backend/events` that contains your event extension's files.

## See also

- [About Events](https://dev.wix.com/docs/build-apps/develop-your-app/api-integrations/events-and-webhooks/about-events.md)
- [About Event Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/backend-extensions/events/about-event-extensions.md)