From a39bc3b98c8eb330bae0e767ee5089ce2d6708eb Mon Sep 17 00:00:00 2001
From: Matt Grau <graum@phys.ethz.ch>
Date: Tue, 13 Jul 2021 23:58:32 +0200
Subject: [PATCH] build frontend with parcel and serve with flask
---
.gitignore | 5 ++++-
README.md | 11 ++++++++++-
frontend/index.html | 2 +-
frontend/{src => }/index.js | 6 +++---
frontend/package.json | 3 ++-
server.py | 8 +++-----
6 files changed, 23 insertions(+), 12 deletions(-)
rename frontend/{src => }/index.js (54%)
diff --git a/.gitignore b/.gitignore
index 18b3f73..dca62f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,7 @@
# ignore parcel dist and cache
*dist
-.cache
\ No newline at end of file
+.cache
+
+# ignore build directory
+frontend/build
\ No newline at end of file
diff --git a/README.md b/README.md
index b51b987..f20f6b2 100644
--- a/README.md
+++ b/README.md
@@ -7,11 +7,13 @@ python3 -m venv demo_venv
```
Activate the python environment
+
```bash
source demo_venv/bin/activate
```
Verify that you are in the virtual environment
+
```bash
which pip
$ ~/tiqi-js-tutorial/demo_venv/bin/pip
@@ -33,6 +35,7 @@ pip install flask
```
## Create JS Frontend
+
```bash
mkdir frontend
cd frontend
@@ -41,4 +44,10 @@ npm init
```bash
npm install parcel-bundler
-```
\ No newline at end of file
+```
+
+## Serve frontend from flask
+
+```bash
+npm run-script build
+```
diff --git a/frontend/index.html b/frontend/index.html
index 93d198d..7d45625 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -10,7 +10,7 @@
<body>
<div id="root"></div>
- <script src='src/index.js'></script>
+ <script src='index.js'></script>
</body>
</html>
\ No newline at end of file
diff --git a/frontend/src/index.js b/frontend/index.js
similarity index 54%
rename from frontend/src/index.js
rename to frontend/index.js
index fac2356..d3f5060 100644
--- a/frontend/src/index.js
+++ b/frontend/index.js
@@ -1,8 +1,8 @@
-import 'regenerator-runtime/runtime'
+import "regenerator-runtime/runtime";
import React from "react";
import ReactDOM from "react-dom";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
-import Device from './device'
+import Device from "./src/device";
ReactDOM.render(<Device name="My Device" />, document.getElementById("root"));
diff --git a/frontend/package.json b/frontend/package.json
index 9d7b32a..87d7f89 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,6 +5,7 @@
"main": "index.js",
"scripts": {
"start": "parcel start index.html",
+ "build": "rm -rf build; parcel build index.html --out-dir build --no-source-maps --no-content-hash index.css index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Matt Grau",
@@ -17,4 +18,4 @@
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
-}
+}
\ No newline at end of file
diff --git a/server.py b/server.py
index 75b5f61..75b9fd5 100644
--- a/server.py
+++ b/server.py
@@ -1,15 +1,13 @@
import flask
-import flask_cors
from device import Device
device = Device()
app = flask.Flask(__name__)
-flask_cors.CORS(app)
-@app.route('/')
-def main():
- return 'Hello World!'
+@app.route('/<path:path>')
+def main(path):
+ return flask.send_from_directory('frontend/build/', path)
@app.route('/get_voltage')
--
GitLab