Static files in development in Django - Step-by-Step Execution

Concept Flow - Static files in development

Start Django development server

↓

Request for static file

↓

Django checks STATIC_URL and STATICFILES_DIRS

↓

Serve static file from local directory

↓

Browser receives and displays static file

↓

Static file visible in browser

When running Django's development server, static file requests are intercepted and served from local folders defined in settings, so you see CSS, images, and JS load correctly.

Execution Sample

Django

1. In settings.py:
   STATIC_URL = '/static/'
   STATICFILES_DIRS = [BASE_DIR / 'static']
2. Run: python manage.py runserver
3. Browser requests /static/style.css
4. Django serves style.css from static folder

This setup lets Django serve static files like CSS during development without extra setup.

Execution Table

Step	Action	Input/Request	Django Behavior	Output/Result
1	Start server	python manage.py runserver	Server runs with static settings	Ready to serve requests
2	Browser requests static file	GET /static/style.css	Checks STATIC_URL and STATICFILES_DIRS	Locates style.css in static folder
3	Serve static file	style.css found	Reads file content	Returns CSS content to browser
4	Browser renders page	Receives CSS content	Applies styles	Page styled with CSS
5	Request non-static URL	GET /home	Normal view processing	Renders HTML page
6	Request missing static file	GET /static/missing.js	File not found	Returns 404 error

💡 Static files served only if found in STATICFILES_DIRS; otherwise 404 returned.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
STATIC_URL	None	'/static/'	'/static/'	'/static/'	'/static/'
STATICFILES_DIRS	None	[BASE_DIR / 'static']	[BASE_DIR / 'static']	[BASE_DIR / 'static']	[BASE_DIR / 'static']
Requested File	None	'/static/style.css'	'style.css' found	'style.css' served	N/A
Response	None	Pending	CSS content	CSS applied	N/A

Key Moments - 3 Insights

Why does Django serve static files automatically only in development?

Because the development server has built-in static file handling using STATIC_URL and STATICFILES_DIRS, as shown in steps 2 and 3 of the execution_table. In production, a separate web server handles static files.

What happens if the requested static file is missing?

As shown in step 6 of the execution_table, Django returns a 404 error because it cannot find the file in STATICFILES_DIRS.

Why do we set STATIC_URL and STATICFILES_DIRS in settings.py?

These settings tell Django where to look for static files and what URL prefix to use, enabling it to serve files correctly during development (see variable_tracker and steps 2-3).

Visual Quiz - 3 Questions

Look at the execution_table, what does Django do at step 3 when the static file is found?

A Returns a 404 error

B Reads the file content and returns it to the browser

C Redirects to another URL

D Ignores the request

💡 Hint

Check the 'Django Behavior' and 'Output/Result' columns in step 3 of the execution_table.

According to variable_tracker, what is the value of STATIC_URL after starting the server?

A None

B '/media/'

C '/static/'

D Empty string

💡 Hint

Look at the STATIC_URL row in variable_tracker after Step 2.

If you remove the static folder from STATICFILES_DIRS, what will happen when requesting /static/style.css?

A Django will return a 404 error

B Django will serve the file from another folder automatically

C The browser will load a cached version

D The server will crash

💡 Hint

Refer to the exit_note and step 6 in the execution_table about missing static files.

Concept Snapshot

Static files in Django development:
- Set STATIC_URL (e.g., '/static/') in settings.py
- Define STATICFILES_DIRS with local static folders
- Run 'python manage.py runserver' to auto-serve static files
- Requests to STATIC_URL serve files from STATICFILES_DIRS
- Missing files return 404 errors
- This auto-serving works only in development mode

Full Transcript

When you run Django's development server, it automatically serves static files like CSS, JavaScript, and images from folders you specify in STATICFILES_DIRS. The STATIC_URL setting defines the URL prefix for these files. When the browser requests a static file URL, Django looks in the static folders and returns the file content if found. If the file is missing, Django returns a 404 error. This behavior helps you see your styles and scripts during development without extra setup. However, in production, static files are served by a web server, not Django. The execution table shows each step from starting the server, requesting a static file, Django serving it, and the browser rendering it. The variable tracker shows how settings and request variables change during this process. Key moments clarify why static files are served only in development and what happens if files are missing. The quiz tests understanding of these steps and settings.

Practice

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

easy

A. It defines the base URL to access static files like CSS and JavaScript.

B. It specifies the folder where Django stores uploaded media files.

C. It sets the database connection string for static content.

D. It enables automatic caching of static files in production.

Solution

1. Step 1: Understand the role of STATIC_URL

   STATIC_URL tells Django where to find static files when rendering pages, usually a URL prefix like '/static/'.

2. Step 2: Differentiate from other settings

   It is not related to media files, databases, or caching but specifically for static file URLs.

3. Final Answer:

   It defines the base URL to access static files like CSS and JavaScript. -> Option A

4. Quick Check:

   STATIC_URL = base URL for static files [OK]

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

Common Mistakes:

