Static file changes are not reflected on browser refresh

Question

I'm new to Django and trying to figure out why the changes in static css and js files are not picked up by the browser.

Only after I run python manage.py collectstatic followed by restarting the server do I see the desired results.

Using Django 1.11 and python 2.7

Here is a glimpse of my settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


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


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

ALLOWED_HOSTS = [u'customizeittoday.herokuapp.com', u'localhost']
# Application definition


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




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

#STATIC_URL = '/static/'



#static media settings
STATIC_URL = 'https://' + AWS_STORAGE_BUCKET_NAME + '.s3.amazonaws.com/'

MEDIA_URL = STATIC_URL + 'media/'

# STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"), )

# STATIC_ROOT = 'staticfiles'

ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

STATICFILES_FINDERS =    ('django.contrib.staticfiles.finders.FileSystemFinder','django.contrib.staticfiles.finders.AppDirectoriesFinder',)

please check here https://stackoverflow.com/questions/7013735/turn-off-caching-of-static-files-in-django-development-server — seuling, May 04 '18 at 15:52
are you in dev environment? then you haven't use `collectstatic` command. It's browser issue, not your settings. You have to remove cache when upload css/js cause your browser caching it. — seuling, May 05 '18 at 12:38
For me, when developing, I use `Cmd - shift - R` for refresh cache. (with google chrome) — seuling, May 05 '18 at 12:39

score 1 · Answer 1 · answered Nov 27 '19 at 15:31

This is old but I suspect this is because you are storing your static files on AWS S3. By default S3 uses a default cache-control header that specifies a 24 hour cache time.

You should probably migrate to using versioned static files.

You can use ManifestStaticFilesStorage which is designed to do this as part of the collectstatic cycle by appending hashes to filenames. By default it applies to all filetypes.

If you want to use it but want to specify which filetypes are versioned, then I wrote an extension that allows you to whitelist / blacklist files by path pattern.

score 0 · Answer 2 · answered Feb 25 '22 at 13:19

0

Sometimes browser itself caches the CSS or js files and load them from the cache. To avoid that "disable cache" in the network tab of the developer console for the respective browser.

answered Feb 25 '22 at 13:19

Dinith Herath

111
2
3

Static file changes are not reflected on browser refresh

2 Answers2