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

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,
+  },
+};

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

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'}));
+};

setup.py

@@ -13,6 +13,7 @@
     zip_safe=False,
     install_requires=[
         'Flask',
+        'flask_url_map_serializer',
         'python-dotenv'
     ],
 )