Static files in development in Django - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are static files in Django?

Static files are files like CSS, JavaScript, and images that don’t change dynamically and are served as they are to the browser.

beginner

How does Django serve static files during development?

Django automatically serves static files when DEBUG is True using the built-in static files app, so you don’t need extra setup for development.

intermediate

What setting tells Django where to find static files in your project?

The STATICFILES_DIRS setting lists folders where Django looks for static files during development.

beginner

What is the purpose of the {% static %} template tag in Django?

The {% static %} tag helps you write URLs for static files in templates, so Django can find and serve them correctly.

intermediate

Why should you not use Django’s static file serving in production?

Django’s static file serving is slow and not secure for production. Instead, use a web server like Nginx or a CDN to serve static files.

Which setting controls whether Django serves static files automatically during development?

A DEBUG

B STATIC_URL

C ALLOWED_HOSTS

D INSTALLED_APPS

When DEBUG is True, Django serves static files automatically during development.

What does the STATICFILES_DIRS setting do?

A Defines the URL prefix for static files

B Lists directories where Django looks for static files

C Specifies the folder where collected static files are stored

D Enables static file compression

STATICFILES_DIRS tells Django which folders to search for static files during development.

Which template tag is used to link to static files in Django templates?

A {% load static %} and {% static %}

B {% url %}

C {% include %}

D {% block %}

You must load the static template tag library with {% load static %} and then use {% static 'path/to/file' %}.

Where should you place your static files in a Django app for development?

A In the templates folder

B In the migrations folder

C In the media folder

D Inside the app’s static folder

Static files belong in a folder named static inside each app or in directories listed in STATICFILES_DIRS.

Why is it recommended to use a web server like Nginx for static files in production?

A Because Django can’t serve static files at all

B Because Django only supports CSS files

C Because web servers are faster and more secure for static files

D Because static files need to be compiled first

Web servers like Nginx handle static files efficiently and securely, unlike Django’s development server.

Explain how Django handles static files during development and what settings are important.

Think about how Django finds and serves CSS or images when you run the development server.

Describe why Django’s static file serving is not suitable for production and what should be done instead.

Imagine your website gets many visitors; how do you serve images and styles fast and safely?

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