How do I use Dash to add local css?


#10

Is there a way to serve both the Plotly static files (plotly.js, plotly.css) and my custom static files (my_js.js, my_css.css) from my local machine (not local network)?

Unfortunately, when I set:
app.css.config.serve_locally = True
app.script.config.serve_locally = True

and add styles via the following:

# Add Bootstrap and custom CSS styles to app
cssStylesheets = ['blog.css', 'bootstrap.min.css']
for stylesheet in cssStylesheets:
    app.css.append_css({
        "external_url": '/static/' + stylesheet
    })

, I get an error that “A local version of css is not available…” I am using the same serve_stylesheet function that you showed with the flask.send_from_directory operation. With the serve_locally variables set to True, it seems that the server does not recognize the /static/ endpoint…


#11

I may be missing something obvious but, how do I add the stylesheets to the dash app using this function?


#12

Hey @chriddyp,

This solution was working with a previous version of Dash, however I recently updated to the newest Dash version and this no longer works.

The error is: A local version of /static/TEST.css is not available.

Thanks in advance!


#13

@jyhsu - for security reasons, I removed the implicit serving of the /static resource. You can add it back yourself with something like:

@app.server.route('/static/<path:path>')
def static_file(path):
    return app.send_from_directory('static', path)

You can see more solutions here: https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask. The underlying flask server is available as app.server and you can always pass in your own flask instance with the server argument of dash.Dash as in:

server = Flask(__name__)
app = dash.Dash(__name__, server=server)

#14

I’m having the same problem here.

Is there any workaround?


#15

One workaround is to set the css through the dash_html_components themselves. Here’s a simple example:

import dash
import dash_html_components as html
import dash_core_components as dcc
from flask import send_from_directory
import os

app = dash.Dash()

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

app.layout = html.Div([
    html.Link(
        rel='stylesheet',
        href='/static/stylesheet.css'
    ),
    html.Div('Assets loading locally')
])


@app.server.route('/static/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'static')
    return send_from_directory(static_folder, path)


if __name__ == '__main__':
    app.run_server(debug=True)

Where I’ve saved a file named stylesheet.css within a folder named static.


Serve_locally option with additional scripts and style sheets
Problem of linking local javascript file
#16

I could not make it work.

Added a css file on, in my case: C:\Users\Username\AppData\Local\Continuum\Anaconda2\Lib\site-packages\dash_core_components-0.13.0rc1-py2.7.egg\dash_core_components

It seems that Dash doesnt recognize it. Any idea of how to solve this? @chriddyp @mikesmith1611

Thanks a lot


Can't seem to change default Height on Graph
#17

Did you add this in your app.py ?

import dash_core_components as dcc
dcc._css_dist[0]['relative_package_path'].append('mycss.css')

I would probably use this method anyway its much cleaner:


#19

If you’re using such method, remember to delete this line:app.css.config.serve_locally = True
It wasn’t working for me, I got confused until I deleted that line.


#20

Thanks for your good suggestion. The only problem is that @app.server.route(’/static/<path:path>’) doesn’t seem to work. Only when I remove the “path:” type converter does it really load local css. So I rather use @app.server.route(’/static/<path>’) instead.


#22

Discussed again in Serve_locally option with additional scripts and style sheets


#23

I’m looking to update this behaviour (adding external CSS and JS) in this PR: https://github.com/plotly/dash/pull/171. Feedback welcome! (Please comment on the PR itself)


#24

i try all like u say and copy this code. …but still not can loading localhost css


#25

I love Dash but as a data scientist with no CSS experience this whole CSS thing is very frustrating particularly when there are no clear examples of how use local CSS files. In R Shiny stuff just works and don have to worry about style sheets. But I prefer Python and was hoping Dash could be my salvation.

I want to recreate this bootstrap demo (https://getbootstrap.com/docs/4.0/examples/dashboard/) in Dash but cant get past the first hurdle of using the appropriate CSS’s. This or a simple demo showing how to use different CSS locally would be great. I’ve tried the code snippets without any success :frowning:


#26

app.head seem not support now,
you can try to use

html.Link(
    href='https://XXX.css',
    rel='stylesheet'
)

in app.layout

for local css, 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)

#27

Here’s a slightly easier way… if you have a CSS file in assets/main.css then you can use the static_folder argument of dash.Dash() to serve up that folder, and then use html.Link to reference it, with an href that starts with / to make it relative to the root of your server:

app = dash.Dash(__name__, static_folder='assets')
app.scripts.config.serve_locally=True
app.css.config.serve_locally=True
app.layout = html.Div([
    html.Link(href='/assets/main.css', rel='stylesheet'),
    .....
])

I have an HTML and CSS template, how I can add it to de Dash python script?
#28

Note that when you do it this way the initial name param for the Dash class is mandatory, as it needs to pass it onto Flask, which needs it to work out where whereabouts on the file system assets/ is relative to.

So for a standalone module like an app.py script, you would want this (as in @nicolaskruchten’s example):

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

If you’re code is within a package however, then as suggested by the Flask docs, you want to do:

app = Dash('yourpackage', static_folder='assets')

or

app = Dash(__name__.split('.')[0], static_folder='assets')


#29

Thanks! I’ve edited my comment above to remove this confusion :slight_smile:

edit: actually no, your comment is very helpful in context, so I’ve reverted my change to leave it the way it was when you replied!


#30

Here again an example for pip3/Ubuntu users (works even with global installed packages). Search for the dash_core_components folder:

usr/local/lib/python3.5/dist-packages/dash_core_components/

then create your test.css in that directory and insert the following line at the beginning of your code (before the actual app, and leave: ‘relative_package_path’ unchanged , took me a while to figure that one out :))

dcc._css_dist[0][‘relative_package_path’].append(‘test.css’)

next insert these two lines after you created your app (actually the first one should be sufficient):

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

Then it should work.


#31

Randy’s solution worked for me!
Thanks a lot!