ui: fix hot reloading for docker and bare metal

Hot reloading is broken in react-scripts, more
information: facebook/create-react-app#11879

frontend/Dockerfile.dev

@@ -4,6 +4,13 @@ FROM node:13.12.0-alpine
 ARG API_HOST=localhost
 ARG API_PORT=8080
 
+# Try to make sure auto reload is enabled on code change
+ARG CHOKIDAR_USEPOLLING=true
+ARG CHOKIDAR_INTERVAL=2000
+
+# If you have low performing Hardware, enable this for hot reload without fast refresh:
+#ARG FAST_REFRESH=false
+
 # set working directory
 WORKDIR /app
 
@@ -20,4 +27,4 @@ RUN npm ci
 RUN sed -i "s/localhost:8080/${API_HOST}:${API_PORT}/g" package.json
 
 # start app
-CMD ["npm", "start"]
+CMD ["npm", "run", "startForDocker"]

frontend/hotReloadSetup.js

@@ -0,0 +1,22 @@
+// Copied from https://github.com/facebook/create-react-app/issues/11879
+// This is obsolete when this issue has been resolved
+
+const fs = require("fs");
+const path = require("path");
+
+if (process.env.NODE_ENV === "development") {
+  const webPackConfigFile = path.resolve("./node_modules/react-scripts/config/webpack.config.js");
+  let webPackConfigFileText = fs.readFileSync(webPackConfigFile, "utf8");
+
+  if (!webPackConfigFileText.includes("watchOptions")) {
+    if (webPackConfigFileText.includes("performance: false,")) {
+      webPackConfigFileText = webPackConfigFileText.replace(
+        "performance: false,",
+        "performance: false,\n\t\twatchOptions: { aggregateTimeout: 200, poll: 1000, ignored: '**/node_modules', },"
+      );
+      fs.writeFileSync(webPackConfigFile, webPackConfigFileText, "utf8");
+    } else {
+      throw new Error(`Failed to inject watchOptions`);
+    }
+  }
+}

frontend/package.json

@@ -78,7 +78,8 @@
     "typescript": "^3.7.2"
   },
   "scripts": {
-    "start": "react-app-rewired start | printf '\n\nThe Prod/Test environements will be removed in the next major release of TruBudget. That means /prod/api and /test/api will be routed to /api.\nFor further information see https://github.com/openkfw/TruBudget/pull/971\n\n\n'",
+    "start": "npm run info && node ./hotReloadSetup && react-app-rewired start",
+    "info": "printf '\n\nThe Prod/Test environments will be removed in the next major release of TruBudget. That means /prod/api and /test/api will be routed to /api.\nFor further information see https://github.com/openkfw/TruBudget/pull/971\n\n\n'",
     "audit": "better-npm-audit audit",
     "build": "react-app-rewired build",
     "test": "npm run check-translations",