[FIXED] Flask not serving pictures to a React app

Issue

this is a continuation of this question

I have a React app built with vite, and for the backend I am using Flask.

This is my Flask config

app = Flask(__name__,
            static_folder="dist/assets",
            static_url_path='/assets',
            template_folder="dist")


CORS(app)
socketio = SocketIO(app, cors_allowed_origins='*')

And inside the index.html file I am referencing my favicon like this

<link rel="icon" href="/assets/MyFavicon.png" />

My Flask directory looks like this

Flask
|- Classes
|- dist
   | - assets
   | - index.html
|- log
|- main.py
|- Settings

I previously had the favicon in the public folder, but I manually moved the file into the assets folder since the rest of the pictures are in there.

In Flask I have a basic index route like this

@app.route('/')
def index():
    return render_template("index.html")

It works fine, the only problem is that none of the images are loaded, including the favicon.

From the browser side, the errors looks like this

GET
http://localhost:5000/MyFavicon.png
[HTTP/1.1 404 NOT FOUND 0ms]

I tried adding in a route to explicitly serve the favicon

@app.route('/assets/MyFavicon.png')
def favicon():
    print('serving favicon route')
    return send_file("dist/assets/MyFavicon.png")

But I was never able to observe the print statement, so I don't think the route worked.

Does anyone know how to get Flask to serve the static files? Thanks!

Solution

If you assign dist to the static_folder and static_url_path an empty string, you should be able to provide both the index.html file, the favicon and all assets.

from flask import Flask 

app = Flask(__name__, 
    static_folder='dist', 
    static_url_path='' 
)

@app.route('/')
def index():
    return app.send_static_file('index.html')

Answered By - Detlef