vue front-end flask back-end integration - flask

Question

Below is my vue front-end build(npm rum build on vue-cli 3).
And below is my run.py file for flask back-end.
from flask import Flask, render_template
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
variable_start_string='%%',
variable_end_string='%%',
))
app = CustomFlask(__name__,
static_folder="./dist",
template_folder="./dist"
)
#app.route('/')
def index():
return render_template("index.html")
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000)
as you can see, I've changed default flask static, template directory to ./dist due to my dist structure. But when I try to test my app, I got below messages.
Chrome console
vendor.97db904d.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.9aaff056.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.197e53a9.css Failed to load resource: the server responded with a status of 404 (NOT FOUND)
vendor.97db904d.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.9aaff056.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.197e53a9.css Failed to load resource: the server responded with a status of 404 (NOT FOUND)
flask
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/vendor.97db904d.js HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/app.9aaff056.js HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /css/app.197e53a9.css HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/vendor.97db904d.js HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/manifest.ce28c628.js.map HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/app.9aaff056.js HTTP/1.1" 404 -
How can I change properly static/template directory on flask? or should I change my build configuration on vue-cli3(webpack)? I have no more clue on this. Please give me a hint if you can. Thank you in advance.

Answer 1

If you change vue-cli build to put the content of the dist folder in the Flask static folder that would work.
However you'll need to change the way you initialize Flask app and serve index.html file.
# vue-flask.py
from flask import Flask
app = Flask(__name__, static_url_path='')
#app.route('/')
def index():
# changed to send_static_file
return app.send_static_file('index.html')
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000)
Here is the project structure:
I used the same approach in case of react and Flask integration but ended up splitting it down to two microservices as described here.

Answer 2

I've used this example in an app recently and it worked very well.
In particular the paragraph about configuring the redirects.