django web-applications plotly-dash plotly-python django-staticfiles

Dash datatable wont render on page in django-plotly-dash

I am creating a web application using django_plotly_dash, a module combining Django, Plotly, and Dash into one package. I am having an issue where I can trying to load some dash datatables that are part of the dash app, but they never end up rendering on the page. The page is stuck on "Loading..." like so:

As you can see, the middle of the page (starting from Home Page) is where the dash datatables are supposed to load, but the screen is stuck on "Loading..."

from the log output after starting the app, it seems it has something to do with Django not locating the right static files. Here is the output below:

Watching for file changes with StatReloader
Performing system checks...

C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.9_3.9.2544.0_x64__qbz5n2kfra8p0\lib\importlib\__init__.py:127: UserWarning:
The dash_core_components package is deprecated. Please replace
`import dash_core_components as dcc` with `from dash import 
dcc`
  return _bootstrap._gcd_import(name[level:], package, level)
C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.9_3.9.2544.0_x64__qbz5n2kfra8p0\lib\importlib\__init__.py:127: UserWarning:
The dash_html_components package is deprecated. Please replace
`import dash_html_components as html` with `from dash import html`
  return _bootstrap._gcd_import(name[level:], package, level)
C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.9_3.9.2544.0_x64__qbz5n2kfra8p0\lib\importlib\__init__.py:127: UserWarning:
The dash_table package is deprecated. Please replace        
`import dash_table` with `from dash import dash_table`      

Also, if you're using any of the table format helpers (e.g. 
Group), replace
`from dash_table.Format import Group` with
`from dash.dash_table.Format import Group`
  return _bootstrap._gcd_import(name[level:], package, level)
