flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
10.8k stars 416 forks source link

Assets not loading on the web (ASGI-mode) #3631

Open fccoelho opened 1 month ago

fccoelho commented 1 month ago

Duplicate Check

Describe the bug

Favicon and other images are not loading from assets directory, when deployed to web. Desktop version loads images normally.

Code sample

Logs Here is how my web app is being started: ```python app = ft.app( target=main, export_asgi_app=True, assets_dir="assets", ) ``` In the app I simply use an `ft.Image widget`.

To reproduce

This bug only happens when I deploy my APP using ASGI (I am using hypercorn)

I am also deploying inside a Docker container

Expected behavior

I expected the app to be able to load the images in the assets directory as it does when alunched as a desktop app or a non-ASGI webapp.

Screenshots / Videos

Screenshots / Video demonstration [Upload media here]

Operating System

Linux

Operating system details

Ubuntu 22.04

Flet version

0.22.1

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs ```console [Paste your logs here] ```

Additional details

No response

fccoelho commented 1 month ago

Hum... I think that this is due to myself running this on a local docker-compose setup that does not expose the assets static directory. In other web frameworks you have to configure your web server to serve the staticfiles directory. Perhaps a word about this would be nice.

syleishere commented 1 month ago

Why not call your ft.image with the full url https://blah.com/blah.png to your apache/nginx/fastapi instance. I think you may be confusing client vs server assets, when someone views your site you can't just tell them to load assets off their hard drives, that would be huge security risk and browsers will block it.

fccoelho commented 1 month ago

Your comment makes sense, but it would be nice to have some documentation on how to serve the static files from Nginx for flet apps. Something like this: https://stackoverflow.com/questions/12806893/use-nginx-to-serve-static-files-from-subdirectories-of-a-given-directory

I am calling ft.Image with a relative path to the root of the site, for example: images/logo.png. When you run on the desktop, the assets directory contents are mapped to the root of the site.