THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
This Tutorial covers the following things about the twilio flex plugin.
- twilio flex plugin CLI tutorials with examples
- How to create a custom plugin
- Deploy and release the plugin to production
Twilio provides Cli for creating, running, and testing the plugins.
CLI is abbreviated as a command-line interface for creating, developing, testing, and release of the flex plugins for Twilio.
Flex plugins are useful for customizing Flex UI and component modifications in Twilio,
Required things
- Nodejs installed
- npm command
Install flex plugin cli
flex plugin is based on Nodejs framework, Please make sure that nodejs is installed by running the following command
npm --version
node --version
if nodejs is installed on your machine, This gives node and npm versions to the console.
Once npm is installed, twilio-cli can be installed using the npm command.
npm install twilio-cli -g
Let’s start to create a react code base for the plugin.
twilio login
It will ask for Account SID and Auth Token details.
The Account SID for your Twilio Account or Subaccount:
Once you entered all these details, This will be stored in C:\Users\user.twilio-cli\config.json.
How to create a flex plugin
flex:plugins: create is a command to create a plugin,
The name of the plugin always starts with the plugin-[name], the name is your plugin name
The below command is used to create a plugin that is based on the JavaScript version.
twilio flex:plugins:create plugin-example --install4
if you want to install the plugin with a typescript version, you can use the below command
twilio flex:plugins:create plugin-example --install --typescript
Let’s create a new plugin project plugin-example.
:\flex>twilio flex:plugins:create plugin-example --install --typescript
» Warning: twilio-cli update available from 2.19.0 to 2.22.0.
Creating project directory
Installing dependencies
┌────────────────────────────────────────────────────────────────────┐
│ │
│ Your Twilio Flex Plugin project has been successfully created! │
│ │
│ │
│ Development: │
│ $ cd plugin-example/ │
│ $ npm start │
│ │
│ Build Command: │
│ $ cd plugin-example/ │
│ $ npm run build │
│ │
│ Deploy Command: │
│ $ cd plugin-example/ │
│ $ npm run deploy │
│ │
│ For more info check the README.md file or go to: │
│ ➡ https://www.twilio.com/docs/flex │
│ │
└────────────────────────────────────────────────────────────────────┘
The above command creates the following things
- Created plugin project directory based on React
- Install npm dependencies
Once the plugin is created, You need to start the plugin in the development environment by running the following commands
cd plugin-name
twilio flex:plugins:start
Now flex dev instance is running at 3000 port, You can call http:\localhost:3000 you can write a plugin code with react component javascript can able to customize contact center styles and component flow can be modified
Deploy flex plugin to production
Twilio CLI provides a deploy command as seen below
twilio flex:plugins: deploy --description "Sample plugin example"
You can release the plugin and enable the plugin in the production
twilio flex:plugins:release --name "initial version release" --description "Enable Plugin example"--plugin [email protected]
You can check the plugin in the flex dashboard UI of Twilio.
Conclusion
To conclude, Twilio CLI installation is covered, Then how to create a plugin, build, deploy and release the flex plugin to production.
