Django Static Files Not Working - Fix Guide

In this article, you will learn how to fix the problem of Django not loading static files. This is the easiest and safest solution for Django 3.1 and above.

Introduction

In Django 3.1 and above, the settings.py file uses pathlib.Path instead of os.path to handle directory structures. This means static file configurations using os.path.join won't work unless you import os at the top of your settings file.

Note: This article is for DEBUG = True. For DEBUG = False, follow: Static files not working when DEBUG = False

Step-by-Step Solution

Step 1: Define BASE_DIR

Ensure BASE_DIR is defined in settings.py. If not, add it:

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

Step 2: Check Debug Mode

Ensure debug mode is enabled in settings.py:

DEBUG = True

ALLOWED_HOSTS = []

Step 3: Configure Static Files

Define STATIC_URL and STATICFILES_DIRS in settings:

Note: For Django 3.1+, you need to import os and use it for static paths.

STATIC_URL = '/static/'  # the path in url

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Step 4: Use Static Template Tag

In templates, use the static template tag to build URLs for static files. Store files in my_app/static/image/example.jpg:

{% load static %}



    Welcome! to coderwebsite
    
    



    My Django project

• Create a static folder at your project root directory
• Use {% load static %} at the top of your templates
• Reference static files using {% static 'path/to/file' %}

Step 5: Run Django Server

Start the development server:

python manage.py runserver

Success! Static files will now load correctly in your Django project!

Recommended Directory Structure

my_django_project/
├── manage.py
├── my_app/
│   └── static/
│       ├── css/
│       │   └── styles.css
│       ├── js/
│       │   └── script.js
│       └── images/
│           └── logo.png
├── static/  (project-level static files)
│   └── ...
└── settings.py

Key Points

Import os

Always import os when using os.path.join in Django 3.1+

Load Static

Use {% load static %} in every template that uses static files

DEBUG True

Static files are auto-served in development when DEBUG = True

Collectstatic

In production, run python manage.py collectstatic

Common Mistakes to Avoid

Missing os import: Forgetting to import os in Django 3.1+
Incorrect path: Using wrong BASE_DIR or static directory path
Wrong template syntax: Using {static} instead of {% static %}
Hardcoded paths: Using hardcoded /static/ instead of template tag

Summary

Fixing Django static files requires proper configuration in settings.py and correct template syntax. The key is ensuring os is imported and STATICFILES_DIRS is properly set up.

Remember to use the {% load static %} template tag and reference static files using the {% static %} tag for proper URL generation.

django django static files

Read

Django static files not working when debug false || debug true

Ankaj Gupta

March 25, 2021

Django static files not working when debug false || debug true

Django static not working when debug is false

# Django static and media files not working when debug is false

In this article you will learn how to fix problem of not loading static files and media in Django even the DEBUG is FALSE. This is the easiest and safest solution.

# Problem:

Django static and media files not working when debug is false

➤ Code: settings.py


            
                DEBUG = False #True
                ALLOWED_HOSTS = ['*'] #Host name

# Problem Fix:

Let's see, How you can fix the problem of Django static and media files not working when DEBUG = False :

1.) First way: devserver in insecure mode

If you still need to server static locally (e.g. for testing without debug) you can run devserver in insecure mode:


            
                python manage.py runserver --insecure

--insecure: it means you can run server without security mode.

Note: This is exactly what you must type on terminal to run your project without "DEBUG = TRUE" and then you see all assets (static) file is loading correctly on local server.

2.) Second way: devserver in secure mode

Step 1: Define a STATIC_ROOT and MEDIA_ROOT path in settings.py.

➤ Code: settings.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'

if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
else:
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Step 2: Now define your URLConf that if static is in the beginning of url, access files from the static folder staticfiles.

➤ Code: urls.py

from django.conf.urls import url
from django.conf import settings
from django.views.static import serve

urlpatterns = [
    url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
    url(r'^static/(?P<path>.*)$', serve, {'document_root': settings.STATIC_ROOT}),
]

