@twilio/create-flex-plugin

Create Flex Plugin

Command-line tool to create, develop and build a new Twilio Flex Plugin.

Usage

There is a variety of ways to use/install. The quickest way is:

npm init flex-plugin plugin-demo
cd plugin-demo
npm start

How to install/run using npm

Using npm:

# Via npm init
npm init flex-plugin plugin-demo

# Via npx
npx create-flex-plugin plugin-demo

# Install globally
npm install -g create-flex-plugin
create-flex-plugin plugin-demo

Using yarn:

# Via npm init
npm init flex-plugin plugin-demo --yarn

# Via npx
npx create-flex-plugin plugin-demo --yarn

# Install globally
npm install -g create-flex-plugin
create-flex-plugin plugin-demo --yarn

Note: Support for yarn only exists for @twilio/flex-ui > 1.18.0. If you are upgrading from an older version of the plugin-builder, you'll need to add add react-emotion and pin it to 9.2.6.

Command line arguments:

create-flex-plugin <name>

Creates a new Twilio Flex Plugin project

Arguments:
name    Name of your plugin. Needs to start with `plugin-`

Options:
  --accountSid, -a  The Account SID for your Flex Project
  --runtimeUrl, -r  The URL to your Twilio Flex Runtime
  --template, -t    A GitHub URL that contains your template
  --typescript, -s  Create a typescript project
  --install         Auto-install dependencies                   [boolean] [default: false]
  --yarn, -y        Use yarn 
  -h, --help        Show help                                   [boolean] [default: false]
  -v, --version     Show version number                         [boolean] [default: false]

Creating a Plugin from Custom Template

When creating a new plugin, you may provide a --template URL to a GitHub repo containing the source code of a Flex plugin. Create Flex Plugin will copy over the entire content from the directory, including all scripts, files and directories that are not part of the src folder. The repo has to be a valid node repository which means that it expects files such as package.json, .gitignore, README.md, etc to be present.

Template Directory Hierarchy

Your GitHub project should be

/
     src/
      index.js
      ...
    ...

Create Flex Plugin will copy over the content from the directory, and expects an index.js in the src folder. We will also provide a public/ folder and a package.json but you may override these by including them in your base GitHub repo.

See flex-plugin-template-sample for a basic example and plugin-agent-autoresponse for a more complete example.

Version Support

The --template link can contain a reference, which can be a tag or a branch name. For example

create-flex-plugin <plugin-name> --template https://github.com/ktalebian/flex-plugin-template-sample/tree/1.0.0

would use the tagged version 1.0.0, while

create-flex-plugin <plugin-name> --template https://github.com/ktalebian/flex-plugin-template-sample/tree/master

would use the master branch.

Contributing

Make sure to follow the instructions in the main repository to set up the project.

# Install dependencies and link local packages with each other
cd packages/create-flex-plugin
npx lerna bootstrap

# Run tests
npm test

# To execute your local version the CLI
npm link
create-flex-plugin --help

Contributors

Thank you to all the lovely contributors to this project. Please check the main repository to see all contributors.

License

MIT