Static files in development in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Django serve static files in development?

In a default Django development setup, what happens when you request a static file like CSS or JavaScript from the browser?

A Django cannot serve static files in development; you must use a separate web server.

B Django requires you to manually copy static files to the templates folder to serve them.

C Django serves static files only if DEBUG is set to False.

D Django automatically serves static files using the staticfiles app and the development server without extra configuration.

💡 Hint

Think about what DEBUG mode does in Django and how static files are handled by the development server.

When DEBUG is True (default in development), Django's runserver automatically serves static files using the staticfiles app. This means you don't need extra setup to see CSS or JS files.

📝 Syntax

intermediate

Correct STATICFILES_DIRS setting syntax

Which of the following is the correct way to define STATICFILES_DIRS in Django settings to include a folder named 'assets' inside your project directory?

A STATICFILES_DIRS = ('assets',)

B STATICFILES_DIRS = [BASE_DIR / 'assets']

C STATICFILES_DIRS = BASE_DIR + '/assets/'

D STATICFILES_DIRS = {'assets'}

💡 Hint

Remember STATICFILES_DIRS expects a list or tuple of paths, and BASE_DIR is a Path object.

STATICFILES_DIRS should be a list or tuple of directories. Using BASE_DIR / 'assets' uses pathlib to join paths correctly.

🔧 Debug

advanced

Why are static files not loading in development?

You have DEBUG=True and static files in your app's static folder, but CSS is not loading in the browser. What is the most likely cause?

A You forgot to add 'django.contrib.staticfiles' to INSTALLED_APPS.

B You did not run 'python manage.py collectstatic' in development.

C You set STATIC_URL to an incorrect value like '/media/'.

D You need to set DEBUG=False to serve static files.

💡 Hint

Check if the app responsible for static files is enabled.

The staticfiles app must be in INSTALLED_APPS for Django to serve static files in development. collectstatic is only needed for production.

🧠 Conceptual

advanced

Role of collectstatic in development vs production

What is the purpose of the 'collectstatic' command and when should you use it?

A It compiles CSS and JavaScript files automatically during development.

B It serves static files directly from the app folders during development.

C It gathers all static files into STATIC_ROOT for production; not needed in development with DEBUG=True.

D It deletes all static files from the project to free space.

💡 Hint

Think about how static files are served differently in development and production.

collectstatic copies all static files into a single folder (STATIC_ROOT) for production servers to serve efficiently. In development, Django serves files directly from app folders.

❓ state_output

expert

What is the value of STATIC_URL after this settings code?

Given the following Django settings snippet, what is the value of STATIC_URL? BASE_DIR = Path(__file__).resolve().parent.parent STATIC_URL = '/static/' if not DEBUG: STATIC_URL = '/assets/'

Django

from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
DEBUG = True
STATIC_URL = '/static/'
if not DEBUG:
    STATIC_URL = '/assets/'

A /static/

B /assets/

C '' (empty string)

D None

💡 Hint

Check the value of DEBUG and how it affects the if condition.

Since DEBUG is True, the condition 'if not DEBUG' is False, so STATIC_URL remains '/static/'.

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