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

Need a 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

Need a 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

Need a 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

Need a hint?

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