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.

Practice

1. What is the purpose of STATIC_URL in a Django project?

easy

A. It sets the database connection string for static files.

B. It defines the URL prefix to access static files in the browser.

C. It lists the directories where static files are stored on disk.

D. It configures the caching behavior for static files.

Solution

1. Step 1: Understand STATIC_URL role

   STATIC_URL is used to tell Django what URL prefix to use when serving static files like images or CSS.

2. Step 2: Differentiate from STATICFILES_DIRS

   STATICFILES_DIRS lists folders on disk, not URLs. The other options are unrelated to URL prefix.

3. Final Answer:

   It defines the URL prefix to access static files in the browser. -> Option B

4. Quick Check:

   STATIC_URL = URL prefix [OK]

Hint: STATIC_URL is the web address prefix for static files [OK]

Common Mistakes:

• Confusing STATIC_URL with STATICFILES_DIRS
• Thinking STATIC_URL sets file system paths
• Assuming STATIC_URL controls caching

2. Which of the following is the correct way to define STATICFILES_DIRS in Django settings?

easy

A. STATICFILES_DIRS = 'staticfiles'

B. STATICFILES_DIRS = '/static/'

C. STATICFILES_DIRS = [BASE_DIR / 'static']

D. STATICFILES_DIRS = {'static': BASE_DIR}

Solution

1. Step 1: Recognize STATICFILES_DIRS type

   It must be a list or tuple of folder paths, not a string or dict.

2. Step 2: Check syntax correctness

   STATICFILES_DIRS = [BASE_DIR / 'static'] uses a list with a path expression (BASE_DIR / 'static'), which is correct syntax in modern Django.

3. Final Answer:

   STATICFILES_DIRS = [BASE_DIR / 'static'] -> Option C

4. Quick Check:

   STATICFILES_DIRS is a list of folders [OK]

Hint: STATICFILES_DIRS must be a list of folder paths [OK]

Common Mistakes:

• Using a string instead of a list
• Using a dictionary instead of a list
• Forgetting to use BASE_DIR or full path

3. Given the settings:

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

What URL will Django use to serve a file named logo.png located inside the assets folder?

medium

A. /static/logo.png

B. /static/assets/logo.png

C. /assets/assets/logo.png

D. /assets/logo.png

Solution

1. Step 1: Understand STATIC_URL usage

   STATIC_URL sets the URL prefix for static files. Here it is '/assets/'.

2. Step 2: Map file location to URL

   The file 'logo.png' inside the 'assets' folder will be served at '/assets/logo.png' because STATICFILES_DIRS points to that folder.

3. Final Answer:

   /assets/logo.png -> Option D

4. Quick Check:

   URL = STATIC_URL + filename [OK]

Hint: URL = STATIC_URL + filename path [OK]

Common Mistakes:

• Adding folder name twice in URL
• Using default '/static/' URL instead of custom
• Confusing file system path with URL path

4. You set STATICFILES_DIRS = BASE_DIR / 'static' without brackets in Django settings. What error will occur?

medium

A. TypeError because STATICFILES_DIRS must be a list or tuple

B. No error, it works fine

C. SyntaxError due to missing quotes

D. FileNotFoundError at runtime

Solution

1. Step 1: Check STATICFILES_DIRS expected type

   It must be a list or tuple of paths, not a single path object.

2. Step 2: Analyze given assignment

   Assigning a single path without brackets makes it a path object, not a list, causing a TypeError.

3. Final Answer:

   TypeError because STATICFILES_DIRS must be a list or tuple -> Option A

4. Quick Check:

   STATICFILES_DIRS needs list/tuple [OK]

Hint: Always wrap STATICFILES_DIRS paths in a list or tuple [OK]

Common Mistakes:

• Forgetting brackets around STATICFILES_DIRS paths
• Assuming single path is accepted
• Confusing syntax error with runtime error

5. You want to serve static files from two folders: assets and common_static inside your project. How should you configure STATICFILES_DIRS and STATIC_URL to serve files correctly under the URL prefix /static/?

hard

A. STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'assets', BASE_DIR / 'common_static']

B. STATIC_URL = '/assets/'
STATICFILES_DIRS = [BASE_DIR / 'static', BASE_DIR / 'common_static']

C. STATIC_URL = '/static/'
STATICFILES_DIRS = BASE_DIR / 'assets' + BASE_DIR / 'common_static'

D. STATIC_URL = '/common_static/'
STATICFILES_DIRS = [BASE_DIR / 'assets']

Solution

1. Step 1: Set STATIC_URL to desired URL prefix

   To serve all static files under '/static/', set STATIC_URL = '/static/'.

2. Step 2: List all static folders in STATICFILES_DIRS

   Include both folders as a list: [BASE_DIR / 'assets', BASE_DIR / 'common_static'] so Django finds files in both.

3. Step 3: Avoid incorrect concatenation or mismatched URLs

   Concatenating paths or mismatching URL prefixes causes errors or missing files.

4. Final Answer:

   STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / 'assets', BASE_DIR / 'common_static'] -> Option A

5. Quick Check:

   Multiple folders in list, one URL prefix [OK]

Hint: Use list for multiple folders, one STATIC_URL prefix [OK]

Common Mistakes:

• Concatenating paths instead of listing them
• Using different URL prefixes for folders
• Forgetting to include all folders in list