• Confusing STATIC_URL with media file settings
• Thinking STATIC_URL controls file storage location
• Assuming STATIC_URL manages caching or databases

2. Which of the following is the correct way to include a static CSS file named styles.css in a Django template?

easy

A. <link href="/static/styles.css" rel="stylesheet">

B. <link href="/media/styles.css" rel="stylesheet">

C. <link href="{{ STATIC_URL }}styles.css" rel="stylesheet">

D. <link href="{% static 'styles.css' %}" rel="stylesheet">

Solution

1. Step 1: Use the {% static %} template tag

   In Django templates, static files should be included using the {% static %} tag to generate the correct URL.

2. Step 2: Check syntax correctness

   The correct syntax is <link href="{% static 'filename' %}" rel="stylesheet"> to load static files properly.

3. Final Answer:

   <link href="{% static 'styles.css' %}" rel="stylesheet"> -> Option D

4. Quick Check:

   Use {% static 'file' %} to link static files [OK]

Hint: Use {% static 'file' %} tag inside templates for static files [OK]

Common Mistakes:

• Hardcoding /static/ path without {% static %} tag
• Using {{ STATIC_URL }} which is not available by default
• Confusing media URL with static URL

3. Given the following Django settings and template snippet, what URL will be rendered for the CSS file?

STATIC_URL = '/assets/'

<link href="{% static 'css/main.css' %}" rel="stylesheet">

medium

A. /static/css/main.css

B. /assets/css/main.css

C. /media/css/main.css

D. /css/main.css

Solution

1. Step 1: Check STATIC_URL value

   STATIC_URL is set to '/assets/', so all static file URLs start with this prefix.

2. Step 2: Apply {% static %} tag behavior

   The {% static 'css/main.css' %} tag prepends STATIC_URL to the path, resulting in '/assets/css/main.css'.

3. Final Answer:

   /assets/css/main.css -> Option B

4. Quick Check:

   STATIC_URL + file path = rendered URL [OK]

Hint: STATIC_URL prefix + file path = final static file URL [OK]

Common Mistakes:

• Assuming default '/static/' prefix instead of custom '/assets/'
• Mixing media URL with static URL
• Ignoring STATIC_URL setting in templates

4. You added a static image file and referenced it in your template using {% static 'images/logo.png' %}, but the image does not show during development. Which is the most likely cause?

medium

A. You did not set MEDIA_URL correctly.

B. You forgot to run collectstatic during development.

C. The django.contrib.staticfiles app is not in INSTALLED_APPS.

D. The STATIC_URL setting is missing a trailing slash.

Solution

1. Step 1: Check staticfiles app presence

   Django serves static files in development only if 'django.contrib.staticfiles' is in INSTALLED_APPS.

2. Step 2: Understand collectstatic role

   collectstatic is for production; during development, staticfiles app handles serving automatically.

3. Final Answer:

   The django.contrib.staticfiles app is not in INSTALLED_APPS. -> Option C

4. Quick Check:

   Missing staticfiles app blocks static serving [OK]

Hint: Ensure 'django.contrib.staticfiles' is in INSTALLED_APPS [OK]

Common Mistakes:

• Running collectstatic unnecessarily in development
• Confusing MEDIA_URL with STATIC_URL
• Ignoring INSTALLED_APPS configuration

5. You want to serve static files from a custom folder named assets inside your Django app during development. Which combination of settings and template usage will correctly serve a CSS file assets/css/style.css?

Choose the correct settings and template snippet.

hard

A. In settings.py: STATICFILES_DIRS = [BASE_DIR / 'assets']In template: <link href="{% static 'css/style.css' %}" rel="stylesheet">

B. In settings.py: MEDIA_URL = '/assets/'In template: <link href="{% static 'css/style.css' %}" rel="stylesheet">

C. In settings.py: STATIC_ROOT = 'assets'In template: <link href="/assets/css/style.css" rel="stylesheet">

D. In settings.py: STATICFILES_DIRS = ['assets']In template: <link href="{% static 'css/style.css' %}" rel="stylesheet">

Solution

1. Step 1: Configure STATICFILES_DIRS correctly

   STATICFILES_DIRS should be a list of absolute paths; using BASE_DIR / 'assets' ensures correct path to the assets folder.

2. Step 2: Use {% static %} tag with relative path

   The template should use {% static 'css/style.css' %} to generate the URL, matching the folder structure inside assets.

3. Final Answer:

   In settings.py: STATICFILES_DIRS = [BASE_DIR / 'assets'] and in template: <link href="{% static 'css/style.css' %}" rel="stylesheet"> -> Option A

4. Quick Check:

   STATICFILES_DIRS needs absolute path; use {% static %} for URLs [OK]

Hint: Use absolute path in STATICFILES_DIRS and {% static %} tag [OK]

Common Mistakes:

• Using relative path strings without BASE_DIR
• Confusing STATIC_ROOT with STATICFILES_DIRS
• Setting MEDIA_URL instead of STATICFILES_DIRS