I’m sure you know how to run Flask app as detailed in here
Use create-react-app to build a skeleton boiler-plate React structure.
Copy over the folders into the Flask project.
The final directory structure:
flask_app |_node_modules |_build | |_static | |_css | |_js | |_asset-manifest.json | |_favicon.ico | |_index.html | |_manifest.json | |_service-worker.js |_src | |_components | |_Hero.js | |_App.css | |_App.css | |_App.test.js | |_index.css | |_index.js | |_registerServiceWorker.js |_serve.py |_package.json |_package-lock.json
Flask should be configured to serve the
serve.py should be like this:
from flask import Flask, render_template app = Flask(__name__, static_folder="build/static", template_folder="build") @app.route("/") def hello(): return render_template('index.html') print('Starting Flask!') app.debug=True app.run(host='0.0.0.0')
You will need two instance of terminals:
In one terminal go to the root folder of the project and type
In another terminal run
python serve.py. This will run the flask app.
If you make any changes to React, you will have to run
You can also make api calls from React to your flask backend and use the returned variables to populate the html.
Unfortunately, this does not work with React’s hot reloading.