Route decorator (@app.route) in Flask - Step-by-Step Execution

Concept Flow - Route decorator (@app.route)

Define function

↓

Apply @app.route decorator

↓

Register URL path with function

↓

Start Flask server

↓

Browser sends HTTP request to URL

↓

Flask matches URL to function

↓

Function runs and returns response

↓

Response sent back to browser

This flow shows how a function is linked to a URL path using @app.route, so when a browser visits that URL, Flask runs the function and sends back the response.

Execution Sample

Flask

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, world!'

This code sets up a Flask app and uses @app.route('/') to link the home() function to the root URL, returning a greeting.

Execution Table

Step	Action	Details	Result
1	Define function home()	Function created but not linked yet	home() exists
2	Apply @app.route('/') decorator	Link '/' URL path to home()	Route '/' registered to home()
3	Start Flask server	App ready to receive requests	Server running
4	Browser sends GET request to '/'	Request received by Flask	Request matched to home()
5	Run home() function	Function executes return statement	Returns 'Hello, world!'
6	Send response to browser	Response contains 'Hello, world!'	Browser displays greeting
7	End	Request handled successfully	Waiting for next request

💡 Request handled and response sent; server waits for next request

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
app	Flask instance created	Route '/' linked to home()	No change	No change
home	Function defined	Linked to route '/'	Executed, returns string	No change
request	No request	No request	GET '/' received	No request (after response)

Key Moments - 3 Insights

Why does the function run only when the URL is visited?

Because @app.route('/') registers the function to that URL path, Flask calls it only when a matching request arrives, as shown in execution_table step 4 and 5.

What happens if we define a function without @app.route?

The function exists but is not linked to any URL, so Flask never runs it on requests. This is shown in execution_table step 1 where the function is defined but not registered.

Can multiple URLs use the same function?

Yes, by applying multiple @app.route decorators or listing multiple paths in one decorator, Flask registers all those URLs to the same function.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 4?

A Flask starts the server

B Browser sends GET request to '/'

C Function home() is defined

D Response is sent to browser

💡 Hint

Check the 'Action' and 'Details' columns at step 4 in the execution_table

At which step does Flask link the URL '/' to the function home()?

A Step 2

B Step 5

C Step 1

D Step 6

💡 Hint

Look for when @app.route('/') is applied in the execution_table

If we remove @app.route decorator, what changes in the execution flow?

A Server fails to start

B Function runs automatically on server start

C Function never runs on HTTP requests

D Browser shows an error immediately

💡 Hint

Refer to key_moments about function without @app.route and execution_table step 1 vs step 2

Concept Snapshot

Use @app.route('path') above a function to link that URL path to the function.
When a browser visits that path, Flask runs the function and sends its return value as response.
Without @app.route, the function is not connected to any URL and won't run on requests.
This is how Flask maps URLs to code simply and clearly.

Full Transcript

The @app.route decorator in Flask connects a URL path to a Python function. When you write @app.route('/') above a function, you tell Flask to run that function whenever someone visits the root URL. The flow starts by defining the function, then applying the decorator which registers the URL. When the Flask server runs and a browser sends a request to '/', Flask matches the URL to the function and runs it. The function returns a response string, which Flask sends back to the browser to display. If the decorator is missing, the function exists but Flask never calls it on requests. This simple pattern lets you build web pages by linking URLs to Python code.

Practice

1. What does the @app.route decorator do in a Flask application?

easy

A. It connects a URL path to a specific function that runs when that URL is visited.

B. It creates a database connection for the app.

C. It styles the HTML pages served by Flask.

D. It starts the Flask server automatically.

Solution

1. Step 1: Understand the role of @app.route

   The decorator @app.route is used to link a URL path to a function in Flask.

2. Step 2: Identify what happens when the URL is visited

   When a user visits that URL, Flask runs the linked function to generate a response.

3. Final Answer:

   It connects a URL path to a specific function that runs when that URL is visited. -> Option A

