dotenv-flow-webpack

A secure webpack plugin that gives the ability to access environment variables via process.env.* defined in your .env, .env.development, .env.test, .env.production, etc,. files within your web applications built with webpack.

Storing configuration in environment variables separate from code and grouping them by environments like development, test and production is based on The Twelve-Factor App methodology.

backed by dotenv-flow, inspired by dotenv-webpack

Installation

Using NPM:

$ npm install dotenv-flow-webpack --save-dev

Using Yarn:

$ yarn add dotenv-flow-webpack --dev

Description

Technically, the plugin wraps the dotenv-flow API providing the ability to configure it in your webpack.config.js file(s).

Note that plugin uses a secure strategy of replacing of the process.env.* code entries upon the build process, thus it exposes only environment variables that are used in your code.

Usage example

Let's suppose you have the following files in your project:

# .env

DATABASE_HOST=127.0.0.1
DATABASE_PORT=27017
DATABASE_USER=default
DATABASE_PASS=
DATABASE_NAME=my_app

SERVICE_URL=/api/v1

# .env.development

DATABASE_NAME=my_app_dev

SERVICE_URL=http://localhost:3000/api/v1

# .env.test

SERVICE_URL=https://localhost:3001/api/v1

# .env.production

DATABASE_HOST=10.0.0.32
DATABASE_PORT=27017
DATABASE_USER=devops
DATABASE_PASS=1qa2ws3ed4rf5tg6yh
DATABASE_NAME=application_storage

SERVICE_URL=https://myapp.com/api/v1

// webpack.config.js

const DotenvFlow = require('dotenv-flow-webpack');

module.exports = {
  // ...
  plugins: [
    new DotenvFlow()
  ],
  // ...
};

// file1.js

if (process.env.NODE_ENV !== 'production') {
  console.log(`Running in the "${process.env.NODE_ENV}" mode.`);
}
else {
  console.log('We are in production!');
}

const USERS_ENDPOINT = process.env.SERVICE_URL + '/users';

console.log('USERS_ENDPOINT:', USERS_ENDPOINT);

Thus, when you build your app with NODE_ENV=development, the resulting bundle will include something like this:

// file1.js

if (true) {
  console.log("Running in the ".concat("development", " mode."));
} else {}

const USERS_ENDPOINT = "http://localhost:3000/api/v1" + '/users';

console.log('USERS_ENDPOINT:', USERS_ENDPOINT);

Or if you build your app with NODE_ENV=production, then the output will look like:

// file1.js

if (false) {} else {
  console.log('We are in production!');
}

const USERS_ENDPOINT = "https://myapp.com/api/v1" + '/users';

console.log('USERS_ENDPOINT:', USERS_ENDPOINT);

And after all the optimization procedures it will be compressed till:

console.log("We are in production!");
console.log("USERS_ENDPOINT:", "https://myapp.com/api/v1/users");

Make a note that values of DATABASE_(HOST/PORT/USER/PASSWORD/NAME) will not be present in the resulting bundle while they are not referenced anywhere in the code.

Configuration

As a wrapper of dotenv-flow, dotenv-flow-webpack has the same configuration options extending them with its own described below.

options.node_env

Type: string

Default: process.env.NODE_ENV

By default, the plugin refers the NODE_ENV environment variable to detect the environment to use. With the node_env option you can force the module to use your custom environment value independent of process.env.NODE_ENV.

module.exports = (env, argv) => {
  // ...
  config.plugins.push(new DotenvFlow({
    node_env: env.production ? 'production' : 'development'
  }));
  // ...
};

options.default_node_env

Type: string

Default: undefined

If the NODE_ENV environment variable is not set, the module doesn't load/parse any NODE_ENV-specific files at all. Therefore, you may want to use "development" as the default environment.

new DotenvFlow({
  default_node_env: 'development'
})

options.path

Type: string

Default: process.cwd() (current working directory)

With the path initialization option you can specify a path to .env* files directory.

new DotenvFlow({
  path: '/path/to/env-files-dir'
})

If the option is not provided, the current working directory will be used.

options.encoding

Type: string

Default: 'utf8'

You can specify the encoding of your files containing environment variables.

new DotenvFlow({
  encoding: 'base64'
})

options.system_vars

Type: boolean

Default: false

If true, all the predefined process.env.* variables will also be loaded. In accordance to the dotenv-flow's specification, all the predefined system environment variables will have higher priority over the .env* files defined.

new DotenvFlow({
  system_vars: true
})

options.silent

Type: boolean

Default: false

Set to true to suppress all errors and warnings.

Additional information

Please refer the dotenv-flow documentation to learn more about the .env* files concept.

Here is the list of related sections:

• NODE_ENV-specific .env* files
• Files under version control
• Variables overwriting/priority

Contributing

Feel free to dive in! Open an issue or submit PRs.

Running tests

Using NPM:

$ npm test

Using Yarn:

$ yarn test

License

Licensed under MIT © 2019-2020 Dan Kerimdzhanov