Black Lives Matter. Please consider donating to Black Girls Code today.

Including static files

I’ve been using flask for quite sometime and being new to dash has got me wondering how i can include my static file like images, my JavaScript and css…
in flask i could include a line like "app= Flask(‘name’, static_url_path=‘my-static-directory’)"
This has got me wondering how this is possible with dash.
i have an application i did in flask using pygal but i need dash features replacing pygal.
just been wondering how i can do it without running two servers on the same machine

you need to add a static folder and add the code

import flask    
import os
STATIC_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')

@app.server.route('/static/<resource>')
    def serve_static(resource):
        return flask.send_from_directory(STATIC_PATH, resource)
1 Like

i still don’t understand… could you maybe show me an example using “import dash” replacing “import flask”… then kindly show me how i could include my javascript, css and image files in dash.

If you havent already, i suggest you look at the following thread, it worked for my case.
https://community.plotly.com/t/serve-locally-option-with-additional-scripts-and-style-sheets/6974

The simplest way to enable static file support with Dash is to do this:

app = Dash(__name__, static_folder='static')

Then create a folder static in the same directory as your Python script and your files will be available as eg /static/foo.png

4 Likes

Just an update on this, Dash now makes getting static files working a little easier than previously. Dash now follows Flask in providing a static_folder default of static which means it’s enough to create your Dash instance and then create a static folder in the same directory as your Dash app and it should just work out of the box:

app = Dash()

Obviously you can still provide a different value of static_folder if you want.

One caveat to this is that Dash supplies Flask with a default name param of __name__. This parameter tells Flask the import name of the app so that it can work out where the path of /static is relative to. This default value will work for Dash apps run as command line scripts (ie with if __name__ == '__main__':) and as single modules, however if it’s part of a package you’ll want to specify the name of the package. See the Flask docs for more on this.

This all works fine, locally, for me. However, when I go to deploy my app, none of my logos appear. Any guidance why? I have:

 app = dash.Dash(
     __name__,
     static_folder='static'
 )

and the element <img src="static/logo.png" style="display: inline-block; height: 100%; float: right;"> does exist on my page. However, the logo does not render. If I run it locally, the logo does render.

Nevermind; I was able to fix this, by using the StaticUrlPath method. :slight_smile:

@chriddyp: I wondering why I set locally server is True, but it doesnot work.
The network snip is bellow:

Dash now follows Flask in providing a static_folder default of static which means it’s enough to create your Dash instance and then create a static folder in the same directory as your Dash app and it should just work out of the box:

The problem of the solution is it serves assets as “www.example.com/static/ads.txt”.
I needed to serve my file on root as “www.example.com/ads.txt

So I copied code from Allowing users to download CSV on click

import flask

@app.server.route("/ads.txt")
def serve_static():
    return flask.send_file("./static/ads.txt", mimetype="text")

Looks this is working …