Flask project structure conventions - Step-by-Step Execution

Concept Flow - Flask project structure conventions

Start Project

↓

Create app.py

↓

Add folders: templates, static

↓

Add config.py (optional)

↓

Add blueprints (optional)

↓

Run Flask app

This flow shows the typical steps to organize a Flask project from start to running the app.

Execution Sample

Flask

project/
  app.py
  config.py
  /templates
    index.html
  /static
    style.css

This is a simple Flask project folder structure with main app file, config, templates, and static files.

Execution Table

Step	Action	File/Folder Created	Purpose
1	Create main app file	app.py	Contains Flask app and routes
2	Create templates folder	templates/	Stores HTML templates
3	Create static folder	static/	Stores CSS, JS, images
4	Add config file (optional)	config.py	Holds configuration settings
5	Add blueprints (optional)	blueprints/	Organizes routes in modules
6	Run app	app.py	Starts Flask development server
7	Exit	-	Project structure ready and app running

💡 All necessary files and folders created; Flask app runs successfully

Variable Tracker

Component	Before	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
app.py	None	Created	Created	Created	Created	Created	Created
templates/	None	None	Created	Created	Created	Created	Created
static/	None	None	None	Created	Created	Created	Created
config.py	None	None	None	None	Created	Created	Created
blueprints/	None	None	None	None	None	Created	Created

Key Moments - 3 Insights

Why do we need separate 'templates' and 'static' folders?

Templates hold HTML files that Flask renders dynamically, while static holds fixed files like CSS and images. This separation helps Flask serve files correctly, as shown in steps 2 and 3 of the execution_table.

Is the config.py file mandatory for a Flask project?

No, config.py is optional. It helps organize settings but the app can run without it. This is shown in step 4 where config.py is added optionally.

What is the purpose of blueprints in Flask?

Blueprints help organize routes into modules for bigger projects. They are optional and added after basic structure, as in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is created at step 3?

A static folder

B templates folder

C config.py file

D blueprints folder

💡 Hint

Check the 'File/Folder Created' column at step 3 in execution_table

At which step is the Flask app started?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look for 'Run app' action in the execution_table

If you skip creating the 'templates' folder, what impact does it have?

A App will not start

B HTML templates cannot be rendered

C Static files won't load

D Config settings won't work

💡 Hint

Refer to key_moments about the role of 'templates' folder

Concept Snapshot

Flask project structure:
- app.py: main app and routes
- templates/: HTML files
- static/: CSS, JS, images
- config.py: optional settings
- blueprints/: optional route modules
Organize files for clarity and Flask to find resources.

Full Transcript

This visual execution shows how to set up a Flask project structure step-by-step. First, create the main app.py file where the Flask app and routes live. Then add a templates folder to hold HTML files that Flask will render dynamically. Next, add a static folder for CSS, JavaScript, and images that do not change. Optionally, add a config.py file to store configuration settings separately. For larger projects, blueprints can be added to organize routes into modules. Finally, run the app.py to start the Flask development server. This structure helps Flask find files and keeps the project organized. Key points include the separation of templates and static files and the optional nature of config and blueprints. The execution table tracks each step and what is created, while the variable tracker shows the state of each component as the project grows. The quizzes test understanding of folder roles and project setup steps.

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