Managing static files in Django 3.1

There are some changes in the Django 3.1 update and settings file has bee changes a bit as import os has been dropped. I have created a new project on Django 3.1 and referred to the official documentation for managing static files. I also tried this solution from StackOverflow but it didn't work out for me.

My project structure:

.
├── db.sqlite3
├── app
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── project
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings
│   │   ├── base.py
│   │   ├── __init__.py
│   │   ├── local.py
│   │   ├── production.py
│   │   └── __pycache__
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── static
│   ├── css
│   │   └── main.css
│   └── js
│       └── fullscreen_toggle.js
└── templates

local.py:

import os
from pathlib import Path

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


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

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '----secretKey----'

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

ALLOWED_HOSTS = ['127.0.0.1','0.0.0.0']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

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

ROOT_URLCONF = 'easynotes.urls'

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


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

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


# Password validation
# https://docs.djangoproject.com/en/3.1/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.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'Asia/Kolkata'

USE_I18N = True

USE_L10N = True

USE_TZ = True

APPEND_SLASH = False

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

STATIC_URL = '/static/'

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

STATIC_ROOT = os.path.join(BASE_DIR, "live-static", "static-root")

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

MEDIA_URL = "/media/"

MEDIA_ROOT = os.path.join(BASE_DIR, "live-static", "media-root")

Console output in inspect element:

GET http://127.0.0.1:8000/static/js/fullscreen_toggle.js net::ERR_ABORTED 404 (Not Found)

Upvotes: 3

Answers (5)

EhisAigbonoga

Reputation: 1

To quickly fix this import os at the top of your settings.py file

Another way however, might be to learn more about how pathlib works and update your BASE_DIR, DATABASES, STATICFILES_DIRS, and other files to use the newer, modern approach. The first way is better if you're new to Django and works just fine

Upvotes: 0

Fabian Mesaglio

Reputation: 51

This bit of code at the end of the settings.py file did the trick

STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATICFILES_DIRS = [
    BASE_DIR / "static",
    '/home/fabi/proyectos/butler/static/', #the absolute path to your static fil
]

Upvotes: 0

WhoNeedsSleep

Reputation: 1

I'm also having this issue however, I've found that the static files are able to load when they are inside of the projects folder, and the STATICFILES_DIRS are defined as follows:

STATICFILES_DIRS = (str(BASE_DIR.joinpath('static')),)

Perhaps there's an issue with how the BASE_DIR is defined it looks at the projects folder as the BASE_DIR though I'm unsure.

Upvotes: 0

michjnich

Reputation: 3395

Django 3.1 no longer uses os bydefault to join it's paths. It's switched to pathlib instead.

This means you can join your folders like this:

STATICFILES_DIRS = (
    BASE_DIR / "static",
)

MEDIA_ROOT = BASE_DIR / "live-static"

And there should be no need to import os in settings.py at all now.

See here for the docs on what's new in 3.1: https://docs.djangoproject.com/en/3.1/releases/3.1/

Upvotes: 2

SerioUs

Reputation: 298

first, write this command, 'python manage.py collectstatic' if this didn't solved your problem then add this lines in your project urls.py

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL,
                      document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,
                      document_root=settings.MEDIA_ROOT)

Upvotes: 0

Managing static files in Django 3.1

My project structure:

local.py:

Console output in inspect element:

Answers (5)

Related Questions