🔧 Added process.env support via Webpack

docker-compose.yml

@@ -9,7 +9,7 @@ services:
     container_name: threetwo-ui
     env_file: ./docker-compose.env
     environment:
-      DOCKERHOST: "{{.Node.Hostname}}"
+      DOCKER_SOCKET_HOST: "{{.Node.Hostname}}:8051"
     restart: unless-stopped
     labels:
       - "traefik.enable=true"

src/client/context/socket/socket.context.tsx

@@ -8,7 +8,7 @@ import { success } from "react-notification-system-redux";
 const WebSocketContext = createContext(null);
 export const WebSocketProvider = ({ children }): ReactElement => {
   const dispatch = useDispatch();
-  const socketHost = process.env.DOCKERHOST + ":8051" || SOCKET_BASE_URI;
+  const socketHost = process.env.DOCKER_SOCKET_HOST || SOCKET_BASE_URI;
   const socket: Socket = io(socketHost);
 
   socket.on("connect", () => {

webpack.config.js

@@ -1,99 +1,104 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
 const outputDirectory = "dist";
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
-module.exports = {
+module.exports = (env) => {
-  entry: ["babel-polyfill", "./src/client/index.tsx"],
+  return {
-  output: {
+    entry: ["babel-polyfill", "./src/client/index.tsx"],
-    path: path.join(__dirname, outputDirectory),
+    output: {
-    filename: "./js/[name].bundle.js",
+      path: path.join(__dirname, outputDirectory),
-  },
+      filename: "./js/[name].bundle.js",
-  devtool: "source-map",
+    },
-  stats: {
+    devtool: "source-map",
-    children: true,
+    stats: {
-  },
+      children: true,
-  module: {
+    },
-    rules: [
+    module: {
-      {
+      rules: [
-        test: /\.worker\.(js|ts)$/i,
+        {
-        use: [
+          test: /\.worker\.(js|ts)$/i,
-          {
+          use: [
-            loader: "comlink-loader",
+            {
-            options: {
+              loader: "comlink-loader",
-              singleton: true,
+              options: {
+                singleton: true,
+              },
             },
-          },
+          ],
-        ],
+        },
-      },
+        {
-      {
+          test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
-        test: [/\.js?$/, /\.jsx?$/, /\.tsx?$/],
+          use: ["babel-loader"],
-        use: ["babel-loader"],
+          exclude: /node_modules/,
-        exclude: /node_modules/,
+        },
-      },
+        {
-      {
+          enforce: "pre",
-        enforce: "pre",
+          test: /\.js$/,
-        test: /\.js$/,
+          loader: "source-map-loader",
-        loader: "source-map-loader",
+        },
-      },
+        {
-      {
+          test: /\.css$/i,
-        test: /\.css$/i,
+          use: ["style-loader", "css-loader"],
-        use: ["style-loader", "css-loader"],
+        },
-      },
+        {
-      {
+          test: /\.s[ac]ss$/i,
-        test: /\.s[ac]ss$/i,
+          use: [
-        use: [
+            // Creates `style` nodes from JS strings
-          // Creates `style` nodes from JS strings
+            "style-loader",
-          "style-loader",
+            // Translates CSS into CommonJS
-          // Translates CSS into CommonJS
+            "css-loader",
-          "css-loader",
+            // Compiles Sass to CSS
-          // Compiles Sass to CSS
+            "sass-loader",
-          "sass-loader",
+          ],
-        ],
+        },
-      },
+        {
-      {
+          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
-        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
+          use: [
-        use: [
+            "file-loader?hash=sha512&digest=hex&name=img/[contenthash].[ext]",
-          "file-loader?hash=sha512&digest=hex&name=img/[contenthash].[ext]",
+            "image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false",
-          "image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false",
+          ],
-        ],
+        },
-      },
+      ],
-    ],
+    },
-  },
+    resolve: {
-  resolve: {
+      extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
-    extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
+      aliasFields: ["browser", "browser.esm"],
-    aliasFields: ["browser", "browser.esm"],
+    },
-  },
+    devServer: {
-  devServer: {
+      port: 3050,
-    port: 3050,
+      open: true,
-    open: true,
+      hot: true,
-    hot: true,
+      proxy: {
-    proxy: {
+        "/api/**": {
-      "/api/**": {
+          target: "http://localhost:8050",
-        target: "http://localhost:8050",
+          secure: false,
-        secure: false,
+          changeOrigin: true,
-        changeOrigin: true,
+        },
       },
     },
-  },
+    optimization: {
-  optimization: {
+      usedExports: false,
-    usedExports: false,
+    },
-  },
+    plugins: [
-  plugins: [
+      // new BundleAnalyzerPlugin(),
-    // new BundleAnalyzerPlugin(),
+      new HtmlWebpackPlugin({
-    new HtmlWebpackPlugin({
+        template: "./public/index.html",
-      template: "./public/index.html",
+        favicon: "./public/favicon.ico",
-      favicon: "./public/favicon.ico",
+        title: "express-typescript-react",
-      title: "express-typescript-react",
+      }),
-    }),
+      new webpack.DefinePlugin({
-    new webpack.DefinePlugin({
+        "process.env.DOCKER_SOCKET_HOST": JSON.stringify(
-      "process.env.DOCKERHOST": JSON.stringify(process.env.DOCKERHOST),
+          process.env.DOCKER_SOCKET_HOST,
-    }),
+        ),
-    new MiniCssExtractPlugin({
+      }),
-      filename: "./css/[name].css",
+      new MiniCssExtractPlugin({
-      chunkFilename: "./css/[id].css",
+        filename: "./css/[name].css",
-    }),
+        chunkFilename: "./css/[id].css",
-  ],
+      }),
+    ],
+  };
 };