2

I created a new Flex project to be a staging environment for our existing production Flex project. We have a backend service that our flex plugins call, and I've created a staging version of the backend service as well. I want to understand how to have environment-specific configuration in our flex plugins, so that I can deploy the same plugins but point them at different backend service URLs.

It seems there may be three possible options for doing this:

  1. Change appConfig.js to add different configuration, keyed on account id. Possibly this could utilize the TWILIO_ACCOUNT_ID environment variable when npm run deploy is run to add the appropriate configuration, though it's not clear to me how that would work.
  2. Use either the Twilio CLI or the REST API to push a new value like backend_service_url to the Flex configuration. Doing that once per project should work. Though I'm not clear on where I would put that in the configuration JSON, and how to read it back in the plugin.
  3. Set up a Twilio function in each project that the plugin calls when it loads, and that returns project-specific configuration.

Please let me know what the best practice would be, and give me a start on how to implement that.

Nick
  • 43
  • 3

2 Answers2

2

Following up from our email thread in case it's useful to others.

Option 2 is probably the simplest way to achieve this. The first step is to check what's already been stored in your Flex configuration. If you have the Twilio CLI installed you can do that by running:

twilio api:flex:v1:configuration:fetch -o=json

You should receive a list of configuration flags back. The attributes key is the one we're interested in updating. It will look something like this:

    "attributes": {
      "seenOnboarding": true,
      "demoPhoneNumber": "+1 203 941 6714"
    }

The next step will replace these attributes with whatever we include in our request, so you'll want to include the existing attributes in your next request.

You can the update your Flex configuration with the following API request:

curl https://flex-api.twilio.com/v1/Configuration -X POST -u ACxxx:auth_token \
    -H 'Content-Type: application/json' \
    -d '{
        "account_sid": "ACxxx",
        "attributes": {
            "myCustomVariable": "My custom value",
            "seenOnboarding": true,
            "demoPhoneNumber": "+1 234 567 8900"
        }
    }'

Inside of your Flex plugin, you can reference the settings attribute via the manager object:

init(flex, manager) {
   console.log(manager.serviceConfiguration.attributes.myCustomVariable);
}
Charlie Weems
  • 1,682
  • 1
  • 16
  • 28
  • This will result in a bad request because 'myCustomVariable' is unknown and thereby not valid – Bart Kalkman May 30 '20 at 09:49
  • FWIW, I was able to set a custom attribute: `"attributes": { "seenOnboarding": true, "customURL": "test.com" }`. and was able to retrieve it with: `console.log(manager.serviceConfiguration.attributes.customURL);` – dejon97 Apr 27 '21 at 00:49
0

I have decided to determine the base API URL at runtime by including an accountSid => baseURL object:

const BASE_URL_BY_ACCOUNT_SID = {
  AC123: "mystagingurl.com/api/v3",
  AC888: "myprodurl.com/api/v3"
}

You can then use this hash to do the lookup at runtime using the account SID stored in the Redux store (or Flex config, perhaps).

Josh Hale
  • 467
  • 1
  • 5
  • 12