Deploying Flask on HuggingFace Space with CSS

Hello everyone,

This is my first post in this forum. Kindly feedback if I made any mistake upon uploading this question.

So recently I just started deploying a Flask application into HuggingFace’s Space. The application booted and ran just fine, but it could not load the CSS file. The CSS can be loaded properly when I run it locally.

Here is a snapshot of my repository. The index.html is stored in templates folder, and the CSS file is stored in static folder

image

And the code snippet where I load the css file

<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='assets/css/all.css') }}" rel="stylesheet">

I’d be really appreciated to have your support on this issue. Thank you!

Update: After wandering to see some flask application from other users, I think the path for CSS should be updated based on the repository path. Could anyone confirm this for me, please?

Update 2: I have found the solution. The paths should be updated into this format "/embed/<user_name>/<space_name>/<folder_to_css_files>. I hope it’ll be helpful for anyone having this issue too.

2 Likes

Also for future reference, here is a Flask template that might be useful. Flask + dev server - a Hugging Face Space by templates

2 Likes