title: Dash datatable wont render on page in django-plotly-dash
body: <p>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 &quot;Loading...&quot; like so:</p>
  <p><a href="https://i.stack.imgur.com/FAMS1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FAMS1.png" alt="screenshot of webpage" /></a></p>
  <p>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 &quot;Loading...&quot;</p>
  <p>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:</p>
  <pre><code>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/polyfill@7.v2_0_0m1636495559.12.1.min.js  
  HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/polyfill@7.v2_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/react@16.v2_0_0m1636495559.14.0.min.js    
  HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/react@16.v2_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/react-dom@16.v2_0_0m1636495559.14.0.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/react-dom@16.v2_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/prop-types@15.v2_0_0m1636495559.7.2.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/prop-types@15.v2_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/react@16.v2_0_0m1636495559.14.0.min.js    
  HTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/react@16.v2_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/react-dom@16.v2_0_0m1636495559.14.0.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/react-dom@16.v2_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/prop-types@15.v2_0_0m1636495559.7.2.min.jsHTTP GET /django_plotly_dash/app/DashBoard/_dash-component-suites/dash/deps/prop-types@15.v2_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]
  </code></pre>
  <p>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: <a href="https://github.com/GibbsConsulting/django-plotly-dash/issues/150" rel="nofollow noreferrer">link_1</a> and <a href="https://github.com/GibbsConsulting/django-plotly-dash/issues/275" rel="nofollow noreferrer">link_2</a></p>
  <p>For more reference, here is my settings.py:</p>
  <pre><code>&quot;&quot;&quot;
  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/
  &quot;&quot;&quot;
  
  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
      &quot;ws_route&quot;: &quot;dpd/ws/channel&quot;,
      # Route used for direct http insertion of pipe messages
      &quot;http_route&quot;: &quot;dpd/views&quot;,
      # Flag controlling existince of http poke endpoint
      &quot;http_poke_enabled&quot;: True,
      # Insert data for the demo when migrating
      &quot;insert_demo_migrations&quot;: False,
      # Timeout for caching of initial arguments in seconds
      &quot;cache_timeout_initial_arguments&quot;: 60,
      # Name of view wrapping function
      &quot;view_decorator&quot;: None,
      # Flag to control location of initial argument storage
      &quot;cache_arguments&quot;: True,
      # Flag controlling local serving of assets
      &quot;serve_locally&quot;: 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'
  </code></pre>
  <p>report_app.urls.py:</p>
  <pre><code>&quot;&quot;&quot;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'))
  &quot;&quot;&quot;
  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')
  ]
  </code></pre>
  <p>home.urls.py:</p>
  <pre><code>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')
  ]
  </code></pre>
  <p>This file contains the actual dash app.
  first 28 lines of dashboard.py:</p>
  <pre><code>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)
  </code></pre>
  <p>Please let me know if more information is needed for resolving this issue.</p>