STATIC_URL and STATICFILES_DIRS in Django - Step-by-Step Execution

Concept Flow - STATIC_URL and STATICFILES_DIRS

Start Django Project

↓

Set STATIC_URL

↓

Define STATICFILES_DIRS

↓

Run collectstatic (optional)

↓

Serve static files

↓

Browser requests static file

↓

Django serves file from STATICFILES_DIRS or collected static

This flow shows how Django uses STATIC_URL as the web path prefix and STATICFILES_DIRS as the folders to find static files during development or collection.

Execution Sample

Django

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'assets']

Defines the URL prefix for static files and the folder where Django looks for static files.

Execution Table

Step	Action	Value/Setting	Effect
1	Set STATIC_URL	'/static/'	Browser uses this prefix to request static files
2	Set STATICFILES_DIRS	['/project/assets']	Django looks here for static files during development
3	Browser requests '/static/logo.png'	Request URL	Django searches STATICFILES_DIRS for 'logo.png'
4	Django finds 'logo.png' in '/project/assets'	File found	File served to browser
5	Run collectstatic (optional)	Copies files to STATIC_ROOT	Prepares files for production serving
6	Browser requests static file in production	Uses STATIC_URL	Web server serves from STATIC_ROOT
7	No matching file found	File missing	404 error returned

💡 Static file serving ends when file is found or 404 error is returned

Variable Tracker

Variable	Start	After Setting
STATIC_URL	undefined	'/static/'
STATICFILES_DIRS	undefined	['/project/assets']

Key Moments - 3 Insights

Why do we need STATIC_URL if we already have STATICFILES_DIRS?

STATIC_URL is the web address prefix browsers use to request static files, while STATICFILES_DIRS tells Django where to find those files on the computer. See execution_table step 1 and 2.

What happens if a requested static file is not in STATICFILES_DIRS?

Django cannot find the file and returns a 404 error. This is shown in execution_table step 7.

Why run collectstatic if STATICFILES_DIRS already has the files?

collectstatic copies all static files into STATIC_ROOT for efficient serving in production, different from STATICFILES_DIRS used in development. See execution_table step 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of STATIC_URL after step 1?

A '/assets/'

B '/media/'

C '/static/'

D '/files/'

💡 Hint

Check the 'Value/Setting' column in execution_table row with Step 1

At which step does Django serve the static file to the browser?

A Step 4

B Step 3

C Step 5

D Step 7

💡 Hint

Look for the step where the file is found and served in execution_table

If STATICFILES_DIRS is empty, what will happen when the browser requests a static file?

A Django will find the file in STATICFILES_DIRS

B Django will return a 404 error

C Django will serve the file from STATIC_URL directly

D Django will automatically create the file

💡 Hint

Refer to execution_table step 7 about missing files

Concept Snapshot

STATIC_URL sets the web path prefix for static files.
STATICFILES_DIRS lists folders where Django looks for static files during development.
Browser requests use STATIC_URL prefix.
Django serves files from STATICFILES_DIRS or STATIC_ROOT after collectstatic.
Missing files cause 404 errors.
collectstatic prepares files for production serving.

Full Transcript

In Django, STATIC_URL is the web address prefix used by browsers to request static files like images or CSS. STATICFILES_DIRS is a list of folders on your computer where Django looks for these static files during development. When you set STATIC_URL to '/static/', the browser will request files starting with this path. STATICFILES_DIRS might include a folder like 'assets' where your static files live. When the browser asks for '/static/logo.png', Django searches the folders in STATICFILES_DIRS for 'logo.png'. If found, Django serves the file. If not, a 404 error is returned. For production, you run 'collectstatic' to gather all static files into STATIC_ROOT, and the web server serves them from there using STATIC_URL as the prefix. This setup helps keep static files organized and accessible both during development and in production.