Add configurable proxy

.circleci/config.yml

@@ -13,6 +13,7 @@ jobs:
       REACT_APP_SOCKET_PATH: /wamp2/socket.io
       REACT_APP_GAMELIST_URL: https://airgames.netlify.app/gameList.json
       REACT_APP_API_ENDPOINT: /api
+      REACT_APP_USE_PROXY: 0
       CYPRESS_INSTALL_BINARY: 0
     steps:
       - checkout
@@ -40,6 +41,7 @@ jobs:
       REACT_APP_SOCKET_URL: https://public.jeremiez.net/
       REACT_APP_SOCKET_PATH: /wamp2/socket.io
       REACT_APP_GAMELIST_URL: https://airgames.netlify.app/gameList.json
+      REACT_APP_USE_PROXY: 0
       REACT_APP_API_ENDPOINT: /api
     steps:
       - checkout

.env.dist

@@ -10,3 +10,5 @@ REACT_APP_SOCKET_PATH=/socket.io
 # Set to 1 to remove Welcome dialog
 REACT_APP_NO_WELCOME=0
 
+# Proxify backend
+REACT_APP_USE_PROXY=1

package-lock.json

@@ -14625,14 +14625,61 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
-      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.6.tgz",
+      "integrity": "sha512-NyL6ZB6cVni7pl+/IT2W0ni5ME00xR0sN27AQZZrpKn1b+qRh+mLbBxIq9Cq1oGfmTc7BUq4HB77mxwCaxAYNg==",
+      "dev": true,
       "requires": {
-        "http-proxy": "^1.17.0",
-        "is-glob": "^4.0.0",
-        "lodash": "^4.17.11",
-        "micromatch": "^3.1.10"
+        "@types/http-proxy": "^1.17.4",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "lodash": "^4.17.20",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
       }
     },
     "http-signature": {
@@ -28466,6 +28513,17 @@
             }
           }
         },
+        "http-proxy-middleware": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+          "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+          "requires": {
+            "http-proxy": "^1.17.0",
+            "is-glob": "^4.0.0",
+            "lodash": "^4.17.11",
+            "micromatch": "^3.1.10"
+          }
+        },
         "import-local": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",

package.json

@@ -83,6 +83,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
+    "http-proxy-middleware": "^1.0.6",
     "i18next-scanner": "^2.11.0",
     "netlify-cli": "^3.7.1",
     "prettier": "2.0.5",

src/setupProxy.js

@@ -0,0 +1,25 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const spawnSync = require("child_process").spawnSync;
+
+module.exports = (app) => {
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT;
+  const useProxy = process.env.REACT_APP_USE_PROXY !== "0";
+
+  if (useProxy) {
+    if (apiEndpoint === undefined) {
+      // eslint-disable-next-line no-console
+      console.error(
+        "You must set your REACT_APP_API_HOST in your .env file or disable proxy"
+      );
+      // Sleep to have time to read the messages.
+      spawnSync("sleep", [1.5]);
+    }
+    app.use(
+      ["/store", "/file", "/execute", "/auth"],
+      createProxyMiddleware({
+        target: apiEndpoint,
+        changeOrigin: true,
+      })
+    );
+  }
+};

src/utils/settings.js

@@ -1,7 +1,12 @@
-export const API_ENDPOINT =
-  process.env.REACT_APP_API_ENDPOINT ||
-  window.location.origin ||
-  "http://localhost:3001";
+export const USE_PROXY = process.env.REACT_APP_USE_PROXY !== "0";
+
+export const API_ENDPOINT = USE_PROXY
+  ? ""
+  : process.env.REACT_APP_API_ENDPOINT ||
+    window.location.origin ||
+    "http://localhost:3001";
+
+console.log("prox", USE_PROXY, API_ENDPOINT);
 
 export const SOCKET_URL =
   process.env.REACT_APP_SOCKET_URL ||