Including static files

Dash Python
1

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

2

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)
3

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.

4

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

5

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
6

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.

1 Like
7

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.

8

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

9

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

image
image.jpg1907×916 408 KB

10

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 - #3 by scottschmidt

import flask

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

Looks this is working …