Flask Static Files

The focus of this article is to explain the mechanism behind Flask static files and also highlight how you can take advantage of this functionality in your own web applications.

If you’re a developer building a Flask web application, you may need to include static files such as images, stylesheets, and JavaScript files.

Flask offers a convenient way to serve these static files, allowing you to enhance the user experience and improve the performance of your web application.

Table Of Content-

Flask Static Files:

Create Flask Static Files

As a developer building a web application with Flask, you’ll likely need to include static files like CSS or JavaScript to ensure proper rendering of your web pages.

In most cases, the web server is configured to handle serving these files, but during development, they can be accessed from the static folder within the package or module of your Flask application through the /static URL.

To create URLs for static files in Flask, you’ll use the ‘static’ endpoint.

For example, if you have a script.js file that contains a JavaScript function triggered by an OnClick event in the form.html file, you can create a URL for it like this:

Example:

from flask import Flask, render_template app = Flask(__name__)@app.route('/') def show_site(): return render_template('form.html') if __name__ == '__main__': app.run(debug = True)

Below is the HTML script for form.html:

Example:

To create a JavaScript file in Flask, you can simply create a new file with the .js extension and save it in the static directory.

For example, if you want to create a JavaScript file called script.js, you would save it in the static directory like this:

your_project/
├── static/
│ └── script.js
├── templates/
│ └── form.html
└── app.py

Include greeting() function in the script.js file:

Example:

function greeting() { alert("Greetings users welcome to flask tutorials!") }

To make a CSS file in Flask, you can create a new file with the .css extension and keep it in the static folder.

For example, if you want to create a CSS file called style.css, you should save it in the static folder like this:

your_project/
├── static/
│ └── script.js
│ └── style.css
├── templates/
│ └── form.html
└── app.py

Apply external css on Mr.Examples button:

Example:

#bt{ background-color: black; color: yellow; width: 150px; height: 50px; font-size: 18px; font-weight: bolder; }[be]

Example Explanation

The first line of above code imports Flask framework and render_template function
The second line creates an instance of the Flask class and stores it in a variable called “app“.
The “@app.route(‘/’)” decorator links the function called show_site() to the root URL (‘/‘).
When a user visits the root URL, Flask executes the show_site() function.
The show_site() function uses the render_template() function to generate an HTML response, which is based on the contents of the “form.html” template file.
The “name == ‘main‘” condition ensures that the app.run() method is executed only when the script is run directly.
When the app runs, the Flask development server starts, and the app becomes available on the specified host and port.
The “debug=True” argument is passed to the app.run() method to enable Flask’s debugging mode, which displays detailed error messages when an error occurs in the application.

Serving Static Files in Production

In production, it’s recommended to serve static files using a dedicated web server or a content delivery network (CDN) for better performance.

Flask provides a convenient way to do this by using the “Flask-Assets” extension, which allows you to bundle and compress your static files and serve them through a CDN or a dedicated server.