Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Environment Variables in Flex Plugins


We recommend that you manage your Flex application by using multiple accounts to represent different environments. For example: development, staging, and production. Each plugin you build can be deployed to your different environments based on your testing strategy. The Plugins CLI makes this easy by managing profiles to store your Twilio account credentials.

Each environment often has different values for certain parameters: the location of an API server, whether a feature is enabled, or the SID of a necessary resource. Environment Variables are an easy way to integrate these into your plugin.


Setting up Environment Variable support

setting-up-environment-variable-support page anchor

You will need to modify your webpack configuration(link takes you to an external page) to enable environment variables. This will allow you to use a standard .env file for managing your variables.

1. Install dotenv

The dotenv-webpack(link takes you to an external page) package is our recommendation for managing environment variables with the Plugins CLI. Combined with webpack, which is natively used within the Plugins CLI, this package will allow you to access environment variables from within your plugin code. To install dotenv-webpack, run the following command from within your plugin directory:


_10
npm install dotenv-webpack --save

In addition to installing dotenv-webpack, this will also add the library as a dependency within your plugin's package.json. If you are attempting a global installation or already have this package installed, make sure to update the package.json for each plugin you are updating.

2. Create .env files

Each Twilio account (i.e., each profile in your CLI) will get mapped to a single .env file. Create a new file in the root directory for your plugin and provide a distinctive name: .env.dev,.env.stage, and .env.prod.

An example of a .env file is shown below:


_10
TWILIO_WORKFLOW_SID=WWXXXXXXX

(information)

Info

Keep in mind that the environment variable names are required to start with TWILIO_, FLEX_ or REACT_

(warning)

Storing .env files in source code

Never commit your .env files to your source code repository. These files can contain sensitive information, like secrets and API keys, and you do not want to expose these credentials. Include the .env files in your .gitignore or the appropriate tool for your version control.

Without the .env files, the developers on your team will need to know which environment variables are required for your application. Create and commit a .env.sample file in your repository with variable names and placeholder values. This file can be duplicated and updated by your team members when they pull the source code.

3. Update webpack

Webpack must be customized to map your active CLI profile to one of the .env files you created. In the root directory for your plugin, replace webpack.config.js with the following code:


_27
const DotEnvWebpack = require('dotenv-webpack');
_27
module.exports = (config, { isProd, isDev, isTest }) => {
_27
/**
_27
* Customize the webpack by modifying the config object.
_27
* Consult https://webpack.js.org/configuration for more information
_27
*/
_27
// We dynamically change the path to the .env that contains the file corresponding to our profile
_27
let envPath;
_27
switch (process.env.TWILIO_PROFILE) {
_27
case 'Dev':
_27
envPath = '.env.dev';
_27
break;
_27
case 'Stage':
_27
envPath = '.env.stage';
_27
break;
_27
case 'Production':
_27
envPath = '.env.prod';
_27
break;
_27
}
_27
// If path was set, use the dotenv-webpack to inject the variables
_27
if (envPath) {
_27
config.plugins.push(new DotEnvWebpack({
_27
path: envPath
_27
}));
_27
}
_27
return config;
_27
}

Customize the switch statement based on the names of your CLI profiles and the filenames for your .env files.

4. Deploy plugin

To deploy your plugin to specific accounts and environments, use the following commands:


_10
twilio flex:plugins:deploy --profile=StageProfileName


_10
twilio flex:plugins:deploy --profile=ProdProfileName


Reading environment variables

reading-environment-variables page anchor

All variables that you define in your .env files will be accessible within your plugin via process.env. Use these variables directly within your code:


_10
console.log(process.env.TWILIO_WORKFLOW_SID);

(warning)

String Replacement

The dotenv-webpack package(link takes you to an external page) works by running a string replacement within your plugin code when the plugin is bundled. This has two side effects:

  • Any sensitive values, like an API key, will be visible to any user or system that has access to the bundled code for your plugin
  • The variables will not be dynamic if the bundled plugin (the final .js file) is shared and deployed to multiple accounts directly

In these situations, it is better to use a remotely-accessed environment variable. One option is adding these variables within the attributes field of your Flex Configuration.


Rate this page: