Dotenv-flow-webpack

The Twelve-Factor App methodology suggests storing configuration in environment variables, which should be grouped based on the respective environments such as development, test, and production. While most server-based programs can read these variables directly, React apps running in the client’s browser need to be informed of the relevant environment variables before being served.


dotenv-flow-webpack

dotenv-flow-webpack

This webpack plugin ensures security while providing access to
environment variables
via

process.env.*

in various files such as

.env

,

.env.development

,

.env.test

,

.env.production

, etc., that are included in your web applications built using webpack.

The Twelve-Factor App methodology suggests separating configuration from code by storing it in environment variables and organizing them by environments such as development, test, and production.

Inspired by
dotenv-webpack
, this is supported by dotenv-flow.


Installation

Using NPM:

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

Using Yarn:

$ yarn add dotenv-flow-webpack --dev


Description

The

dotenv-flow

API is wrapped by the plugin and can be configured in your

webpack.config.js

file(s).

Please be aware that the plugin implements a safe approach to substitute the

process.env.*

entries during the building process. Therefore, it only reveals the environment variables that your code utilizes.


Usage example

Let’s consider a scenario where your project contains the subsequent files:

# .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);

Consequently, once your app is constructed utilizing

NODE_ENV=development

, the resulting package will incorporate a similar element.

// 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);

If you utilize

NODE_ENV=production

when constructing your app, the resulting display will resemble the following.

// 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);

Following the completion of all optimization procedures, the compression process will continue until the final stage is reached.

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

Take note that any values assigned to

DATABASE_(HOST/PORT/USER/PASSWORD/NAME)

will not appear in the final bundle if they are not referenced within the code.


Configuration

dotenv-flow-webpack is an extension of dotenv-flow that offers additional configuration options, in addition to the ones already present in dotenv-flow.


options.node_env


Type:

string


Default:

process.env.NODE_ENV

The plugin is programmed to detect the environment to use by referring to the

NODE_ENV

environment variable. However, you can override this default behavior by using the

node_env

option to specify your own custom environment value, which will be used independently of the

process.env.NODE_ENV

variable.

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

options.default_node_env


Type:

string


Default:

undefined

In case the

NODE_ENV

environment variable is not defined, the module won’t parse or load any files related to

NODE_ENV

. Thus, it is suggested to consider

"development"

as the default environment.

new DotenvFlow({
default_node_env: 'development'
})

options.path


Type:

string


Default:

process.cwd()


(current working directory)

Using the

path

initialization option allows you to indicate a pathway to the directory containing the

.env*

files.

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

In case the option is absent, the present working directory will be utilized.


options.encoding


Type:

string


Default:

'utf8'

It is possible to define the character set for the files that hold your environmental variables.

new DotenvFlow({
encoding: 'base64'
})

options.system_vars


Type:

boolean


Default:

false

Assuming the inclusion of

true

, the preset

process.env.*

variables will be loaded as well. As per the dotenv-flow guidelines, the system environment variables that are set beforehand will take precedence over the

.env*

files that are specified.

new DotenvFlow({
system_vars: true
})

options.silent


Type:

boolean


Default:

false

Apply

true

to silence any errors and warnings.


Additional information

To gain further insight into the concept of

.env*

files, we suggest consulting the dotenv-flow documentation.

Here is the list of related sections:

  • Code labeled as

    NODE_ENV

    is only applicable to certain

    .env*

    files.
  • Files under version control
  • Variables overwriting/priority


Contributing

Don’t hesitate to get started! You can either raise an issue or contribute by submitting PRs.


Running tests

Using NPM:

$ npm test

Using Yarn:

$ yarn test


License

Dan Kerimdzhanov holds the license for MIT © 2019-2020.

Frequently Asked Questions