How to serve static files in streamlit?

Using Streamlit
1

How can i serve static files,so i can access it directly from the frowser.
For example,in FastAPI,i can use mount method:

app.mount('/static', StaticFiles(directory=ROOT_DIR.joinpath('static')), name='static')

How do I implement this in streamlit?

2

Hi @ji_haoran, thanks for posting! What types of files are you looking to serve?

3

Currently, I use the BS icons in Streamlit by referencing the CDN bootstrap-icon.css file:

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

But I wanted to use the BS icons locally, so I downloaded the relevant files locally, but when I used it, I found that it referenced the external file with the suffix WOFF, so I wondered if I could serve the external file locally.
The head of bootstrap-icon.css file:

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf") format("woff2"),
url("./fonts/bootstrap-icons.woff?8d200481aa7f02a2d63a331fc782cfaf") format("woff");
}

And my static files structure:

  • bootstrap-icons.css
  • fonts
    • bootstrap-icons.woff
    • bootstrap-icons.woff2
  • 1-circle.svg
  • 1-circle-fill.svg
  • …
1 Like
4

For those who’re still looking for a way to achieve this: you can manually patch the Streamlit server.py file’s Tornado routes as follows:

routes.extend([
            (r'/your-file.json()', tornado.web.StaticFileHandler, {"path": os.path.join(os.getcwd(), "static", "your-file.json")})
        ])

and create the corresponding static/your-file.json location at the root of your project.

Note, I think Streamlit is planning to deliver this feature by end of Jan. 2023.

1 Like
6

Any news on that ? I am looking forward to server static js and css scripts instead of using CDN

7

This is now possible Static file serving - Streamlit Docs

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.