Issue
I have a Flask server that is set up like this
app = Flask(__name__,
static_folder="dist/assets",
static_url_path='/assets',
template_folder="dist")
CORS(app)
socketio = SocketIO(app, cors_allowed_origins='*')
My Flask directory looks like this
Flask
|- Classes
|- dist
|- log
|- main.py
|- Settings
And the dist looks like this
dist
|- assets
|- index.html
|- MyFavicon.png
|- vite.svg
In flask I have a basic index route
@app.route('/')
def index():
return render_template("index.html")
The index route loads, the problem is the assets and the favicon do not load
From the browser I get errors like this
GET
http://localhost:5000/MyFavicon.png
[HTTP/1.1 404 NOT FOUND 0ms]
And this is what the index.html looks like
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/MyFavicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monitor</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Does anyone know if the problem is the way Flask is trying to serve the static files or is it the way I am referencing things on React side of things?
EDIT:
Also this is the directory in React
React
| - public
| - src
| - assets
Where the favicon is in public, and the rest of my pictures are in assets
EDIT2:
Per @furas suggestion I tried moving all pictures into /dist/assets/ and updating index.html to this
<link rel="icon" href="/assets/MyFavicon.png" />
But I got the same errors, I also tried adding in a route like this
@app.route('/assets/MyFavicon.png')
def favicon():
print('serving favicon route')
return send_file("dist/assets/YFavicon.png")
But I was never able to observe the print statement, I played around with the route and the href I am using, but I keep on getting the same errors
Solution
You have static_folder="dist/assets" so you should keep files in dist/assets
dist
|- assets
| |- MyFavicon.png
| |- vite.svg
|
|- index.html
You have static_url_path='/assets' so you should use /assets for static files
href="/assets/MyFavicon.png"
To use href="/MyFavicon.png" you would need static_url_path='/'
but I don't know if this can make conflict with all @app.route(...)
Or you can create function only for this file
@app.route('/MyFavicon.png')`
def favicon():
#return send_file("dist/assets/MyFavicon.png")
return send_file("dist/MyFavicon.png")
OR you should run it with Apache/nginx which will serve static files from dist
Answered By - furas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.