webpack .env support

dashboard/.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

dashboard/package-lock.json

@@ -2251,6 +2251,11 @@
         "tslib": "^1.10.0"
       }
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",

dashboard/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "ace-builds": "^1.4.12",
     "axios": "^0.20.0",
+    "dotenv": "^8.2.0",
     "react": "^16.13.1",
     "react-ace": "^9.1.3",
     "react-dom": "^16.13.1",

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -54,6 +54,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
+    console.log(process.env.API_SERVER);
     // TODO: remove
     // this.setState({ clusters: dummyClusters });
 

dashboard/webpack.config.js

@@ -1,52 +1,63 @@
 const path = require('path');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const webpack = require('webpack');
+const dotenv = require('dotenv');
 
-module.exports = {
-  entry: './src/index.tsx',
-  target: 'web',
-  mode: 'development',
-  module: {
-    rules: [
-      {
-        test: /\.(ts|tsx)$/,
-        loader: "ts-loader",
-      },
-      {
-        enforce: "pre",
-        test: /\.js$/,
-        loader: "source-map-loader",
-      },
-      {
-        test: /\.(png|svg|jpg|gif|mp3)$/,
-        use: [
-          'file-loader'
-        ]
-      },
-      { test: /\.css$/, use: [ 'css-loader' ] },
-      {
-        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/'
+module.exports = () => {
+  const env = dotenv.config().parsed;
+  const envKeys = Object.keys(env).reduce((prev, next) => {
+    prev[`process.env.${next}`] = JSON.stringify(env[next]);
+    return prev;
+  }, {});
+
+  return {
+    entry: './src/index.tsx',
+    target: 'web',
+    mode: 'development',
+    module: {
+      rules: [
+        {
+          test: /\.(ts|tsx)$/,
+          loader: "ts-loader",
+        },
+        {
+          enforce: "pre",
+          test: /\.js$/,
+          loader: "source-map-loader",
+        },
+        {
+          test: /\.(png|svg|jpg|gif|mp3)$/,
+          use: [
+            'file-loader'
+          ]
+        },
+        { test: /\.css$/, use: [ 'css-loader' ] },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[name].[ext]',
+                outputPath: 'fonts/'
+              }
             }
-          }
-        ]
-      }
-    ],
-  },
-  resolve: {
-    extensions: ['*', '.tsx', '.ts', '.js', '.jsx', '.json'],
-  },
-  output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'build'),
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, "src", "index.html"),
-    })
-  ]
+          ]
+        }
+      ],
+    },
+    resolve: {
+      extensions: ['*', '.tsx', '.ts', '.js', '.jsx', '.json'],
+    },
+    output: {
+      filename: 'bundle.js',
+      path: path.resolve(__dirname, 'build'),
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, "src", "index.html"),
+      }),
+      new webpack.DefinePlugin(envKeys)
+    ]
+  }
 };