Serving locally but assets/css not applied to dash app

[hkhare42]

This is where my DjangoDash app sits. As you can see there is also an assets folder in the same directory which contains local css files, js files, fonts and images.

After running collectstatic, this is how all the assets are packaged and placed.

This is what my template looks like:

{% load static %}
{% block title %}FIFA 2018 WC Explorer{% endblock %}

{% block content %}
{% load plotly_dash %}
<div>
    {% plotly_app name="SimpleExample" ratio=0.8 %}
</div>
{% endblock content %}

But while the app should look like this:

Right now, it is loading like this with each graph / visual / div one below the other taking entire width. Not sure what is causing this.

Screen recording 2023-05-24 10.42.26 PM.webm

It seems inline styling within dash app is being applied sucessfully but the styling present in .css files, logic in .js files and font files are not being applied to the app within the iframe.

[delsim]

@hkhare42 have you got settings consistent with the steps described in the local assets section of the documentation?

You can use the browser's developer tools/console to see which assets are causing trouble.

[hkhare42]

@delsim Settings are consistent with the steps in the documentation.

Could you please direct me on what to look for in dev tools? This is what I'm seeing right now.

[delsim]

@hkhare42 within that devtools display, what is happening inside the iframe? In particular, if you look at the network tab, are any files not being loaded?

Also, can you see the logging output from your Django server? Are there any errors (particularly 400-series ones) in that?

[hkhare42]

@delsim there are no errors in the logging output from django - only codes 200 and 302.

going through the network tab, it seems that none of css and js files from the assets folder for my app are getting loaded.

Screen recording 2023-05-29 9.20.06 AM.webm

Looking at source code inside iframe, the inline styling seems to be working fine and it's getting applied on graphs but the external css and js based styling is not showing up. also, "class = dash-graph graph" is being added to plot divs probably leading to the block display, forcing plots one below the other?

Main issue seems to be that django server is not pre-loading the assets associated with the app.

[delsim]

@hkhare42 what does your DjangoDash constructor look like, and how are you including assets in your layout?

[hkhare42]

@delsim This is what the DjangoDash constructor look like and where it is placed:

Also, within the PLOTLY_DASH dict in the global settings file, I have "serve_locally": True,

Also, as shared earlier, I can see the assets in staticfiles folder on running collectstatic.

Template:

[delsim]

@hkhare42 are you using get_asset_url when referencing assets, or setting external_stylesheets and external_scripts in the DjangoDash constructor?

[hkhare42]

@delsim I'm currently not specifying any external_stylesheets or external_scripts . My understanding was that if I set the serve_locally flag to True, then the css and js files from assets folder are auto-applied to the app. Is that not the case? Do I still need to specify external_stylesheets or external_scripts in my DjangoDash constructor in order for the app to access them?

[delsim]

@hkhare42 yes, you need to list them

[hkhare42]

Thanks a ton @delsim It worked! This is what I had to add:

app_stylesheets = ['assets/app_css.css',
               'assets/app_allowed_fonts.css',
               'assets/app_loading.css']

app_scripts = ['assets/app_loading_script.js',]

app = DjangoDash('SimpleExample', serve_locally=True,
                 external_stylesheets=app_stylesheets,
                 external_scripts=app_scripts)

Do you think there should be a line in the documentation mentioning that even with serve_locally=True, we need to add in the external stylesheets and scripts? If so, is that a contribution I can make to the documentation?

One side question: I am seeing these warnings on running the django server even though my dash library version is up to date and I'm not using any deprecated concepts in my scripts. Where can I learn more about those Django models warnings and why are they coming up?

/home/<username>/mambaforge/envs/<envname>/lib/python3.11/importlib/__init__.py:126: UserWarning:

The dash_core_components package is deprecated. Please replace
`import dash_core_components as dcc` with `from dash import dcc`

/home/<username>/mambaforge/envs/<envname>/lib/python3.11/importlib/__init__.py:126: UserWarning:

The dash_html_components package is deprecated. Please replace
`import dash_html_components as html` with `from dash import html`

System check identified some issues:

WARNINGS:
django_plotly_dash.DashApp: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
        HINT: Configure the DEFAULT_AUTO_FIELD setting or the DjangoPlotlyDashConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.
django_plotly_dash.StatelessApp: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
        HINT: Configure the DEFAULT_AUTO_FIELD setting or the DjangoPlotlyDashConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.```