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
 

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",