Dash bootstrap components not showing django

Dash Python
1

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
2

Did you follow all of the installation and configuration steps?

1 Like
3

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

4

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
5

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'
]
6

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
7

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

8

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
9

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
10

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
11

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

12

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
13

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
14

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

15

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
16

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
17

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

18

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
19

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
20

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