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.*.toml 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.
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.
NOTE: Be sure to merge the latest from "upstream" before making a pull request!
Licensed under MIT (c) 2021 Morioh Team
#webpack #toml #javascript #dotenv