{"id":15673949,"url":"https://github.com/kerimdzhanov/dotenv-flow-webpack","last_synced_at":"2025-07-21T18:31:50.868Z","repository":{"id":34998506,"uuid":"195142627","full_name":"kerimdzhanov/dotenv-flow-webpack","owner":"kerimdzhanov","description":"A simple and secure webpack plugin that supports dotenv-flow.","archived":false,"fork":false,"pushed_at":"2024-08-28T07:21:19.000Z","size":429,"stargazers_count":17,"open_issues_count":4,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-13T21:44:32.958Z","etag":null,"topics":["development","dotenv","dotenv-flow","environment-variables","node-env","production","staging","test","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kerimdzhanov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-04T00:22:27.000Z","updated_at":"2025-04-18T20:04:22.000Z","dependencies_parsed_at":"2023-01-15T11:45:20.807Z","dependency_job_id":"ac768c4c-10ea-405b-a5d6-cd4c2fdfa712","html_url":"https://github.com/kerimdzhanov/dotenv-flow-webpack","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"d05577efbcd44dcc38daf30bbf437eb073d276fe"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/kerimdzhanov/dotenv-flow-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerimdzhanov%2Fdotenv-flow-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerimdzhanov%2Fdotenv-flow-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerimdzhanov%2Fdotenv-flow-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerimdzhanov%2Fdotenv-flow-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kerimdzhanov","download_url":"https://codeload.github.com/kerimdzhanov/dotenv-flow-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kerimdzhanov%2Fdotenv-flow-webpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265774593,"owners_count":23826111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["development","dotenv","dotenv-flow","environment-variables","node-env","production","staging","test","webpack","webpack-plugin"],"created_at":"2024-10-03T15:43:10.061Z","updated_at":"2025-07-21T18:31:50.817Z","avatar_url":"https://github.com/kerimdzhanov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dotenv-flow-webpack\n\n\u003cimg src=\"https://raw.githubusercontent.com/kerimdzhanov/dotenv-flow-webpack/master/dotenv-flow-webpack@2x.png\" alt=\"dotenv-flow-webpack\" width=\"220\" height=\"250\" align=\"right\" /\u003e\n\nA Webpack plugin that allows you to securely use environment variables within your javascript web application, loading them using _[dotenv-flow](https://github.com/kerimdzhanov/dotenv-flow)'s_ `.env*` files loading strategy.\n\n\u003e _dotenv-flow_ extends _[dotenv](https://github.com/motdotla/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.\n\n🌱 Inspired by _[dotenv-webpack](https://github.com/mrsteele/dotenv-webpack)_, _[CreateReactApp](https://create-react-app.dev/)'s **storing configs in `.env*` files** approach_,\nthe _Twelve-Factor App methodology_ in general, and _its **[store config in the environment](https://12factor.net/config)** section_ in particular.\n\n[![Build Status](https://github.com/kerimdzhanov/dotenv-flow-webpack/actions/workflows/ci.yml/badge.svg?branch=master\u0026event=push)](https://github.com/kerimdzhanov/dotenv-flow-webpack/actions/workflows/ci.yml)\n[![npm version](https://badge.fury.io/js/dotenv-flow-webpack.svg)](https://badge.fury.io/js/dotenv-flow-webpack)\n[![Known Vulnerabilities](https://snyk.io/test/github/kerimdzhanov/dotenv-flow-webpack/badge.svg?targetFile=package.json)](https://snyk.io/test/github/kerimdzhanov/dotenv-flow-webpack?targetFile=package.json)\n\n\n## Key Features\n\n- **Environment-based configuration**: You can have different `.env*` files for various environments like _development_, _test_, and _production_.\n- **Variable overriding** _(or environment-specific cascade)_: Allows you to selectively override the default and environment-specific variables with the appropriate `.env*.local` overrides.\n- **Secure**: Injects variables by replacing the `process.env.\u003cYOUR_VAR\u003e` 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**_.\n- **[dotenv-flow](https://github.com/kerimdzhanov/dotenv-flow) as a Webpack plugin**: directly integrates dotenv-flow with all its flexibility options to your build process making it easier to use environment variables without extra build scripts.\n\n\n## Installation\n\nUsing NPM:\n\n```sh\n$ npm install dotenv-flow-webpack --save-dev\n```\n\nUsing Yarn:\n\n```sh\n$ yarn add dotenv-flow-webpack --dev\n```\n\n\n## Basic usage\n\nHere's how to include the **dotenv-flow-webpack** to your `webpack.config.js`:\n\n```js\n// webpack.config.js\n\nconst DotenvFlow = require('dotenv-flow-webpack');\n\nmodule.exports = {\n  // ...other webpack configurations\n  plugins: [\n    new DotenvFlow({\n      // configuration options\n    })\n  ],\n  // ...other webpack plugins\n};\n```\n\n## Configuration options\n\n#### `node_env`\n###### Type: `string`\n###### Default: `process.env.NODE_ENV || options.default_node_env`\n\nBy default, the plugin refers the `NODE_ENV` environment variable to detect the environment to use.\nWith the `node_env` option you can force the module to use your custom environment value independent of `process.env.NODE_ENV`.\n\n```js\nnew DotenvFlow({\n  node_env: 'production'\n})\n```\n\n#### `default_node_env`\n###### Type: `string`\n###### Default: _undefined_\n\nIf the `NODE_ENV` environment variable is not set, the module doesn't load/parse any `NODE_ENV`-specific files at all.\nTherefore, you may want to use `\"development\"` as the default environment.\n\n```js\nnew DotenvFlow({\n  default_node_env: 'development'\n})\n```\n\n#### `path`\n###### Type: `string`\n###### Default: `process.cwd()` _(current working directory)_\n\nWith the `path` initialization option you can specify a path to `.env*` files directory.\n\n```js\nnew DotenvFlow({\n  path: './config'\n})\n```\n\nIf the option is not provided, the current working directory is used.\n\n#### `pattern`\n###### Type: `string`\n###### Default: `'.env[.node_env][.local]'`\n\nAllows you to change the default `.env*` files' naming convention\nif you want to have a specific file naming structure for maintaining\nyour environment variables' files.\n\n**Default Value**\n\nThe default value `\".env[.node_env][.local]\"` makes *dotenv-flow-webpack*\nlook up and load the following files in order:\n\n1. `.env`\n2. `.env.local`\n3. `.env.${NODE_ENV}`\n4. `.env.${NODE_ENV}.local`\n\nFor example, when the `proess.env.NODE_ENV` (or `options.node_env`) is set to `\"development\"`,\n*dotenv-flow-webpack* will be looking for and parsing (if found) the following files:\n\n1. `.env`\n2. `.env.local`\n3. `.env.development`\n4. `.env.development.local`\n\n**Custom Pattern**\n\nHere is a couple of examples of customizing the `.env*` files naming convention:\n\nFor example, if you set the pattern to `\".env/[local/]env[.node_env]\"`,\n*dotenv-flow-webpack* will look for these files instead:\n\n1. `.env/env`\n2. `.env/local/env`\n3. `.env/env.development`\n4. `.env/local/env.development`\n\n… or if you set the pattern to `\".env/[.node_env/].env[.node_env][.local]\"`,\nthe plugin will try to find and parse:\n\n1. `.env/.env`\n2. `.env/.env.local`\n3. `.env/development/.env.development`\n4. `.env/development/.env.development.local`\n\n› Please refer to [`dotenv-flow.listFiles(options)`](https://github.com/kerimdzhanov/dotenv-flow#listfilesoptions--string) to learn more.\n\n#### `encoding`\n###### Type: `string`\n###### Default: `'utf8'`\n\nYou can specify the encoding of your files containing environment variables.\n\n```js\nnew DotenvFlow({\n  encoding: 'base64'\n})\n```\n\n#### `system_vars`\n###### Type: `boolean`\n###### Default: `false`\n\nIf `true`, all the predefined `process.env.*` variables will also be loaded.\nIn accordance to the dotenv-flow's specification, all the predefined system environment variables will have higher priority over the `.env*` files defined.\n\n```js\nnew DotenvFlow({\n  system_vars: true\n})\n```\n\n#### `options.debug`\n###### Type: `boolean`\n###### Default: `false`\n\nEnables detailed logging to debug why certain variables are not being set as you expect.\n\n```js\nnew DotenvFlow({\n  debug: true\n})\n```\n\n#### `silent`\n###### Type: `boolean`\n###### Default: `false`\n\nSet to `true` to suppress all kinds of errors and warnings.\n\n```js\nnew DotenvFlow({\n  silent: true\n})\n```\n\n## Project Example\n\nLet's suppose you have the following files in your project:\n\n```sh\n# .env\n\nDATABASE_HOST=127.0.0.1\nDATABASE_PORT=27017\nDATABASE_USER=default\nDATABASE_PASS=\nDATABASE_NAME=my_app\n\nSERVICE_URL=/api/v1\n```\n\n```sh\n# .env.development\n\nDATABASE_NAME=my_app_dev\n\nSERVICE_URL=http://localhost:3000/api/v1\n```\n\n```sh\n# .env.test\n\nSERVICE_URL=https://localhost:3001/api/v1\n```\n\n```sh\n# .env.production\n\nDATABASE_HOST=10.0.0.32\nDATABASE_PORT=27017\nDATABASE_USER=devops\nDATABASE_PASS=1qa2ws3ed4rf5tg6yh\nDATABASE_NAME=application_storage\n\nSERVICE_URL=https://myapp.com/api/v1\n```\n\n```js\n// file1.js\n\nif (process.env.NODE_ENV !== 'production') {\n  console.log(`Running in the \"${process.env.NODE_ENV}\" mode.`);\n}\nelse {\n  console.log('We are in production!');\n}\n\nconst USERS_ENDPOINT = process.env.SERVICE_URL + '/users';\n\nconsole.log('USERS_ENDPOINT:', USERS_ENDPOINT);\n```\n\nThus, when you build your app with `NODE_ENV=development`, the resulting bundle will include something like this:\n\n```js\n// file1.js\n\nif (true) {\n  console.log(\"Running in the \".concat(\"development\", \" mode.\"));\n} else {}\n\nconst USERS_ENDPOINT = \"http://localhost:3000/api/v1\" + '/users';\n\nconsole.log('USERS_ENDPOINT:', USERS_ENDPOINT);\n```\n\nOr if you build your app with `NODE_ENV=production`, then the output will look like:\n\n```js\n// file1.js\n\nif (false) {} else {\n  console.log('We are in production!');\n}\n\nconst USERS_ENDPOINT = \"https://myapp.com/api/v1\" + '/users';\n\nconsole.log('USERS_ENDPOINT:', USERS_ENDPOINT);\n```\n\nAnd after all the optimization procedures it will be compressed till:\n\n```js\nconsole.log(\"We are in production!\");\nconsole.log(\"USERS_ENDPOINT:\", \"https://myapp.com/api/v1/users\");\n```\n\nMake 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.\n\n\n## Additional information\n\nPlease refer the [dotenv-flow documentation](https://github.com/kerimdzhanov/dotenv-flow#readme) to learn more about the `.env*` files concept.\n\nHere is the list of related sections:\n\n * [`NODE_ENV`-specific `.env*` files](https://github.com/kerimdzhanov/dotenv-flow#node_env-specific-env-files)\n * [Files under version control](https://github.com/kerimdzhanov/dotenv-flow#files-under-version-control)\n * [Variables overwriting/priority](https://github.com/kerimdzhanov/dotenv-flow#variables-overwritingpriority)\n\n\n## Contributing\n\nFeel free to dive in! [Open an issue](https://github.com/kerimdzhanov/dotenv-flow-webpack/issues/new) or submit PRs.\n\n\n## Running tests\n\nUsing NPM:\n\n```sh\n$ npm test\n```\n\nUsing Yarn:\n\n```sh\n$ yarn test\n```\n\n\n## License\n\nLicensed under [MIT](LICENSE) © 2019-2023 Dan Kerimdzhanov\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkerimdzhanov%2Fdotenv-flow-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkerimdzhanov%2Fdotenv-flow-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkerimdzhanov%2Fdotenv-flow-webpack/lists"}