Add REACT_APP_API_URL env variable and use NODE_ENV

use NODE_ENV for api_url, add .env.example

Delete bundle.js for now

.gitignore

@@ -8,3 +8,4 @@ dist
 .idea
 node_modules
 docs/build
+.env

webapp/.env.example

+REACT_APP_API_URL="http://10.98.1.19:5000/api/things"

webapp/.eslintrc.json

@@ -26,4 +26,4 @@
         "version": "detect"
       }
     }
-  }
\ No newline at end of file
+}

webapp/package.json

@@ -9,6 +9,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.20.7",
     "@types/bootstrap": "^5.2.6",
+    "@types/dotenv-webpack": "^7.0.3",
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
     "@types/md5": "^2.3.2",
     "@types/react": "^18.0.27",
@@ -22,6 +23,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "css-loader": "^6.7.3",
     "date-fns": "^2.29.3",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.32.0",
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -36,8 +38,8 @@
     "webpack-dev-server": "^4.11.1"
   },
   "scripts": {
-    "start": "webpack serve --mode development --open",
-    "build": "webpack --mode production"
+    "start": "webpack serve --node-env=development --open",
+    "build": "webpack --node-env=production"
   },
   "dependencies": {
     "bootstrap": "^5.2.3",

webapp/src/index.tsx

@@ -3,14 +3,15 @@ import ReactDOM from "react-dom";
 import Things from "./Things"
 
 const query = new URLSearchParams(window.location.search);
+const api_url = process.env.NODE_ENV == 'production' ? 'http://localhost:33333/api/things' : process.env.REACT_APP_API_URL
 
 if (query.has('test'))
   ReactDOM.render(
     <Things
       refresh_frequency_ms={5000}
-      api_url={'http://localhost:33333/api/things'} />,
+      api_url={api_url} />,
     document.getElementById("root") as HTMLElement);
 else
   ReactDOM.render(
     <Things />,
-    document.getElementById("root") as HTMLElement);
\ No newline at end of file
+    document.getElementById("root") as HTMLElement);

webapp/webpack.config.ts

@@ -2,6 +2,7 @@ import path from "path";
 import { Configuration as WebpackConfiguration } from 'webpack';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import DotenvPlugin from 'dotenv-webpack';
 
 interface Configuration extends WebpackConfiguration {
   devServer?: WebpackDevServerConfiguration;
@@ -62,6 +63,7 @@ const config: Configuration = {
         files: "./src/**/*",
       },
     }),
+    new DotenvPlugin(),
   ],
 };