Use webpack --env via docs for future KEYPOST_APP_HOST use

Author: jeffrade

.envrc

@@ -1 +1,2 @@
 export NODE_OPTIONS=--openssl-legacy-provider
+export KEYPOST_APP_HOST=localhost:8000

package.json

@@ -15,8 +15,8 @@
     "webpack-dev-server": "^4.10.1"
   },
   "scripts": {
-    "start": "webpack-dev-server --mode development",
-    "build": "webpack --mode production"
+    "start": "webpack-dev-server --mode development --env KEYPOST_APP_HOST=$KEYPOST_APP_HOST",
+    "build": "webpack --mode production --env production --env KEYPOST_APP_HOST=$KEYPOST_APP_HOST"
   },
   "dependencies": {
     "@cloudflare/opaque-ts": "^0.7.5"

webpack.config.ts

@@ -1,40 +1,46 @@
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require('path');
 
-module.exports = {
-  entry: './src/index.ts',
-  module: {
-    rules: [
-      {
-        test: /\.ts?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      }
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
+module.exports = (env: any) => {
+  // https://webpack.js.org/guides/environment-variables/ Use env.<YOUR VARIABLE> here:
+  console.log('KEYPOST_APP_HOST: ', env.KEYPOST_APP_HOST);
+  console.log('production: ', env.production || false);
+
+  return {
+    entry: './src/index.ts',
+    module: {
+      rules: [
+        {
+          test: /\.ts?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        }
+      ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+      filename: 'bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
 
-  plugins: [
-    // https://github.com/jantimon/html-webpack-plugin#options
-    new HtmlWebpackPlugin({
-      title: 'tutorial', 
-      template: 'src/custom.html',
-      filename: 'custom.html'}),
-    new HtmlWebpackPlugin({
-      title: 'Keypost Home',
-      template: 'src/index.html',
-      filename: 'index.html'})
-   ],
+    plugins: [
+      // https://github.com/jantimon/html-webpack-plugin#options
+      new HtmlWebpackPlugin({
+        title: 'tutorial', 
+        template: 'src/custom.html',
+        filename: 'custom.html'}),
+      new HtmlWebpackPlugin({
+        title: 'Keypost Home',
+        template: 'src/index.html',
+        filename: 'index.html'})
+    ],
 
-  devServer: {
-    static: path.join(__dirname, "dist"),
-    compress: true,
-    port: 4000,
-  },
+    devServer: {
+      static: path.join(__dirname, "dist"),
+      compress: true,
+      port: 4000,
+    },
+  };
 };