🔧 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,11 +1,13 @@
 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) => {
+  return {
     entry: ["babel-polyfill", "./src/client/index.tsx"],
     output: {
       path: path.join(__dirname, outputDirectory),
@@ -89,7 +91,9 @@ module.exports = {
         title: "express-typescript-react",
       }),
       new webpack.DefinePlugin({
-      "process.env.DOCKERHOST": JSON.stringify(process.env.DOCKERHOST),
+        "process.env.DOCKER_SOCKET_HOST": JSON.stringify(
+          process.env.DOCKER_SOCKET_HOST,
+        ),
       }),
       new MiniCssExtractPlugin({
         filename: "./css/[name].css",
@@ -97,3 +101,4 @@ module.exports = {
       }),
     ],
   };
+};