-
Notifications
You must be signed in to change notification settings - Fork 74
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: expand description in readme #40
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is looking really awesome! just need a few changes and should be good to pull!
README.md
Outdated
@@ -19,12 +19,31 @@ Include the package locally in your repository. | |||
|
|||
`npm install dotenv-webpack --save` | |||
|
|||
### Description | |||
|
|||
`dotenv-webpack` wraps `dotenv` and `Webpack.DefinePlugin`. As such, it overwrites existing anyexisting `DefinePlugin` configurations. Also, like `DefinePlugin`, it does a text replace in the resulting bundle for any instances of `process.env`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo: anyexisting
README.md
Outdated
|
||
`dotenv-webpack` wraps `dotenv` and `Webpack.DefinePlugin`. As such, it overwrites existing anyexisting `DefinePlugin` configurations. Also, like `DefinePlugin`, it does a text replace in the resulting bundle for any instances of `process.env`. | ||
|
||
As such, if used with `React` in production, make sure to include `NODE_ENV=production` inside your `.env` file. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While this is a common use-case, I don't think you would need to mention React explicitly.
Instead I would mention something as follows:
Any script files that get bundled with webpack and reference
process.env
would need to use this plugin to access the variables defined in the.env
file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mrsteele I'm removing this text and adding an example
Use in your code
// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log({
DB_HOST='127.0.0.1',
DB_PASS='foobar',
S3_API='mysecretkey'
}.DB_HOST);
README.md
Outdated
`dotenv-webpack` wraps `dotenv` and `Webpack.DefinePlugin`. As such, it overwrites existing anyexisting `DefinePlugin` configurations. Also, like `DefinePlugin`, it does a text replace in the resulting bundle for any instances of `process.env`. | ||
|
||
As such, if used with `React` in production, make sure to include `NODE_ENV=production` inside your `.env` file. | ||
If used with Node, this is not compatible with any calls to `process.env`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Along with the comment above, I would say you can nix this comment as we are a webpack plugin and not exclusively a "node" plugin (though it runs in the node environment).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mrsteele OK. I think adding an example of the resulting bundle should be clear enough.
README.md
Outdated
As such, if used with `React` in production, make sure to include `NODE_ENV=production` inside your `.env` file. | ||
If used with Node, this is not compatible with any calls to `process.env`. | ||
|
||
Also, be aware that all information in your `.env` file will be included in the resulting bundle. Please do not share any secret information in your client bundle. Instead, make a separate `.client.env` file. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
README.md
Outdated
@@ -33,14 +52,26 @@ module.exports = { | |||
... | |||
plugins: [ | |||
new Dotenv({ | |||
path: './.my.env', // if not simply .env | |||
path: './.env // Path to .env file. Use a separate file for client configuration |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Make sure to close the path string.
@mrsteele Thanks for the review. I'll get the changes in tonight. |
@mrsteele changes in. Let me know what you think. |
|
||
`dotenv-webpack` wraps `dotenv` and `Webpack.DefinePlugin`. As such, it overwrites existing any existing `DefinePlugin` configurations. Also, like `DefinePlugin`, it does a text replace in the resulting bundle for any instances of `process.env`. | ||
|
||
Also, be aware that all information in your `.env` file will be included in the resulting bundle. Please do not share any secret information in your client bundle. Instead, make a separate `.client.env` file. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be removed due to #42 so you can remove this paragraph. If you would rather we can simply state:
Your `.env` files can include sensative information. Because of this,`dotenv-webpack` will only include defined environment variables in the final bundle.
### Usage | ||
|
||
The plugin can be installed with little-to-no configuration needed. Once installed, you can access the variables as expected within your code using `process.env`. | ||
The plugin can be installed with little-to-no configuration needed. Once installed, you can access the variables within your code using `process.env` as you would with `dotenv`. | ||
|
||
The example bellow shows the defaults, as well as a description of each parameter. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should update the "defaults" statement as it isn't quite right.
###### Resulting bundle | ||
``` | ||
// bundle.js | ||
console.log({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This will update to the new approach (see #42)
I'll merge this and make the final changes myself. Thank you so much for doing this @j-feng13! |
@mrsteele
Here's a PR for #39
webpack.DefinePlugin
being used under the hood.env
file in order to prevent secrets from leaking into the client side bundle