Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
dotenv-flow-webpack
Advanced tools
Changelog
2.0.0-rc.2 (2023-09-27)
yarn
Readme
A Webpack plugin that allows you to securely use environment variables within your javascript web application, loading them using dotenv-flow's .env*
files loading strategy.
dotenv-flow extends dotenv, adding support of
NODE_ENV
-specific.env*
files like.env.development
,.env.test
,.env.stage
, and.env.production
, and the appropriate.env*.local
overrides allowing your app to have multiple environments with selectively-adjusted environment variable setups and load them dynamically depending on the current NODE_ENV.
🌱 Inspired by dotenv-webpack, CreateReactApp's storing configs in .env*
files approach,
the Twelve-Factor App methodology in general, and its store config in the environment section in particular.
.env*
files for various environments like development, test, and production..env*.local
overrides.process.env.<YOUR_VAR>
entries with the actual values from your .env*
files during the build process, thus exposing only those variables that are explicitly used in your code.Using NPM:
$ npm install dotenv-flow-webpack --save-dev
Using Yarn:
$ yarn add dotenv-flow-webpack --dev
Here's how to include the dotenv-flow-webpack to your webpack.config.js
:
// webpack.config.js
const DotenvFlow = require('dotenv-flow-webpack');
module.exports = {
// ...other webpack configurations
plugins: [
new DotenvFlow({
// configuration options
})
],
// ...other webpack plugins
};
node_env
string
process.env.NODE_ENV || options.default_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
.
new DotenvFlow({
node_env: 'production'
})
default_node_env
string
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'
})
path
string
process.cwd()
(current working directory)With the path
initialization option you can specify a path to .env*
files directory.
new DotenvFlow({
path: './config'
})
If the option is not provided, the current working directory is used.
pattern
string
'.env[.node_env][.local]'
Allows you to change the default .env*
files' naming convention
if you want to have a specific file naming structure for maintaining
your environment variables' files.
Default Value
The default value ".env[.node_env][.local]"
makes dotenv-flow-webpack
look up and load the following files in order:
.env
.env.local
.env.${NODE_ENV}
.env.${NODE_ENV}.local
For example, when the proess.env.NODE_ENV
(or options.node_env
) is set to "development"
,
dotenv-flow-webpack will be looking for and parsing (if found) the following files:
.env
.env.local
.env.development
.env.development.local
Custom Pattern
Here is a couple of examples of customizing the .env*
files naming convention:
For example, if you set the pattern to ".env/[local/]env[.node_env]"
,
dotenv-flow-webpack will look for these files instead:
.env/env
.env/local/env
.env/env.development
.env/local/env.development
… or if you set the pattern to ".env/[.node_env/].env[.node_env][.local]"
,
the plugin will try to find and parse:
.env/.env
.env/.env.local
.env/development/.env.development
.env/development/.env.development.local
› Please refer to dotenv-flow.listFiles(options)
to learn more.
encoding
string
'utf8'
You can specify the encoding of your files containing environment variables.
new DotenvFlow({
encoding: 'base64'
})
system_vars
boolean
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.debug
boolean
false
Enables detailed logging to debug why certain variables are not being set as you expect.
new DotenvFlow({
debug: true
})
silent
boolean
false
Set to true
to suppress all kinds of errors and warnings.
new DotenvFlow({
silent: true
})
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
// 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.
Please refer the dotenv-flow documentation to learn more about the .env*
files concept.
Here is the list of related sections:
Feel free to dive in! Open an issue or submit PRs.
Using NPM:
$ npm test
Using Yarn:
$ yarn test
Licensed under MIT © 2019-2023 Dan Kerimdzhanov
FAQs
A webpack plugin that allows you to securely use environment variables within your javascript web application, loading them using dotenv-flow's `.env*` files loading strategy.
The npm package dotenv-flow-webpack receives a total of 3,979 weekly downloads. As such, dotenv-flow-webpack popularity was classified as popular.
We found that dotenv-flow-webpack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.