Serving JavaScript files in Flask - Step-by-Step Execution

Concept Flow - Serving JavaScript files

Client requests HTML page

↓

Flask serves HTML with <script> tag

↓

Browser sees <script src="file.js">

↓

Browser sends request for JS file

↓

Flask serves JS file from static folder

↓

Browser loads and runs JS code

This flow shows how Flask serves JavaScript files by first sending HTML with a script tag, then responding to the browser's request for the JS file from the static folder.

Execution Sample

Flask

from flask import Flask, render_template
app = Flask(__name__)

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

This Flask app serves an HTML page that includes a JavaScript file linked via a script tag.

Execution Table

Step	Action	Request URL	Flask Response	Browser Behavior
1	Client requests '/'	/	Flask returns 'index.html' with <script src='/static/app.js'>	Browser parses HTML, finds script tag
2	Browser requests '/static/app.js'	/static/app.js	Flask serves 'app.js' file from static folder	Browser downloads and executes JS code
3	JS code runs	N/A	N/A	JS modifies page or runs logic as coded
4	No more requests	N/A	N/A	Page fully loaded with JS active

💡 All resources served; browser finishes loading page and scripts.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
HTML content	None	index.html with <script src='/static/app.js'>	Same	Same	Same
JS file content	None	None	app.js content served	Loaded and executed	Executed
Browser state	Empty	HTML loaded	JS file loaded	JS running	Page interactive

Key Moments - 2 Insights

Why does Flask serve JavaScript files from the 'static' folder?

Flask automatically serves files placed in the 'static' folder at the '/static/' URL path, so JS files must be there to be accessible by the browser as shown in the execution_table step 2.

What happens if the script tag src URL is incorrect?

The browser will request a URL Flask does not serve, resulting in a 404 error and the JS code will not run, breaking the page behavior as seen in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, what does Flask return at step 1?

A The HTML page with a script tag

B The JavaScript file content

C A 404 error

D Nothing

💡 Hint

Check the 'Flask Response' column at step 1 in the execution_table.

At which step does the browser request the JavaScript file?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Request URL' column in the execution_table to find when '/static/app.js' is requested.

If the JavaScript file was not in the static folder, what would change in the execution table?

A Browser would not request the JS file

B Flask would return a 404 error at step 2

C Flask would serve the JS file anyway

D The HTML page would not load

💡 Hint

Refer to the 'Flask Response' at step 2 and what happens if the file is missing.

Concept Snapshot

Serving JavaScript files in Flask:
- Place JS files in the 'static' folder
- Use <script src='/static/filename.js'> in HTML
- Flask serves static files automatically
- Browser requests JS after loading HTML
- JS runs after being loaded

Full Transcript

When a user visits the Flask app's root URL, Flask sends back an HTML page that includes a script tag pointing to a JavaScript file in the static folder. The browser reads this HTML, then requests the JavaScript file from the '/static/' path. Flask serves this JS file from the static folder. The browser downloads and runs the JavaScript code, making the page interactive. If the JS file is missing or the path is wrong, the browser gets a 404 error and the JS won't run. This process ensures JavaScript files are served correctly alongside HTML in Flask apps.