Flask project structure conventions - Mini Project: Build & Apply

Flask Project Structure Conventions

📖 Scenario: You are creating a simple Flask web application for a small bookstore. You want to organize your project files properly so it is easy to maintain and expand later.

🎯 Goal: Build a basic Flask project structure with the main application file, a templates folder for HTML files, and a static folder for CSS and images.

📋 What You'll Learn

Create a main Flask application file named app.py

Create a folder named templates inside the project directory

Create a folder named static inside the project directory

Add a simple route in app.py that renders an HTML file from templates

💡 Why This Matters

🌍 Real World

Organizing Flask projects properly helps teams work together and makes it easier to add features or fix bugs later.

💼 Career

Understanding Flask project structure is essential for backend web development roles using Python and Flask.

1

Create the main Flask application file

Create a file named app.py and write the code to import Flask from flask and create an app instance called app.

Flask

# Your code here

Hint

Use from flask import Flask and then app = Flask(__name__) to create the app instance.

2

Create the templates and static folders

Create two folders named templates and static inside your project directory. These folders will hold HTML files and static assets like CSS and images respectively.

Flask

from flask import Flask
app = Flask(__name__)

# Create folders named 'templates' and 'static' in your project directory

Hint

Use your file explorer or terminal commands to create templates and static folders next to app.py.

3

Add a route to render an HTML template

In app.py, import render_template from flask. Then add a route for / that returns render_template('index.html').

Flask

from flask import Flask
app = Flask(__name__)

# Add import for render_template
# Add route for '/' that returns render_template('index.html')
# Your code here

Hint

Use @app.route('/') decorator and define a function named home that returns render_template('index.html').

4

Add a simple HTML file in templates folder

Create a file named index.html inside the templates folder. Add a basic HTML5 structure with a <h1> heading that says Welcome to the Bookstore.

Flask

Hint

Use a basic HTML5 template with <h1> inside the body that says Welcome to the Bookstore.

Practice

1. Which folder is conventionally used to store HTML files in a Flask project?

easy

A. templates

B. static

C. app

D. config

Solution

1. Step 1: Understand Flask folder roles

   Flask uses a folder named templates to hold HTML files for rendering views.

2. Step 2: Identify correct folder for HTML

   Since HTML files are templates, they belong in the templates folder, not static or others.

3. Final Answer:

   templates -> Option A

4. Quick Check:

   HTML files go in templates [OK]

Hint: HTML files live in templates folder by Flask convention [OK]

Common Mistakes:

• Confusing static folder for HTML files
• Putting HTML files directly in app folder
• Using config folder for templates

2. Which file is used to initialize a Flask app package inside the app folder?

easy

A. run.py

B. config.py

C. __init__.py

D. app.py

Solution

1. Step 1: Recognize Python package initialization

   Python packages use __init__.py to initialize modules and setup code.

2. Step 2: Apply to Flask app folder

   In Flask, the app folder is a package, so __init__.py initializes the Flask app instance.

3. Final Answer:

   __init__.py -> Option C

4. Quick Check:

   __init__.py initializes app package [OK]

Hint: Use __init__.py to initialize app package in Flask [OK]

Common Mistakes:

• Using run.py to initialize app package
• Confusing config.py with initialization
• Naming app.py as initializer

3. Given this Flask project structure:

myproject/
 ├── app/
 │    ├── __init__.py
 │    ├── routes.py
 │    ├── templates/
 │    │    └── home.html
 │    └── static/
 │         └── style.css
 ├── config.py
 └── run.py

Which file is typically used to start the Flask application?

medium

A. config.py

B. app/__init__.py

C. app/routes.py

D. run.py

Solution

1. Step 1: Identify the purpose of run.py

   In Flask projects, run.py is commonly used as the entry point to start the app server.

2. Step 2: Differentiate from other files

   config.py holds settings, __init__.py initializes app, and routes.py defines routes, but none start the server directly.

3. Final Answer:

   run.py -> Option D

4. Quick Check:

   run.py starts Flask app [OK]

Hint: run.py usually starts the Flask app server [OK]

Common Mistakes:

• Trying to run config.py to start app
• Running __init__.py directly
• Running routes.py as main file

4. You have this run.py file:

from app import app

if __name__ == '__main__':
    app.run(debug=true)

But running python run.py gives an ImportError: cannot import name 'app'. What is the likely cause?

medium

A. run.py is missing the Flask import statement

B. The 'app' variable is not defined in app/__init__.py

C. The templates folder is missing

D. Debug mode cannot be set in run.py

Solution

1. Step 1: Understand the import error

   The error means app is not found inside the app package's __init__.py.

2. Step 2: Check app/__init__.py for app variable

   Usually, app = Flask(__name__) is defined in __init__.py. If missing, import fails.

3. Final Answer:

   The 'app' variable is not defined in app/__init__.py -> Option B

4. Quick Check:

   app must be defined in __init__.py [OK]

Hint: Ensure app variable is defined in __init__.py before importing [OK]

Common Mistakes:

• Assuming missing Flask import causes this error
• Thinking templates folder affects imports
• Believing debug mode setting causes import error

5. You want to organize a Flask project with multiple blueprints for different features. Which structure best supports this while following Flask conventions?

hard

A. myproject/
├── app/
│ ├── __init__.py
│ ├── auth/
│ │ ├── __init__.py
│ │ └── routes.py
│ ├── blog/
│ │ ├── __init__.py
│ │ └── routes.py
│ ├── templates/
│ └── static/
├── config.py
└── run.py

B. myproject/
├── auth/
│ ├── __init__.py
│ └── routes.py
├── blog/
│ ├── __init__.py
│ └── routes.py
├── templates/
├── static/
├── config.py
└── run.py

C. myproject/
├── app.py
├── auth_routes.py
├── blog_routes.py
├── templates/
├── static/
├── config.py
└── run.py

D. myproject/
├── app/
│ ├── routes.py
│ ├── templates/
│ └── static/
├── auth.py
├── blog.py
├── config.py
└── run.py

Solution

1. Step 1: Understand blueprint organization

   Blueprints are best organized as sub-packages inside the main app package, each with its own __init__.py and routes.

2. Step 2: Evaluate options for Flask conventions

   myproject/
    ├── app/
    │    ├── __init__.py
    │    ├── auth/
    │    │    ├── __init__.py
    │    │    └── routes.py
    │    ├── blog/
    │    │    ├── __init__.py
    │    │    └── routes.py
    │    ├── templates/
    │    └── static/
    ├── config.py
    └── run.py

   places blueprints inside app/ folder as sub-packages, keeping templates and static centralized, which is recommended.

3. Final Answer:

   Option A structure best supports multiple blueprints with Flask conventions -> Option A

4. Quick Check:

   Blueprints as sub-packages inside app folder [OK]

Hint: Put blueprints as subfolders inside app with __init__.py [OK]

Common Mistakes:

• Placing blueprints outside app folder
• Using single file for all routes
• Not including __init__.py in blueprint folders