Note: This is your project's urls.py file.

Step 3: Now you can run your django project.


            
                python manage.py runserver

Note: Congratulations, now static and media files will be loaded in your Django project when DEBUG = False. Have fun!

django django static files

Read

Ankaj Gupta

March 23, 2021

Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

Django Settings

STATICFILES_DIRS vs STATIC_ROOT vs MEDIA_ROOT (and STATIC_URL)

Django distinguishes between static assets (CSS, JS, fonts) and user-uploaded media. Knowing where to place each file and how Django serves them keeps your project organized during development and deployment.

Static files

Version-controlled assets such as CSS, JavaScript, and images that ship with your code.

Media files

User-generated uploads (profile pictures, documents) stored separately from static assets.

`STATICFILES_DIRS`

During development, Django will search for static files in each installed app’s static/ directory. Add STATICFILES_DIRS to point to additional global static folders.

# settings.py
BASE_DIR = Path(__file__).resolve().parent.parent

STATICFILES_DIRS = [
    BASE_DIR / "static",          # project-level assets
    BASE_DIR / "frontend" / "dist" # compiled files from a build tool
]

Lookup order: Django searches STATICFILES_DIRS first, then each app’s static folder. It stops at the first match.

`STATIC_ROOT`

In production you typically serve static files from a single directory (via a CDN, Nginx, or WhiteNoise). STATIC_ROOT points to that directory. Run python manage.py collectstatic to gather assets there.

# settings.py
STATIC_ROOT = BASE_DIR / "staticfiles"

After running collectstatic, configure your web server to serve files from STATIC_ROOT.

`STATIC_URL`

The URL prefix that browsers use to request static assets. In templates, {% load static %} and {% static 'path/to.css' %} combine this prefix with the asset path.

STATIC_URL = "/static/"

`MEDIA_ROOT`

Uploaded files (e.g., ImageField) are stored in MEDIA_ROOT. For local development, serve them with MEDIA_URL via django.conf.urls.static.static(). In production, hand off to cloud storage (S3, GCS) or a web server.

MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

Quick Reference

Setting	Used For	Environment
STATICFILES_DIRS	Additional folders Django searches during development	Development only
STATIC_ROOT	Destination directory for `collectstatic`	Production (served by web server/CDN)
STATIC_URL	URL prefix for static assets	All environments
MEDIA_ROOT	Filesystem path for uploaded media	All environments (configure storage per environment)

Best Practices

Do

Keep static assets under version control.
Run collectstatic as part of your deployment pipeline.
Serve media files from a secure storage backend in production.

Avoid

Mixing user uploads with version-controlled static files.
Serving production static files through Django’s development server.
Hard-coding absolute paths—build paths from BASE_DIR.

django django static files

Read

Top Stories

Django not able to find static files[Solved]

Django Static Files Not Working - Fix Guide

Introduction

Step-by-Step Solution

Step 1: Define BASE_DIR

Step 2: Check Debug Mode

Step 3: Configure Static Files

Step 4: Use Static Template Tag

My Django project

Step 5: Run Django Server

Recommended Directory Structure

Key Points

Import os

Load Static

DEBUG True

Collectstatic

Common Mistakes to Avoid

Summary

Django static files not working when debug false || debug true

# Django static and media files not working when debug is false

# Problem:

# Problem Fix:

Let's see, How you can fix the problem of Django static and media files not working when DEBUG = False :

1.) First way: devserver in insecure mode

2.) Second way: devserver in secure mode

Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

Static files

Media files

STATICFILES_DIRS

STATIC_ROOT

STATIC_URL

MEDIA_ROOT

Quick Reference

Best Practices

Do

Avoid

Django static files not working when debug false || debug true

java program for student details using inheritance

Java program for student mark list using class and object - java code examples with output

How to remove the date and .html from every blogger post url

Django not able to find static files[Solved]

Get In Touch

Message Sent Successfully!

`STATICFILES_DIRS`

`STATIC_ROOT`

`STATIC_URL`

`MEDIA_ROOT`