Static folder configuration in Flask - Mini Project: Build & Apply

Static folder configuration

📖 Scenario: You are building a simple Flask web app that serves static files like images and CSS from a folder named static.This is common in websites to keep files like pictures and styles separate from the main code.

🎯 Goal: Configure a Flask app to serve static files from the static folder and create a route that returns a simple HTML page referencing a static image.

📋 What You'll Learn

Create a Flask app with a static folder named static

Set a configuration variable to specify the static folder path

Create a route / that returns HTML referencing a static image

Ensure the static image is accessible via the URL /static/sample.png

💡 Why This Matters

🌍 Real World

Websites often need to serve images, styles, and scripts separately from the main code. Configuring a static folder in Flask helps organize these files and makes them accessible to users.

💼 Career

Knowing how to configure static files in Flask is essential for backend web developers to build maintainable and user-friendly web applications.

1

Create the Flask app and static folder

Create a Flask app instance named app and ensure there is a folder named static in your project directory.

Flask

# Create the Flask app instance named app
# Your code here

Hint

Use Flask(__name__) to create the app instance.

2

Set the static folder configuration

Add a configuration variable app.static_folder and set it to the string 'static' to specify the folder for static files.

Flask

from flask import Flask
app = Flask(__name__)

# Set the static folder path to 'static'
# Your code here

Hint

Assign the string 'static' to app.static_folder.

3

Create a route that returns HTML referencing a static image

Create a route / using @app.route('/') and define a function index() that returns a string of HTML. The HTML should include an <img> tag with src="/static/sample.png".

Flask

from flask import Flask
app = Flask(__name__)
app.static_folder = 'static'

# Create a route '/' that returns HTML with an image referencing '/static/sample.png'
# Your code here

Hint

Use @app.route('/') and return a string with an <img> tag pointing to /static/sample.png.

4

Run the Flask app with debug mode

Add the code to run the Flask app with debug=True inside the if __name__ == '__main__': block.

Flask

from flask import Flask
app = Flask(__name__)
app.static_folder = 'static'

@app.route('/')
def index():
    return 'Welcome'

# Add the code to run the app with debug=True
# Your code here

Hint

Use the standard Python block if __name__ == '__main__': and call app.run(debug=True).

Practice

1. What is the default folder name Flask uses to serve static files like images and CSS?

easy

A. assets

B. static

C. public

D. files

Solution

1. Step 1: Recall Flask default static folder

   Flask by default looks for a folder named static in your project to serve static files.

2. Step 2: Confirm other options are not defaults

   Folders like assets, public, or files are common in other frameworks but not Flask's default.

3. Final Answer:

   static -> Option B

4. Quick Check:

   Default static folder = static [OK]

Hint: Remember Flask uses 'static' folder by default for static files [OK]

Common Mistakes:

• Confusing 'assets' or 'public' as default static folder
• Thinking Flask serves static files from root directory
• Assuming no default static folder exists

2. Which of the following is the correct way to change the static folder name to 'assets' when creating a Flask app?

easy

A. app = Flask(__name__, static='assets')

B. app = Flask(static_folder='assets')

C. app = Flask(__name__, static_folder='assets')

D. app = Flask(__name__, static_url_path='assets')

Solution

1. Step 1: Identify correct Flask constructor parameter

   The parameter to change the static folder name is static_folder, used as Flask(__name__, static_folder='assets').

2. Step 2: Check other options for errors

   static='assets' is invalid, missing __name__ is wrong, and static_url_path changes URL path, not folder name.

3. Final Answer:

   app = Flask(__name__, static_folder='assets') -> Option C

4. Quick Check:

   Change folder with static_folder param [OK]

Hint: Use static_folder param in Flask constructor to rename folder [OK]

Common Mistakes:

• Using static instead of static_folder
• Omitting __name__ argument
• Confusing static_url_path with static_folder

3. Given this Flask app code:

app = Flask(__name__, static_folder='assets', static_url_path='/content')

# Assume assets folder contains image.png

# What URL path serves image.png?

medium

A. /content/image.png

B. /assets/image.png

C. /static/image.png

D. /image.png

Solution

1. Step 1: Understand static_folder and static_url_path roles

   static_folder='assets' sets the folder name, static_url_path='/content' sets the URL prefix to access static files.

2. Step 2: Determine URL to access image.png

   Since URL path is set to /content, the image is served at /content/image.png.

3. Final Answer:

   /content/image.png -> Option A

4. Quick Check:

   URL path = static_url_path value [OK]

Hint: URL uses static_url_path, not static_folder name [OK]

Common Mistakes:

• Assuming URL matches folder name
• Using default /static URL path despite override
• Confusing folder name with URL path

4. What is wrong with this Flask app code if static files are not served correctly?

app = Flask(__name__, static_folder='staticfiles')

# staticfiles folder exists with CSS files

# Trying to access /static/style.css returns 404

medium

A. The URL path /static does not match the static_folder name 'staticfiles'

B. The static_folder parameter should be set to 'static', not 'staticfiles'

C. The static_url_path should be set to '/staticfiles' to match folder name

D. Flask does not serve static files automatically

Solution

1. Step 1: Check static_folder and URL path mismatch

   Flask serves static files at URL path /static by default, but folder is renamed to staticfiles.

2. Step 2: Understand URL path must match static_url_path

   Since static_url_path is not set, Flask expects files at /static URL but folder is staticfiles, causing 404.

3. Final Answer:

   The URL path /static does not match the static_folder name 'staticfiles' -> Option A

4. Quick Check:

   URL path must match static_folder or static_url_path [OK]

Hint: Match static_url_path with static_folder or set both explicitly [OK]

Common Mistakes:

• Assuming folder rename auto-updates URL path
• Not setting static_url_path when changing folder
• Believing Flask never serves static files automatically

5. You want to serve static files from a folder named 'public_assets' but keep the URL path as '/static'. Which Flask app configuration achieves this?

hard

A. app = Flask(__name__, static_url_path='/static')

B. app = Flask(__name__, static_folder='static', static_url_path='/public_assets')

C. app = Flask(__name__, static_folder='public_assets')

D. app = Flask(__name__, static_folder='public_assets', static_url_path='/static')

Solution

1. Step 1: Set static_folder to 'public_assets'

   To serve files from 'public_assets' folder, set static_folder='public_assets'.

2. Step 2: Keep URL path as '/static'

   Set static_url_path='/static' to keep URL path unchanged.

3. Step 3: Verify other options

   app = Flask(__name__, static_folder='static', static_url_path='/public_assets') swaps folder and URL path, C uses default URL path '/static', D misses folder setting.

4. Final Answer:

   app = Flask(__name__, static_folder='public_assets', static_url_path='/static') -> Option D

5. Quick Check:

   Folder and URL path set explicitly [OK]

Hint: Set static_folder and static_url_path explicitly to control folder and URL [OK]

Common Mistakes:

• Swapping folder and URL path values
• Not setting static_url_path when folder changes
• Assuming default URL path changes with folder