Python (Flask) serving Angular project's index.html file
To simplify the setup, consider using Angular CLI to place all of the files in a distribution directory during the build process, i.e., by specifying the outputPath
in angular.json. You can use the angular.json assets
section to move your Python files during the build.
angular.json
"your-project": {
"root": "your-project-directory",
"sourceRoot": "your-project-directory/src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "your-project-directory/src/index.html",
"main": "your-project-directory/src/main.ts",
...
"assets": [
{
"glob": "**/*",
"input": "your-project-directory/src/assets/",
"output": "assets"
},
{
"glob": "**/*",
"input": "your-project-directory/src/python/",
"output": "."
}
In the top level of the dist
directory, place your main.py
with the basic Flask setup along with index.html
. Note the static_proxy to ensure that supporting files are served.
main.py
from flask import Flask, send_from_directory
app = Flask(__name__)
@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
return send_from_directory('./', path)
@app.route('/')
def root():
return send_from_directory('./', 'index.html')
if __name__ == '__main__':
# This is used when running locally only. When deploying use a webserver process
# such as Gunicorn to serve the app.
app.run(host='127.0.0.1', port=8080, debug=True)
@app.errorhandler(500)
def server_error(e):
return 'An internal error occurred [main.py] %s' % e, 500