4. Quick Check:

   @app.route links URL to function [OK]

Hint: Remember: @app.route maps URLs to functions [OK]

Common Mistakes:

• Thinking @app.route starts the server
• Confusing it with database setup
• Assuming it styles pages

2. Which of the following is the correct syntax to create a route for the URL path /home in Flask?

easy

A. @app.route('/home')\ndef home():\n return 'Welcome!'

B. app.route('/home')\ndef home():\n return 'Welcome!'

C. @app.route('/home')\nreturn 'Welcome!'

D. @app.route('/home')\ndef home:\n return 'Welcome!'

Solution

1. Step 1: Check the decorator syntax

   The correct decorator syntax uses @app.route('/home') placed immediately before a function definition.

2. Step 2: Verify the function definition and return statement

   The function must be defined with parentheses and a colon, and it returns a string response.

3. Final Answer:

   @app.route('/home')\ndef home():\n return 'Welcome!' -> Option A

4. Quick Check:

   Decorator + function with parentheses = correct syntax [OK]

Hint: Decorator needs @ and function needs () and : [OK]

Common Mistakes:

• Missing @ before app.route
• Omitting parentheses in function definition
• Placing return outside function

3. What will be the output when visiting the URL /user/42 given this Flask code?

@app.route('/user/<int:id>')
def show_user(id):
    return f"User ID is {id}"

medium

A. User ID is <int:id>

B. User ID is 42

C. 404 Not Found error

D. User ID is id

Solution

1. Step 1: Understand the route with variable part

   The route /user/<int:id> captures an integer from the URL and passes it as the argument id to the function.

2. Step 2: Check the function output

   The function returns a string with the captured id value inserted using an f-string.

3. Final Answer:

   User ID is 42 -> Option B

4. Quick Check:

   Variable URL part passes 42 to function [OK]

Hint: Variable parts in < > pass values to function [OK]

Common Mistakes:

• Thinking is printed literally
• Expecting a 404 error without reason
• Confusing variable name with string

4. Identify the error in this Flask route code:

@app.route('/hello')
def hello():
print('Hello World')
return 'Hello!'

medium

A. The return statement is outside the function.

B. The route decorator is missing parentheses.

C. The function name is invalid.

D. The function body is not indented properly.

Solution

1. Step 1: Check indentation inside the function

   Python requires the function body to be indented. Here, print and return are not indented under def hello():.

2. Step 2: Verify decorator and function syntax

   The decorator has correct parentheses and the function name is valid, so no errors there.

3. Final Answer:

   The function body is not indented properly. -> Option D

4. Quick Check:

   Python needs indented function bodies [OK]

Hint: Indent function code under def line [OK]

Common Mistakes:

• Forgetting to indent function body
• Removing parentheses from decorator
• Misnaming the function

5. You want to create a Flask route that accepts a username in the URL like /profile/john and returns Hello, john!. Which code correctly achieves this?

hard

A. @app.route('/profile/<username>')\ndef profile():\n return f'Hello, {username}!'

B. @app.route('/profile/')\ndef profile(username):\n return f'Hello, {username}!'

C. @app.route('/profile/<username>')\ndef profile(username):\n return f'Hello, {username}!'

D. @app.route('/profile/username')\ndef profile():\n return 'Hello, username!'

Solution

1. Step 1: Use variable URL part for username

   The route must capture username as a string variable using <username> in the URL.

2. Step 2: Define function with matching parameter and return greeting

   The function must accept username as a parameter and return the greeting using an f-string.

3. Final Answer:

   @app.route('/profile/<username>')\ndef profile(username):\n return f'Hello, {username}!' -> Option C

4. Quick Check:

   Variable URL + matching param + f-string = correct [OK]

Hint: Match variable name in route and function parameter [OK]

Common Mistakes:

• Using for a string username
• Not passing username parameter to function
• Hardcoding username in route path