timchenkomo · January 20, 2022 10:15 · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ module.exports = {
 }
 ```
 
-# 3. Add @angluar-builder/custom-webpack to your build scheme
+# 3. Add `@angluar-builder/custom-webpack` to your build scheme
 
 In the file`angular.json`, find the key `projects.${YOUR PROJECT NAME}.architect.build` and change it to:
 

diff --git a/example-custom-webpack.config.js b/example-custom-webpack.config.js
@@ -0,0 +1,23 @@
+// Copyright (c) 2020 Joseph R. Quinn
+// SPDX-License-Identifier: ISC
+
+const { EnvironmentPlugin } = require('webpack');
+const SriPlugin = require('webpack-subresource-integrity');
+
+require('dotenv').config();
+
+module.exports = {
+  output: {
+    crossOriginLoading: 'anonymous'
+  },
+  plugins: [
+    new SriPlugin({
+      hashFuncNames: ['sha384'],
+      enabled: true
+    }),
+    new EnvironmentPlugin([
+      'APP_BACKEND_API_ENDPOINT'
+      'GITHUB_OAUTH_TOKEN'
+    ])
+  ]
+}
diff --git a/README.md b/README.md
@@ -40,8 +40,8 @@ module.exports = {
   plugins: [
     new EnvironmentPlugin([
       // Insert the keys to your environment variables here.
-      // Eg:
-      APP_API_ENDPOINT = "http://localhost:3000/api/v1"
+      // Eg: APP_API_ENDPOINT="http://localhost:3000/api/v1"
+      APP_API_ENDPOINT
     ])
 }
 ```

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# How to easily add environment variable to an Angular application
+# How to easily add environment variables to an Angular application
 
 This guide assumes that you already have an angular application set up by `ng create` and are using Angular CLI for 
 compilation.

diff --git a/README.md b/README.md
@@ -0,0 +1,110 @@
+# How to easily add environment variable to an Angular application
+
+This guide assumes that you already have an angular application set up by `ng create` and are using Angular CLI for 
+compilation.
+
+Other guides that I've read rely upon re-writing your `environments/environment.ts|environment.prod.ts` files
+with each compilation. I find this to be completely unnecessary when angular's internal use of `webpack` can just
+be extended to include environment variables.
+
+## 1. Add `@angular-builders/custom-webpack` to your dev-dependencies
+
+```sh
+$ npm i -D @angular-builders/custom-webpack
+```
+
+## 1.a. Add `dotenv` to your dev-dependencies
+I use dotenv to load `.env` file variables on my development machine. It is not required to install, but is useful while developing locally.
+
+```sh
+$ npm i -D dotenv
+```
+
+## 2. Create a custom webpack configuration
+
+For example, create a file `custom-webpack.config.js` in the root of your project.
+
+After creating the custom webpack file, add the following contents (or more) to the file.
+
+```javascript
+const { EnvironmentPlugin } = require('webpack');
+// Add additional requirements here
+
+// If you're using dotenv
+require('dotenv').config()
+
+// Export a configuration object
+// See [Wepack's documentation](https://webpack.js.org/configuration/) for additional ideas of how to 
+// customize your build beyond what Angular provides.
+module.exports = {
+  plugins: [
+    new EnvironmentPlugin([
+      // Insert the keys to your environment variables here.
+      // Eg:
+      APP_API_ENDPOINT = "http://localhost:3000/api/v1"
+    ])
+}
+```
+
+# 3. Add @angluar-builder/custom-webpack to your build scheme
+
+In the file`angular.json`, find the key `projects.${YOUR PROJECT NAME}.architect.build` and change it to:
+
+```javascript
+...
+"architect": {
+  ...
+  "build": {
+    "builder: "@angular-builders/custom-webpack:browser",
+    "options: {
+      "path": "./custom-webpack.config.js",
+      "replaceDuplicatePlugins": true
+    }
+    ...
+  }
+  ...
+}
+...
+```
+
+# 3.a Add `@angular-builders/custom-webpack`'s development server
+
+If you're using `ng serve` in developemnt, you may wish to also install the custom development server.
+
+```sh
+$ npm i -D @angular-builders/dev-server
+```
+
+And in your `angular.json` file, replace the dev server invocation to:
+
+```javascript
+...
+"architect": {
+  ...
+  "serve": {
+    "builder": "@angular-builders/dev-server:dev-server",
+    ...
+  }
+  ...
+}
+...
+```
+
+# 4. Use `process.env` to input your environment variables at compilation.
+
+Perform the same steps as you'd use normally for the webpack [`EnvironmentPlugin`](https://webpack.js.org/plugins/environment-plugin/).
+
+Eg:
+
+```javascript
+@Injectable()
+export class ApiService {
+  private readonly api = process.env.APP_API_ENDPOINT;
+
+  constructor(private http: HttpClient) {  }
+
+  public get(loc: string): Observable<any> {
+    return this.http.get(api + loc);
+  }
+}
+```