Django : dropdown and input data-datepicker ( volt bootstrap 5) not working on heroku

[InesSehili]

Hello
I have been working on my django project for a long time, and I used django user profile; everything works fine locally, but when i deployed my app to heroku:
dropdown menu no longer works
and also calendar inputs
I need your help please
thank you

[app-generator]

Hello @InesSehili,

Thank you for using our products.

HEROKU, being a deployment platform, should not affect the UI & UX of the product if the static assets are bundled correctly.

Please provide more information regarding the deployment of the static assets.

[InesSehili]

Hi thank you for your answers
here is my setting.py file
I confirm that everything worked well locally
`# -- encoding: utf-8 --
"""
Copyright (c) 2019 - present AppSeed.us
"""

import os
from decouple import config
from unipath import Path
import dj_database_url

Build paths inside the project like this: os.path.join(BASE_DIR, ...)

BASE_DIR = Path(file).parent
CORE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(file)))

SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_1122')

SECURITY WARNING: don't run with debug turned on in production!

DEBUG = config('DEBUG', default=True, cast=bool)
DEVEL = config('DEVEL', default=True, cast=bool)

load production server from .env

ALLOWED_HOSTS = ['crea78987.herokuapp.com', '127.0.0.1', config('SERVER', default='127.0.0.1')]

Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app', # Enable the inner app
'customers',
'patients',
'rdvs',
'consultations',
'fichesMedical',
'diagnostiques',
'medicaments',
'ordonances',
'quantites',
'radios',
'traitements',
'dents',
'payements',
'fournisseurs',
'achats',
'depenses',
'employes',

]

MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'core.urls'
LOGIN_REDIRECT_URL = "home" # Route defined in app/urls.py
LOGOUT_REDIRECT_URL = "home" # Route defined in app/urls.py
TEMPLATE_DIR = os.path.join(CORE_DIR, "core/templates") # ROOT dir for templates

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR],
'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 = 'core.wsgi.application'

Database

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

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

Password validation

https://docs.djangoproject.com/en/3.0/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.0/topics/i18n/

LANGUAGE_CODE = 'fr'

TIME_ZONE = 'Africa/Algiers'

USE_I18N = False

USE_L10N = False

USE_TZ = False

#############################################################

SRC: https://devcenter.heroku.com/articles/django-assets

Static files (CSS, JavaScript, Images)

https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_ROOT = os.path.join(CORE_DIR, 'staticfiles')
MEDIA_ROOT = os.path.join(CORE_DIR, 'media')
STATIC_URL = '/static/'
MEDIA_URL = '/media/'

Extra places for collectstatic to find static files.

STATICFILES_DIRS = (
os.path.join(CORE_DIR, 'core/static'),
)

`

[InesSehili]

My Pocfile
web: gunicorn core.wsgi

requirements.txt
asgiref==3.3.4 autopep8==1.5.7 dj-database-url==0.5.0 Django==2.2.10 gunicorn==20.1.0 Pillow==8.2.0 psycopg2==2.9.1 pycodestyle==2.7.0 PyPDF2==1.26.0 python-decouple==3.4 pytz==2021.1 reportlab==3.5.68 sqlparse==0.4.1 toml==0.10.2 Unipath==1.1 whitenoise==5.2.0

my runtime.txt file
python-3.9.4

[app-generator]

Hello @InesSehili,

Try to guard the settings file using python code formating.
Quite hard to visualize the settings in the current layout.

Once the app is deployed, the browser JS console shows any messages?

[app-generator]

P.S. To have a successful HEROKU deploy please follow all steps suggested by this tutorial:

• Deploy Django on HEROKU

[InesSehili]

Good evening
I followed all the steps for a correct deployment, but the same problem remains.
for the js console yes there are a number of errors here they are:
Failed to load resource: the server responded with a status of 404 (Not Found) patients:1 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://creadentiste.herokuapp.com/static/assets/vendor/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2 patients:1 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://creadentiste.herokuapp.com/static/assets/vendor/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 popper.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) on-screen.umd.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) smooth-scroll.polyfills.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) jarallax.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) countUp.umd.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) bootstrap.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) datepicker.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) simplebar.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) chartist.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) on-screen.umd.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) chartist-plugin-tooltip.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) jarallax.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) smooth-scroll.polyfills.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) countUp.umd.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) chartist.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) chartist-plugin-tooltip.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) datepicker.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) simplebar.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) volt.min.js:1 Uncaught ReferenceError: SmoothScroll is not defined at HTMLDocument.<anonymous> (volt.min.js:1) DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/iframe_handler.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/content.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

[InesSehili]

Is there any solution please ?

[InesSehili]

For people who had this type of error; here is my solution: I had to put my own css code for the dropdown menu and replacing datepicker by input type = "date". to make my site work on heroku.

[app-generator]

Hello, Try to deploy the assets on a separate server. CDN for instance. I see some errors bumped by "*popper.min.js*" and " *smooth-scroll.polyfills.min.js*" both related to fonts: ***@***.***/fontawesome-free/webfonts/fa-solid-900.woff2 -> 404 Error (not found). Please note that the product is not shipped with deployment assistance, even the premium version. The variety of the deployment platforms is very fragmented and we usually provide tutorials to help a little. Let us know your progress.

…

On Sun, 15 Aug 2021 at 16:06, Ines Sehili ***@***.***> wrote: Is there any solution please ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#56 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMFUJGDUJWHARCFSP32KWETT463V3ANCNFSM5CFGGW4Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[InesSehili]

Ok thank you