From 7d36dac699017b19dc2b902e977c22775b5923c9 Mon Sep 17 00:00:00 2001
From: Adrian Moennich <adrian.moennich@cern.ch>
Date: Fri, 5 Jul 2019 12:05:36 +0200
Subject: [PATCH] Integrate CRA with Flask

- install packages for flask url building and the babel macro
- provide url map to flask-urls macro
- setup proxying from the CRA server to the flask dev server
---
 .../client/.babel-plugin-macrosrc.js          |  9 +++++++
 flask_cra_example/client/package-lock.json    | 25 +++++++++++++++++++
 flask_cra_example/client/package.json         |  4 +++
 flask_cra_example/client/src/setupProxy.js    |  8 ++++++
 setup.py                                      |  1 +
 5 files changed, 47 insertions(+)
 create mode 100644 flask_cra_example/client/.babel-plugin-macrosrc.js
 create mode 100644 flask_cra_example/client/src/setupProxy.js

diff --git a/flask_cra_example/client/.babel-plugin-macrosrc.js b/flask_cra_example/client/.babel-plugin-macrosrc.js
new file mode 100644
index 0000000..cbf6125
--- /dev/null
+++ b/flask_cra_example/client/.babel-plugin-macrosrc.js
@@ -0,0 +1,9 @@
+const {execSync} = require('child_process');
+
+const urlMap = JSON.parse(execSync('flask url_map_to_json'));
+
+module.exports = {
+  flaskURLs: {
+    urlMap,
+  },
+};
diff --git a/flask_cra_example/client/package-lock.json b/flask_cra_example/client/package-lock.json
index 818c4a8..50a8bc7 100644
--- a/flask_cra_example/client/package-lock.json
+++ b/flask_cra_example/client/package-lock.json
@@ -5310,6 +5310,31 @@
         "locate-path": "^3.0.0"
       }
     },
+    "flask-urls": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/flask-urls/-/flask-urls-0.1.0.tgz",
+      "integrity": "sha512-ql10zLn5i7d/m8rmkBwgdKHIJOCiJXP3gVi+QA5oKA/K2E1JXBtCGY8+lxL1dxnyP583q2V0dPD+Pu95AOm/SA==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "qs": "^6.7.0"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+        }
+      }
+    },
+    "flask-urls.macro": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/flask-urls.macro/-/flask-urls.macro-0.0.1.tgz",
+      "integrity": "sha512-8pOQA0S0jbU4Gp1UAMTUNYQ1zk67rvA+v+ner+pQWKe71OE+Sv5XD185Fn1mLahJyZlNbnRyxG7tBYsYQS4nkA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0"
+      }
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
diff --git a/flask_cra_example/client/package.json b/flask_cra_example/client/package.json
index d2e475a..5ebd9ab 100644
--- a/flask_cra_example/client/package.json
+++ b/flask_cra_example/client/package.json
@@ -3,10 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "flask-urls": "^0.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"
   },
+  "devDependencies": {
+    "flask-urls.macro": "^0.0.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
diff --git a/flask_cra_example/client/src/setupProxy.js b/flask_cra_example/client/src/setupProxy.js
new file mode 100644
index 0000000..551c072
--- /dev/null
+++ b/flask_cra_example/client/src/setupProxy.js
@@ -0,0 +1,8 @@
+const proxy = require('http-proxy-middleware');
+
+// we need a custom proxy config since for some reason the "proxy" option in package.json
+// forwards even the websocket requests that are meant for the auto reloader...
+// https://github.com/facebook/create-react-app/issues/7323
+module.exports = app => {
+  app.use(proxy('/api', {target: process.env.FLASK_URL || 'http://127.0.0.1:5000'}));
+};
diff --git a/setup.py b/setup.py
index d3f756f..1593d6d 100644
--- a/setup.py
+++ b/setup.py
@@ -13,6 +13,7 @@
     zip_safe=False,
     install_requires=[
         'Flask',
+        'flask_url_map_serializer',
         'python-dotenv'
     ],
 )