Skip to content

Latest commit

 

History

History
110 lines (73 loc) · 4.64 KB

v4.md

File metadata and controls

110 lines (73 loc) · 4.64 KB

4.0.0 (May 17th, 2021)

Refer to Twilio Flex Docs to be up-to-date with the latest features being built on the CLI.

Create Flex Plugin 4.0.0 uses the Twilio Flex Plugins API to manage your Flex Plugins, create versions, and define which plugins the Flex UI will load during initialization via an API.

It completely removes the dependency on react-scripts and instead uses native Webpack to build and serve your plugins locally.

It also brings full Twilio CLI support and uses it as the main interface for interacting with your plugins.

Highlights

Migrating from 1.x/2.x/3.x to 4.x

Install the Twilio CLI and the Flex Plugins extension as described here. Then run:

$ twilio flex:plugins:upgrade-plugin --install

This script should automatically upgrade your plugin to the latest version.

Manual Upgrade

To manually upgrade to version 4.x, modify your package.json:

{
  "scripts": {
    "postinstall": "flex-plugin pre-script-check"
  },
  "dependencies": {
    "flex-plugin-scripts": "^4.0.0",
    "react": "16.5.2",
    "react-dom": "16.5.2"
  },
  "devDependencies": {
    "@twilio/flex-ui": "^1"
  }
}

If you are currently using craco.config.js, please refer to the next section Breaking Changes on migrating it.

You may also need to update your public/appConfig.js and update the pluginService:

var appConfig = {
  pluginService: {
    enabled: true,
    url: '/plugins',	// <-- Updating the URL here
  },
  ...
};

Breaking Changes

Version 4 is removing react-scripts; thus, the use of craco for customizing the Webpack and Jest environment is removed.

Webpack/DevServer/Jest Configuration

craco.config.js is no longer supported for modifying Webpack configuration. Instead, create a *.config.js in the root directory of your application. For Jest, create a jest.config.js. For Webpack, create a webpack.config.js. For Webpack DevServer, create a webpack.dev.js. Each of these configurations file should be of the format below:

module.exports = (config, { isProd, isDev, isTest }) => {
  /**
   * Modify the configuration and then return it
   */

  return config;
}

Migrating From v1/v2 Versions

Upgrading from v1/v2 will, unfortunately, include a period of downtime. Your contact-center will either have the same plugin running twice or the plugin missing from it (this period will only be at most 1 minute long). Therefore, it is recommended to do this migration when you don't expect high usage of your contact center.

First, upgrade the plugin locally using $ twilio flex:plugins:upgrade from the guide above.

Next, decide if you prefer to have the plugin show twice or not at all. You'll need to deploy/release using the CLI and delete the plugin from Twilio Console Assets. Unfortunately, these two steps must be done manually.

It is recommended that you deploy (using twilio flex:plugins:deploy) your plugin first. Then release (using twilio flex:plugins:release) and delete the bundle from Console at the same time.

Migrating From v3 Version

Upgrading from v3 is simple and has no downtime.

  1. Upgrade the plugin locally using $ twilio flex:plugins:upgrade from the guide above.
  2. Deploy and register the plugin using $ twilio flex:plugins:deploy and $ twilio flex:plugins:release
  3. Remove the v0.0.0 plugin from v3 using $ twilio flex:plugins:upgrade --cleanup

New Features

Flex Plugins API

There is now a native Flex Plugins API. This API defines which plugins the Flex UI will load during initialization. Flex Plugins are bundled JavaScript or TypeScript customizations that change the presentation and behavior of the Flex UI.

Documentation on the API is available on Twilio Docs API. There is also a Toolkit that is a wrapper for most common use cases.

Native Webpack/Jest Support

Plugin Builder now natively supports Webpack.js and uses Jest.

Twilio CLI

There is now full native Twilio CLI support for all actions. Twilio CLI is now intended as the main interface for interacting with the plugin-builder. More information can be found in Twilio Docs.