Static Files In Flask Application
Posted By : Anoop Sharma | 20-Apr-2020
In this blog post, we'll learn how static files in Flask application are served in web application development. Handling and managing static files in an important part of SaaS application development services. Except if it is just an API returning JSON records, in a web application you will have numerous static documents. Pictures, CSS documents, JavaScript records, and so forth. For the most part on your production server, you will need these to be served by a web server, for example, Nginx or Apache as those are quicker and progressively appropriate for such operations.
However, during improvement, you most likely won't have any desire to have a web server on your PC. For that time you probably need Flask to serve the static documents also.
Flask can do it effectively, out of the crate.
Static in Flask
The key is that you put the static documents in an index called static by the primary application record and in the HTML skeleton you refer to the documents as/static/....
I put the CSS record in a subdirectory called CSS and the picture in a subdirectory called images. This isn't a necessity, but may help you understand the code structure easily.
Let's take a look at this example of a simple Flask application structure that renders an HTML Page:
Let's take a look at the code:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def main():
return render_template('main.html')
if __name__ == "__main__":
app.run()
What's happening here is that we are creating a flask app and adding a method that renders the html file which we will create shortly after this step. It renders the html file at our specified route which is home address for now(127.0.0.1).
Have a look at the html file:
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<h1>Hello World</h1>
<img src="static/images/car.png" />
</body>
</html>
In the above html file, we have added our static css file and static image from the image folder. We have added the famous quote that every programmer writes as his/her first program on. Now, this html file will be directly served on your home address.
Now time for adding some CSS, This will turn the color of the words present inside h1 tag to blue. CSS can be applied in three ways (linked, embedded and inline)
h1 {
color: blue;
}
Now time for serving our static file, serving it would need you to start your flask server so that your html file can be served at your home address. Since it is a single page application there are two ways you can serve your static html page. The first one is very simple as how to run a single page python program. Yes, that's right just open your python console and type as follows:
anoop@anoop:~/Documents/Examples/static_serve$ python app.py
And the other way is to start your Flask app using the below command and voila your static file is served on your server.
FLASK_APP=app FLASK_DEBUG=1 flask run --port 3000 --host 127.0.0.1
OUTPUT
Conclusion
You just got to learn how to add static files in your flask application and how to serve them in the application server.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Anoop Sharma
Anoop is a Python developer, who has worked on Python Framework Django and is keen to increase his skillset in the field. He has a zest for learning and is capable of handling challenges. He is a team player and has good enthusiasm.