System check identified no issues (0 silenced).
November 29, 2021 - 21:42:12
Django version 3.2.9, using settings 'report_app.settings'
Starting ASGI/Channels version 3.0.4 development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
HTTP GET / 200 [0.23, 127.0.0.1:62183]
HTTP GET /static/vendor/fontawesome-free/css/all.min.css 200 [0.02, 127.0.0.1:62183]
HTTP GET /static/css/sb-admin-2.min.css 200 [0.04, 127.0.0.1:62181]
HTTP GET /static/vendor/jquery/jquery.min.js 200 [0.07, 127.0.0.1:62181]
HTTP GET /static/vendor/bootstrap/js/bootstrap.bundle.min.js 200 [0.05, 127.0.0.1:62181]
HTTP GET /static/vendor/jquery-easing/jquery.easing.min.js 200 [0.02, 127.0.0.1:62181]
HTTP GET /static/js/sb-admin-2.min.js 200 [0.01, 127.0.0.1:62181]
HTTP GET /static/vendor/chart.js/Chart.min.js 200 [0.08, 127.0.0.1:62181]
HTTP GET /static/js/demo/chart-area-demo.js 200 [0.02, 127.0.0.1:62181]
HTTP GET /static/js/demo/chart-pie-demo.js 200 [0.01, 127.0.0.1:62181]
Not Found: /img/undraw_rocket.svg
HTTP GET /img/undraw_rocket.svg 404 [0.12, 127.0.0.1:62181]
Not Found: /img/undraw_profile_1.svg
HTTP GET /img/undraw_profile_1.svg 404 [0.01, 127.0.0.1:62181]
Not Found: /img/undraw_profile_2.svg
HTTP GET /img/undraw_profile_2.svg 404 [0.02, 127.0.0.1:62183]
Not Found: /img/undraw_profile_3.svg
HTTP GET /img/undraw_profile_3.svg 404 [0.02, 127.0.0.1:62183]
Not Found: /img/undraw_profile.svg
HTTP GET /img/undraw_profile.svg 404 [0.03, 127.0.0.1:62181]HTTP GET /django_plotly_dash/app/DashBoard/ 200 [0.27, 127.0.0.1:62185]
HTTP GET /static/vendor/fontawesome-free/webfonts/fa-solid-900.woff2 200 [0.05, 127.0.0.1:62181]
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dpd_static_support/bootstrap.v0_1m1636496362.min.css 302 [0.01, 127.0.0.1:62185]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.12.1.min.js  
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.12.1.min.js 404 [0.04, 127.0.0.1:62183]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.js    
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.js 404 [0.06, 127.0.0.1:62188]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.js 404 [0.08, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.7.2.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.7.2.min.js 404 [0.11, 127.0.0.1:62190]
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dpd_components/bundle.v0_1_0m1531261909.js 302 [0.11, 
127.0.0.1:62181]
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_0_0m1636495563.min.js 302 [0.12, 127.0.0.1:62185]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1636495559.min.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1636495559.min.js 404 [0.12, 127.0.0.1:62183]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components.v2_0_0m1636495559.js  
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components.v2_0_0m1636495559.js 404 [0.12, 127.0.0.1:62188]
HTTP GET /static/dash/component/dpd_static_support/bootstrap.min.css 404 [0.11, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_0_0m1636495559.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_0_0m1636495559.js 404 [0.10, 127.0.0.1:62190]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/html/dash_html_components.v2_0_0m1636495559.min.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/html/dash_html_components.v2_0_0m1636495559.min.js 404 [0.12, 127.0.0.1:62181]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash_table/bundle.v5_0_0m1636495559.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash_table/bundle.v5_0_0m1636495559.js 404 [0.13, 127.0.0.1:62185]
HTTP GET /static/dash/component/dpd_components/bundle.js 404 [0.12, 127.0.0.1:62183]
HTTP GET /static/dash/component/dash_bootstrap_components/_components/dash_bootstrap_components.min.js 404 [0.11, 127.0.0.1:62188]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.js    
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.js 404 [0.09, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.14.0.min.js 404 [0.02, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.7.2.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/[email protected]_0_0m1636495559.7.2.min.js 404 [0.01, 127.0.0.1:62189]
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dpd_components/bundle.v0_1_0m1531261909.js 302 [0.00, 
127.0.0.1:62189]
HTTP GET /static/dash/component/dpd_components/bundle.js 404 [0.01, 127.0.0.1:62189]
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_0_0m1636495563.min.js 302 [0.00, 127.0.0.1:62189]
HTTP GET /static/dash/component/dash_bootstrap_components/_components/dash_bootstrap_components.min.js 404 [0.01, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1636495559.min.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1636495559.min.js 404 [0.01, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components.v2_0_0m1636495559.js  
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components.v2_0_0m1636495559.js 404 [0.02, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_0_0m1636495559.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dcc/dash_core_components-shared.v2_0_0m1636495559.js 404 [0.01, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/html/dash_html_components.v2_0_0m1636495559.min.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/html/dash_html_components.v2_0_0m1636495559.min.js 404 [0.01, 127.0.0.1:62189]
Not Found: /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash_table/bundle.v5_0_0m1636495559.js
HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/dash_table/bundle.v5_0_0m1636495559.js 404 [0.01, 127.0.0.1:62189]
Not Found: /favicon.ico
HTTP GET /favicon.ico 404 [0.02, 127.0.0.1:62189]

Thus my question is: what can I do to get Django to find the right files. I followed possible solutions at these two GitHub solutions but they didn't resolve my issue unfortunately: link_1 and link_2

For more reference, here is my settings.py:

"""
Django settings for report_app project.

Generated by 'django-admin startproject' using Django 3.2.4.

For more information on this file, see
https://docs.djangoproject.com/en/3.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.2/ref/settings/
"""

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-8do=a0m+%$#t^57z4$e6$^13t=5ys1dk29j@21$f_+9=%83d2v'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_plotly_dash.apps.DjangoPlotlyDashConfig',
    'dpd_static_support',
    'home.apps.HomeConfig',
    'home.dash_apps.finished_apps.dashboard',
    'channels',
    'channels_redis',
    'bootstrap4',
    'crispy_forms'
]

MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',

      'whitenoise.middleware.WhiteNoiseMiddleware',

      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      'django.middleware.csrf.CsrfViewMiddleware',
      'django.contrib.auth.middleware.AuthenticationMiddleware',
      'django.contrib.messages.middleware.MessageMiddleware',

      'django_plotly_dash.middleware.BaseMiddleware',
      'django_plotly_dash.middleware.ExternalRedirectionMiddleware',

      'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'report_app.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'report_app.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

CRISPY_TEMPLATE_PACK = 'bootstrap4'

ASGI_APPLICATION = 'report_app.routing.application'
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis,core,RedisChannelLayer',
        'CONFIG': {
            'hosts': [('127.0.0.1', 6379)]
        }
    }
}

# enable the use of frames within html documents
X_FRAME_OPTIONS = 'SAMEORIGIN'

PLOTLY_DASH = {
    # Route used for the message pipe websocket connection
    "ws_route": "dpd/ws/channel",
    # Route used for direct http insertion of pipe messages
    "http_route": "dpd/views",
    # Flag controlling existince of http poke endpoint
    "http_poke_enabled": True,
    # Insert data for the demo when migrating
    "insert_demo_migrations": False,
    # Timeout for caching of initial arguments in seconds
    "cache_timeout_initial_arguments": 60,
    # Name of view wrapping function
    "view_decorator": None,
    # Flag to control location of initial argument storage
    "cache_arguments": True,
    # Flag controlling local serving of assets
    "serve_locally": True,  # tried this as True and False
}

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

PLOTLY_COMPONENTS = [
    'dash_core_components',
    'dash_html_components',
    'dash_renderer',
    'dpd_components',
    'dpd_static_support',
    'dash_bootstrap_components',
    'dash_table'
]


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATICFILES_LOCATION = 'static'
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'collected_static')

STATICFILES_DIRS = [
    #os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, 'report_app/static')
]

# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

report_app.urls.py:

"""report_app URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from os import name
from django.contrib import admin
from django.urls import path, include

from django.views.generic import TemplateView

from django.conf import settings

from home.dash_apps.finished_apps import dashboard

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
    path('django_plotly_dash/', include('django_plotly_dash.urls')),
    #path('', TemplateView.as_view(template_name='welcome.html'), name='DashBoard')
]

home.urls.py:

from django.urls import path
from . import views
from home.dash_apps.finished_apps import dashboard

urlpatterns = [
    path('', views.home, name='home'),
   # path('', dashboard, name='home')
]

This file contains the actual dash app. first 28 lines of dashboard.py:

from dash import dcc
from dash import html
from dash import dash_table
from dash.dash_table import FormatTemplate
from dash.dash_table.Format import Sign
from dash.dependencies import Input, Output
from django_plotly_dash import DjangoDash
import dash_bootstrap_components as dbc
import pandas as pd
from .utils import *

data = pd.read_csv(r'C:\Users\mvela\Documents\Internships\Contracts\Greene\July Contract\web_app\report_app\home\dash_apps\Methodology  - Employee Level Data Sample.csv')

#data = pd.read_pickle('Metho - Proc')

# proper formatting

data.columns = data.iloc[0, :] # rename columns

data = data.iloc[1:, :] # drop first row

#external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

# instantiate app
app = DjangoDash('DashBoard',
                 add_bootstrap_links=True)
percentage = FormatTemplate.percentage(1).sign(Sign.positive)
percentage_ = FormatTemplate.percentage(1).sign(Sign.negative)

Please let me know if more information is needed for resolving this issue.

Solution

Solved this issue by changing the "serve locally" key in settings.py's PLOTLY_DASH variable to False. Leaving this question and answer up for anyone who might have the same issue in the future. Please cross check your settings.py with that from the configuration page of django-plotly-dash.