A secure webpack plugin that gives the ability to access environment variables via process.env.*
defined in your .env.toml
, .env.development.toml
, .env.production.toml
, etc,. files within your web applications built with webpack.
Using NPM:
npm install dotenv-toml-webpack --save-dev
Using Yarn:
$ yarn add dotenv-toml-webpack --dev
dotenv-toml-webpack
wraps toml
and Webpack.DefinePlugin
. As such, it does a text replace in the resulting bundle for any instances of process.env
.
Your .env
files can include sensitive information. Because of this,dotenv-toml-webpack
will only expose environment variables that are explicitly referenced in your code to your final bundle.
Let's suppose you have the following files in your project:
# .env.toml
API_URL = "http://localhost:8081"
BASE_URL = "http://localhost:8080"
[DB]
HOST = "127.0.0.1"
NAME = "mydb"
PASS = "1qa2ws3ed4rf5tg6yh"
PORT = 27017
USER = "sa"
// webpack.config.js
const EnvTomlPlugin = require('dotenv-toml-webpack');
// or
// const { EnvTomlPlugin } = require('dotenv-toml-webpack');
module.exports = {
// ...
plugins: [
new EnvTomlPlugin()
],
// ...
};
// file1.js
console.log(process.env.BASE_URL);
// 'http://localhost:8080'
console.log(process.env.DB.HOST);
// '127.0.0.1'
// bundle.js
console.log('http://localhost:8080');
console.log('127.0.0.1');
Note: the .env.*.toml
values for BASE_URL
and DB
are NOT present in our bundle, as they were never referenced (as process.env.[VAR_NAME]) in the code.
By allowing you to define exactly where you are loading environment variables from and bundling only variables in your project that are explicitly referenced in your code, you can be sure that only what you need is included and you do not accidentally leak anything sensitive.
Add .env.*
to your .gitignore
file
# .env.development.toml
API_URL = "http://localhost:8081"
BASE_URL = "http://localhost:8080"
[DB]
HOST = "127.0.0.1"
NAME = "mydb"
PASS = "123456"
PORT = 27017
USER = "sa"
# .env.production.toml
API_URL = "https://api.yourdomain.com"
BASE_URL = "https://yourdomain.com"
[DB]
HOST = "127.0.0.1"
NAME = "mydb"
PASS = "123456"
PORT = 27017
USER = "sa"
// webpack.config.js
module.exports = (env, argv) => {
console.log(argv, env);
const prod = argv.mode === 'production';
return {
mode: 'development',
target: 'web',
devtool: prod ? false : 'source-map',
plugins: [
new EnvTomlPlugin({
path: `./.env.${argv.mode}.toml`,
}),
],
};
};
Use the following properties to configure your instance.
- path (
'./.env.toml'
) - The path to your environment variables. - systemvars (
false
) - Set to true if you would rather load all system variables as well (useful for CI purposes). - silent (
false
) - If true, all warnings will be suppressed. - safe (
false
) - If true, load '.env.example.toml' to verify the '.env' variables are all set. Can also be a string to a different file.
The following example shows how to set any/all arguments.
module.exports = {
...
plugins: [
new Dotenv({
path: './.env.other.toml', // load this now instead of the ones in '.env'
systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
silent: true, // hide any errors
safe: true, // load '.env.example.toml' to verify the '.env' variables are all set. Can also be a string to a different file.
})
]
...
};
Please refer to each project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes
NOTE: Be sure to merge the latest from "upstream" before making a pull request!
Stay up to date on the development of Morioh UI and reach out to the community with these helpful resources.
Follow @codek_tv and @im_a_developer on Twitter.
Follow Morioh and Vue Developers on FaceBook.
Join the official Discord room: https://discord.gg/sqxU6un.
Licensed under MIT (c) 2021 Morioh Team