Events are triggered when specific conditions occur in your Headless project. Your project can respond to these events using event extensions. Events in the CLI for Headless are built on Javascript SDK webhooks, and event extensions subscribe your project to these webhooks behind the scenes.
Learn more about event extensions.
Follow the instructions below to:
Once this task is complete, your project will have an event extension that's triggered when a specific event occurs.
In the terminal:
Navigate to your project repo.
Run the following command:
The CLI will display a menu of extensions to generate. Select Event and hit enter to continue.
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 your project. Only you will see this name.
Upon completion, the extension files will be created in your project directory with the following structure:
The extension.json
file contains the event extension's configuration details. This file defines event triggers the extension's code. The structure is as follows:
Field | Type | Description |
---|---|---|
compId | string | Unique component ID. Must be unique across all extensions in the project. |
compType | string | Always WEBHOOK for event extensions. |
compName | string | The event name/slug. |
compData.webhook.webhookSlug | string | The event slug that triggers the extension. |
This file is required and must contain:
The generated event.ts
file will contain example code for an event.
The event.ts
file must be in the following format:
For example, an event.ts
for the Wix CRM onContactCreated() event should look like this:
Important: Currently, local development is not supported for all events in the CLI for Headless. 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 project..
To test your event extension, you must:
Inside your event.ts
file, add a console.log()
command to one of your functions. For example:
The process for triggering an event depends on the type of event:
To trigger the event in the local development environment, you must navigate to your project's site or dashboard in your local development environment, then take an action that will trigger your event.
From your project's directory in the terminal, run the following command:
Click the link to open your project's dashboard or site in your browser, depending on where you need to trigger the event.
Take an action that will trigger your event. This action depends on your specific event.
Navigate back to the CLI terminal and you will see the logs from your backend logic in the following form:
Note: You can't view logs from backend code in production.
Once your project is ready for production, you can build it and release your project.
Run the following command to build your project:
Run the following command and follow the prompts to release your project:
For more information about building and deploying your project, see Build and Deploy a Project with the Wix CLI for Headless.
To delete an event extension from your project, delete the subfolder under src/extensions
that contains your event extension's files.