0

I am writing a simple web app using Flask for backend and Vue for the client side. I have the following folder structure:

.
├── client/
│   ├── dist/
│   │   ├── css/
│   │   ├── js/
│   │   └── index.html
│   └── ... (Vue folder structure)
│
└── server/
    └── server.py

This is how my flask server looks like (supposed to serve the compiled Vue app statically):

from flask import Flask


app = Flask(__name__, static_folder='../client/dist')


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return app.send_static_file('index.html')


if __name__ == '__main__':
    app.run(host='localhost', port=8000, debug=True)

So the weird part is that if I run python -m http.server from within client/dist, it just works fine (and so does yarn serve when using the development server by Vue). But when I run the Flask app with python server/server.py, I get the following error in Chrome:

Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.47da3172.js:1:1)

and same for all Vue generated bundles. On the server side I see that the scripts were actually loaded properly (status code 200). How can I serve the Vue app statically with Flask so that it is actually rendered?

enys
  • 513
  • 3
  • 11
  • Can you share your research result, if you had found any things? I had found [1](https://stackoverflow.com/questions/24578330/flask-how-to-serve-static-html) & [2](https://stackoverflow.com/questions/64492542/uncaught-syntaxerror-unexpected-token-flask-error-when-using-a-separate-js) You may had already found these, but if you hadn't found these, check them. That may help. – imxitiz Jun 10 '22 at 09:54
  • @Xitiz Yes, I found those (and actually used the `app.send_static_file` approach), but it's still not working. When following the accepted answer in [1](https://stackoverflow.com/questions/24578330/flask-how-to-serve-static-html), flask doesn't even find the frontend files with `@app.route('/')` so I needed to add `@app.route('/')` to at least be able to load the resources. – enys Jun 10 '22 at 10:05
  • what about `send_file()` function? Example: `return send_file("path/to/file")` – imxitiz Jun 10 '22 at 10:08
  • Same result. But if I add another route after your suggestion, it seems to work! Adding `@app.route('/')` and having it just `return app.send_static_file(filename)` seems to resolve the issue. So basically, Flask needs one generic endpoint (`/`) and one specific to actual files (`/`). Thanks for sparring with me over this issue! If you make it an answer (together with the second route) I can accept it! – enys Jun 10 '22 at 10:20
  • Should I write an answer or you will or should be closed as duplicate? – imxitiz Jun 11 '22 at 02:09
  • I am not sure it is a duplicate as the solution was to separate the normal page endpoints from the static resources (adding a route for ``). I think the best if you add an answer and I will accept it. I think it's generally not good optics if the OP answers their own question :) – enys Jun 11 '22 at 15:13
  • @enys There's nothing wrong with answering your own question if it actually provides the solution to the problem. Not answering it when you indeed have the solution would be worse, as it doesn't help anyone. – tony19 Jun 12 '22 at 05:24

0 Answers0