It is crucial to decrease a load of a Flask web application as much as possible. How can you achieve it when some files are changing dynamically and some files are static?
Separating static files from dynamic files takes some load off a webserver. As a result, it makes the process faster and more responsive. It is one of the main concepts in Flask; understanding it will help you, too. That's why in today's topic, we will focus on understanding how to handle static files in Flask.
Static directory
First, let's make one thing clear. When we talk about static files, we mean Javascript, CSS pieces of code, or images that will provide functionality or design features to the site. They are considered static as they're independent of user input and are always supposed to do the same thing. As we discussed in the introduction to the topic, we aim to make things easier for a Flask application. Organizing static files efficiently will serve this purpose. It is always a matter of concern for all web frameworks. Flask has a specific way for that, and it is as given below:
As you can see, we have the static folder. There are several folders inside. If there is a static folder at the application's root level, that is, at the same level as app.py, then Flask will automatically read the folder contents. Let's look at the code written inside. First, app.py:
The job of this part is to run your Flask server, render, and open the layout.html file. Next, style.css:
You do not need a thorough knowledge of CSS to understand it. It just provides color to the site background. Next is layout.html, but some explanations first.
It is now time to handle static files. It is a simple thing; you can do it in two ways:
- Open your console and write this code to run the app.py file:
- Type
flask runin your console; it will show up this message:
Usually, in HTML pages, we can link to external CSS files by providing a relative path to the stylesheet. For example:
<link rel="stylesheet" href="./style.css">But in Flask, we need to configure our application to return a CSS file as static. By default, Flask serves files from a directory named static at the project route. This is why it's necessary to place the CSS file here. In Flask, we define the url_for() function to provide links for static files. We will look at it in the next section.
The url_for() function
Url_for() can create URLs to avoid the pains of changing URLs through an application. Imagine we don't have the url_for() function — in this case, for every change in the root application URL of your application, you need to change the URL on every page. Below, you can see the layout.html file; we've mentioned it in the previous section:
Url_for accepts two variables as a parameter. The first displays the folder name; the second is the file path. Links to static files are placed in the head section of the HTML code. We use attributes to describe a link as a part of a text/CSS file that is a stylesheet. Then, we attribute its location with href with the url_for() function. Alternatively, you can set the static folder path in the app.py file, and then, your code will change like that:
app = Flask(__name__,static_url_path='/static')Your HTML file will contain code in the new format:
<head>
<link rel="stylesheet" href="/static/css/style.css">
</head>However, it is always a good practice to use url_for to create URLs for static files; there's no need to declare the static folder path at every file where we need it.
Conclusion
As a recap, let's mention some important points to take from this topic once again:
- Generally, there are two groups of files: dynamic and static;
- Static files make the process faster and more responsive;
- Static files are found inside the static folder. These files support the design and functionality of the website;
- Static files can be accessed with the
url_forfunction.