✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Dash bootstrap components not showing django

I wanted to have progress bar in my Django project but it is not showing on page. I have installed
django-dash and dash-bootstrap-components. Code:

import dash_html_components as html
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash

app = DjangoDash("Progress", add_bootstrap_links=True)
app.layout = html.Div(dbc.Progress(value=100))

and template

{% load plotly_dash %}
<div class="{% plotly_class name="Progress" %}">
    {% plotly_app_bootstrap name="Progress" %}
</div>
1 Like

Did you follow all of the installation and configuration steps?

1 Like

Yes, I can add that, components from dash core components such as Graph work and display normally.

So, to be clear, it is just bootstrap components that aren’t being rendered - if you put something in place of dbc.Progress in app.layout then it works correctly?

If so, what INSTALLED_APPS do you have? This section of the documentation might also be useful.

1 Like

Exactly. My installed apps:

INSTALLED_APPS = [
    'blog.apps.BlogConfig',
    'users.apps.UsersConfig',
    'crispy_forms',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_plotly_dash.apps.DjangoPlotlyDashConfig'
]

Try adding bootstrap4 also. This will provide the actual bootstrap assets. Also, dpd_static_support will be useful if you want to serve assets locally. You should be able to grab both with pip install bootstrap4 dpd-static-support

1 Like

I added bootstrap4 and dpd-static-support and still nothing.

Same issue here. Do you also get?

"GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_0m1589995111.min.js HTTP/1.1" 302 0

"GET /static/dash/component/dash_bootstrap_components/_components/dash_bootstrap_components.min.js HTTP/1.1" 404 1883

"GET /django_plotly_dash/app/funds_dash/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_0m1589995111.min.js HTTP/1.1" 302 0

"GET /static/dash/component/dash_bootstrap_components/_components/dash_bootstrap_components.min.js HTTP/1.1" 404 1883

I think it messes something up with the static path, since it is looking for dash_bootstrap_components in the static folder what makes no sense.

Would appreciate any help.

Best

1 Like

Did you run collectstatic after adding these packages? If so what was the response?

@till the static path is untouched, but ‘django-plotly-dash’ does redirect requests for static assets.

The purpose of this configuration is to put the static assets into a fixed (not per-dash-app-instance) location so that they can be served up like other similar Django assets - ie through use of whitenoise or reverse proxies such as nginx - and so benefit from caching etc.

1 Like

Not that it changes the static path, but as you can see from the console output, that it is looking for dash_bootstrap_components.min.js in my static folder. Obviously it isn’t there but in the libs, thats why it can’t be loaded (404 Error) and the dash bootstrap component cannot be displayed in the dash app.

1 Like

@till I get same output.
Response after collectstatic
147 static files copied to 'C:\workplace\python\project\django_project\static'.

Do you have anything under <path-to-django_project>/static/dash/component/dash_bootstrap_components ?

If not then check your PLOTLY_COMPONENTS and STATICFILES_FINDERS entries and rerun collectstatic.

1 Like

The documentation isn’t very clear on this particular issue. There is already a github issue for improving things and it also has a summary of the needed steps.

1 Like

I have folder _components where are two files dash_bootstrap_components.min.js and metadata.json

No I haven’t anything there. I could manually create the path and copy dash_bootstrap_components.min.js in there, what probably isn’t the best solution.

Components and staticfile finders are:

PLOTLY_COMPONENTS = [
    'dash_core_components',
    'dash_html_components',
    'dash_renderer',
    'dash_table',
    'dpd_static_support'
]
STATICFILES_FINDERS = [

    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',

    'django_plotly_dash.finders.DashAssetFinder',
    'django_plotly_dash.finders.DashComponentFinder',
    'django_plotly_dash.finders.DashAppDirectoryFinder',
]
1 Like

Ideally you have a correct configuration so that collectstatic does the right thing; copying some files by hand is unlikely to work. Make sure you’ve got all the pieces from the three documentation pages that are linked above.

Once the configuration is correct, the collectstatic command should cause all of the files to be copied.

1 Like

collectstatic copies all files, but still it doesn’t fix problem.

So, to be clear - you now have files copied into your staticfiles, under dash/component/dash_bootstrap_components, but you still get a 404 when your app tries to access them? Or do you have some other error?

1 Like

Yes, I have these files in this path. When i load site i have empty page. Output in concole:

"GET /courses/1 HTTP/1.1" 200 3622
"GET /django_plotly_dash/app/Progress/ HTTP/1.1" 200 1880
"GET /django_plotly_dash/app/Progress/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_0m1589932464.min.js HTTP/1.1" 302 0
"GET /static/dash/component/dash_bootstrap_components/_components/dash_bootstrap_components.min.js HTTP/1.1" 404 1881
"GET /django_plotly_dash/app/Progress/_dash-dependencies HTTP/1.1" 200 3
"GET /django_plotly_dash/app/Progress/_dash-layout HTTP/1.1" 200 230

Is that the only static file that your application is trying to load? If so it could be that your Django settings are not configured to serve static files correctly; sometimes whitenoise can help here.

According to those error messages and the reported path contents, this would be the next thing to check.

1 Like