Add Event Extensions with the CLI

This feature is in Developer Preview and is subject to change.

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.

For more information about events, read About Events.

Follow the instructions below to:

  1. Create an event extension for your app.
  2. Add permissions requirements to your app.
  3. Test the event extension on a site.
  4. 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.

Before you begin

Step 1 | Create the extension

In the terminal:

  1. Navigate to your project repo.

  2. Run the following command:

    Copy
    1
  3. The CLI will display a menu of extensions to generate. Select Event and hit enter to continue.

  1. 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, an extension file will be created in your project directory with the following structure:

Copy
1

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.

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

The events.ts file must be in the following format:

Copy
1

For example, an event.ts for the Wix CRM onContactCreated() event should look like this:

Copy
1

Step 2 | Add permissions requirements to your app

To work an event your app must have the required permissions for that event. You must configure your app in the Wix Dev Center to request those permissions when installed.

The required permission scopes for an event are listed in the documentation for that event's webhook in the SDK reference. For example, to work with the Wix CRM onContactCreated(), your app could request the MANAGE MEMBERS AND CONTACTS - ALL PERMISSIONS permission scope.

To configure permissions requirements for your app:

  1. Locate your app in the Wix Dev Center and click Edit.
  2. Click the Permissions tab in the left menu.
  3. Click Add Permissions.
  4. Click Search by name or ID and enter the name of the permission scope you selected.
  5. 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

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

To test your event extension, you must:

  1. Add logging inside your backend logic.
  2. Trigger the event.
  3. 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:

Copy
1

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 first navigate to the site or its dashboard in your local development environment:

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

    Copy
    1
  2. The CLI will prompt you for consent to use Wix's tunneling solution to route traffic to your local environment. Press Y to continue. This is a one-time request for consent.

  3. Press D to open a dashboard page of your development site in your browser.

  4. If you can take an action to trigger your event in the dashboard, do so. Otherwise, proceed to the next step.

  5. Navigate to the Home tab in the dashboard sidebar.

  6. Click the three dots and then click View live site as shown in the image below.

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

Copy
1

Only the last 5 logs will be shown here.

To view the full set of logs, either:

  • Press L to move to the full logs view. You can then press C to clear the logs, use the arrow keys to navigate, or press ESC to go back.
  • Navigate to .wix/dev.log in your local files.

Step 4 | Build and deploy your app

Once your app is ready for production, you can build it and create a version in the Dev Center.

  1. Run the following command to build your app:

    Copy
    1
  2. Run the following command and follow the prompts to create an app version:

    Copy
    1

An app version allows you to publish an app to the Wix 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.

Note: Events are different from other CLI extensions in that once you create a version, the changes you made to the events are automatically reflected in production without publishing the app again.

Delete an event extension

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

To revoke consent for Wix's tunneling solution, open the /.wix/user.config.json file in your project's root directory and remove the tunnel property.

Was this helpful?
Yes
No