Django Plotly Dash local CSS

[till]

@delsim

I am trying to create a plotly dash app in Django and use django-plotly-dash. Everything works just fine, but since I am setting up the app on a server without internet connection, I have to use the serve_locally option. Since I added this one, the app can’t find my CSS, placed in the static folder anymore:

app = DjangoDash('funds_dash', serve_locally=True)

app.css.append_css({'external_url': '/_static/css/app_stylesheet.css'})

The CSS is loaded without the serve_locally option.

Does anyone know how to add local CSS with serve_locally set to True?

Thanks in advance.

[delsim]

That sounds like a bug. When you set server_locally to True what does the Dash app attempt to load?

[till]

It loads the app. Whenever I add app.css.append_css I get: If you added this file with 'app.scripts.append_script' or 'app.css.append_css', use 'external_scripts' or 'external_stylesheets' instead. See https://dash.plot.com/external-resources. Adding `external_stylesheets=’/_static/css/app_stylesheet.css’ doesn’t help (CSS is still not loaded). How do I corectly add the external_stylesheets. Do I have to use the absolute path?

[delsim]

To be clear - what are the files (in particular the path part of the URL) that the app is trying to load in the different cases? Both the browser dev console and the server itself should have these logged, probably as error responses.

[till]

Strangely as I am using serve_locally and use external_stylesheet='/_static/css/app_stylesheet.css', I cannot find the console output loading the stylesheet - so it isn’t trying to load it:

Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[27/May/2020 08:22:51] "GET /funds/funds_dash.html HTTP/1.1" 200 7745
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/ HTTP/1.1" 200 2160
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_renderer/react@16.v1_3_0m1585778012.13.0.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_renderer/polyfill@7.v1_3_0m1585778012.8.7.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/dash_core_components.v1_9_0m1585774450.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_renderer/react-dom@16.v1_3_0m1585778012.13.0.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/dash_core_components-shared.v1_9_0m1585774450.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_renderer/prop-types@15.v1_3_0m1585778012.7.2.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_0m1589998279.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_renderer/dash_renderer.v1_3_0m1585778022.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_html_components/dash_html_components.v1_0_3m1585775459.min.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_table/bundle.v4_6_2m1585774193.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-dependencies HTTP/1.1" 200 3653
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-layout HTTP/1.1" 200 14097
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/async-dropdown.v1_9_0m1585774446.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/async-datepicker.v1_9_0m1585774446.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/async-slider.v1_9_0m1585774446.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/async-plotlyjs.v1_9_0m1585774446.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_core_components/async-graph.v1_9_0m1585774446.js HTTP/1.1" 302 0
[27/May/2020 08:22:51] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_table/async-table.v4_6_2m1585774180.js HTTP/1.1" 302 0

As I remove serve_locally and add app.css.append_css({'external_url': '/_static/css/app_stylesheet.css'}) The output is:

Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[27/May/2020 08:24:10] "GET /funds/funds_dash.html HTTP/1.1" 200 7745
[27/May/2020 08:24:11] "GET /django_plotly_dash/app/funds_dash/ HTTP/1.1" 200 1840
[27/May/2020 08:24:11] "GET /_static/css/app_stylesheet.css HTTP/1.1" 304 0
[27/May/2020 08:24:11] "GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_0m1589998279.min.js HTTP/1.1" 302 0
[27/May/2020 08:24:11] "GET /django_plotly_dash/app/funds_dash/_dash-dependencies HTTP/1.1" 200 3653
[27/May/2020 08:24:11] "GET /django_plotly_dash/app/funds_dash/_dash-layout HTTP/1.1" 200 14097

So it is loading it (third GET).