Menu

Deploying Flex Plugins

Once you have deployed your plugins, Flex will identify and serve the assets during the UI's initialization. The simplest method for deploying your plugin is to use the native capabilities within the Plugin Builder. This will host the plugin on Twilio Assets and register the plugin with Flex. You can alternatively deploy the plugin to your own infrastructure and register your external asset for Flex to load.

Deploying with the Plugin Builder

The following features require Plugin Builder v3 to automate deployment. Plugins deployed using npm run deploy rely on the Functions & Assets API, which is currently available as a beta release. See this article for more information on beta product support.

The Flex Plugin Builder provides a deploy command to automate the release process of plugins. This allows you to deploy your plugins via command line, without needing to manually upload them from the Twilio Console.

When you are ready to deploy your plugin, in your terminal run:

npm run deploy

This will publish your plugin as a Private Asset that is accessible by the Functions & Assets API. If you want to deploy your plugin as a Public Asset, you may pass --public to your deploy command:

npm run deploy --public

Flex Plugins uploaded to Twilio Assets, whether public or private, are routed through https://flex.twilio.com. A sample plugin request from the Flex UI will look like: https://flex.twilio.com/plugins/plugin-sample.js. This is an authenticated route, and the Flex JWE Token is used to access the private asset.

Deleting your Deployed Plugin

If you want to delete a plugin you already deployed, in your terminal run:

npm run remove

The command requires a confirmation on whether you want to delete your plugin:

Screen Shot 2019-10-07 at 10.57.02 AM.png

Using Multiple AccountSids

To use the Functions & Assets API, the Plugin Builder needs to use your Twilio auth credentials. These will be stored locally in your keychain (or Windows Credential Vault) so you do not have to re-enter your credentials every time.

If you are deploying your plugins to multiple accounts, you will need to provide credentials for each account. New pairs of AccountSid and AuthToken credentials may be provided as environment variables with the deploy command:

TWILIO_ACCOUNT_SID=ACxxx TWILIO_AUTH_TOKEN=abc123 npm run deploy

This will use the newly provided credentials and save them in the keychain. If you have multiple accounts saved and you do not provide credentials along with your deploy command, then you will be prompted to select one:

? Select from one of the following Account Sids (Use arrow keys)
❯ AC0000000000000000000000000000000 
  AC0000000000000000000000000000001
  AC0000000000000000000000000000002

You can use the above commands to tie plugin deployment into a CI/CD pipeline. For example:

#!/bin/bash
# This script runs within your plugin directory
npm install
npm run test
npm run lint
TWILIO_ACCOUNT_SID=ACXXXX TWILIO_AUTH_TOKEN=pass123 npm run deploy

Make sure to handle your AccountSid and Auth Token as environment variables or arguments passed into your scripts.

Deploying to your own CDN

There are two mechanisms you can use to serve plugins external to Twilio Assets. The Flex Configuration API provides plugin_service_attributes, which can be used to register external assets for Flex to load.

Attribute

Type

Purpose

custom_plugins

JSON array of Flex Plugins

custom_plugins enable you to statically define a list of Flex Plugins to return to Flex, this may be particularly useful to incorporate as part of a CI/CD workflow.

custom_plugins_url

A valid URL

custom_plugins_url must also return a JSON Array of plugins, but by leveraging the JWE token provided via the X-Flex-JWE header you may choose to conditionally return plugins to certain agents to satisfy use-cases such as segmentation by department or canary deployments.

Only one of these fields is necessary to provide. This curl example demonstrates the syntax for updating either attribute.

curl https://flex-api.twilio.com/v1/Configuration -X POST -u ACxx:auth_token \
    -H 'Content-Type: application/json' \
    -d '{
        "account_sid": "ACxx",
        "plugin_service_attributes": {
            "custom_plugins": [{"name": "My Plugin", "version": "0.0.1", "src": "https://example.com/my-self-hosted-plugin-0.0.1.js"}],
            "custom_plugins_url": "https://example.com/plugins-list.json"
        }
    }'

custom_plugins_url takes precedence over custom_plugins in the event of a duplicate name. This allows you to leverage custom_plugins as a fallback if your URL is inaccessible.

Deprecated: Deploying to Twilio Assets UI

Private asset support was introduced in FlexUI 1.8.0. Older versions of Flex UI include native support for plugins uploaded as public assets.

Additionally some plugin dependencies, like React, are external to the Flex Plugin interface. Visit the Plugin Builder Github repository to find the current list of external dependencies and their version so that you can ensure that your Plugin will work once it's deployed.

The original method for deploying plugins to Flex was via the Twilio Assets UI. Plugins can be uploaded as either a public or a private asset. This method is still supported, but we recommend using the newer Functions & Assets API exposed by the Plugin Builder.

Limitations

Asset Type

Maximum Size

Quantity

Public

100 MB

500 Assets per account

Private

5 MB

10 Assets per account

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.