Static file changes are not reflected on browser refresh - django

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',)

Answer 1

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.

Answer 2

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.