What's the best way to manage different variables for different environments on Twilio Flex Plugin?
I've got two environments, staging(dev) and Prod, staging will deploy what's on Dev Branch, and Prod what's on Master Branch. How can I set different variables for both, for instance for API endpoints, workspaceSid, and stuff like that?
Cheers
Had the same thought as you. Flex plugins actually are uploaded to a Twilio Runtime service, but it's only used for the hosting of static assets and you can't add your own Node.js functions to it, so you can't use the environment variables that you normally would in a Runtime service.
The solution for environment variable-like instance-specific configuration in Flex seems to be the Flex Configuration object. This is described somewhat in this answer:
https://stackoverflow.com/a/59432812/152891
and also by this page in the docs:
https://www.twilio.com/docs/flex/developer/ui/configuration
Basically you can add your own configuration values to the JSON object for each environment using the API, and then access these values from within your Flex plugin at manager.serviceConfiguration.
Note that even though the docs don't mention it, these methods are available through the Twilio CLI at:
twilio api:flex:v1:configuration:fetch -- fetch a Configuration resource
twilio api:flex:v1:configuration:update -- update a Configuration resource
Also not explicitly mentioned in the docs is that you probably want to focus your attention on the top-level keys attributes, crm_attributes, and ui_attributes. If you are building your plugin with TypeScript, there is a typed interface for ServiceConfiguration, but these properties are any types, so you can add your own sub-properties without the compiler yelling at you when you try to access them.
One more thing worth noting is that you can't treat these the same way as you would treat environment variables since they are exposed to the client. If you have sensitive secrets, you should factor the necessary functionality out to a backend (like in Twilio Runtime) where you can safely use environment variables, and then authenticate requests to that backend from Flex by using the JWT and twilio-flex-token-validator pattern described here:
https://www.twilio.com/docs/flex/developer/plugins/call-functions#securing-your-twilio-function