In this part of the series we’ll be talking about static files in Flask. What are static files in the first place? Well, these are CSS files, JavaScript scripts, images, and so on. So, how do we load JavaScript scripts into our HTML files? How do we link stylesheets? How do we write paths to our images? Also, we’ll integrate Bootstrap into our app to get a whole bunch of beautiful styles out of the box.
You will find the code for this part on Github.
To keep things simple, let’s remove most of the code from the index.html file. It now should look like this:
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Hey there</h1>
{% endblock %}
Let’s now add a folder to store our static files.
Table of Contents
The static Folder
So, where do we put the static files? Well, just like we created a template folder for the HTML templates, we’ll create a static folder for the static files in the root of the application:
Then, we have to add it in the constructor in the app.py file, along with a static_url_path that will determine how we can reach the static folder:
app = Flask(__name__, template_folder='templates',
static_folder='static',
static_url_path='/')
This means we can use the slash ('/') to search for a static file inside the static folder. But we usually don’t keep all the static files together directly inside the static folder.
To keep things organized, we usually create subfolders for all the different types of static files. We can call them whatever we like. Something like this will be just fine:
Now we can use the slash followed by the subfolder name to search the subfolder. With this in place, let’s actually add some static files.
Adding Images
Let’s start with images. To add an image, we use the <img> tag and specify the src and alt attributes. The src attribute is the source, so the path to the image file. The alt attribute is used to deliver alternative text that will be displayed for example in case the image can’t be displayed. So, let’s add an empty <img> tag:
{% block content %}
<h1>Hey there</h1>
<img src="" alt="alternative text">
{% endblock %}
So, let’s add an image to the static/images folder:
I just copied the image from the uploads folder, but you can use any image you like. Now, here’s how we set the src attribute to display the image:
<img src="/images/head photo.jpg" alt="alternative text">And here’s the image displayed in the index page:
Adding Stylesheets
The same way, we can add stylesheets. Let’s add a style.css file inside the css subfolder:
In the index page let’s add a class to the <h1> tag:
<h1 class="greeting">Hey there</h1>And now, using a class selector, let’s define the style to be applied to elements with this class:
.greeting {
color: red;
background-color: black;
text-align: center;
}
For this to take effect, we have to link the stylesheet in the HTML file. We usually do it the head of the base template so that it’s automatically included in all templates that inherit from it:
<head>
...
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
After refreshing the page, we can see the styling is applied:
Instead of creating our own styles, we can add a ready-to-use library, like Bootstrap, which we’re going to take care of in the final section of this part.
Adding JavaScript Scripts
JavaScript scripts are added the same way as the other static files. Let’s add a greeter.js file to the js subfolder:
Let’s write some JavaScript code in it to display a greeting alert when we click anywhere inside the window:
window.onclick = function() {
alert('Hey there')
};
For the script to work, we must load it in the index.html file:
{% block content %}
...
<script src="/js/greeter.js"></script>
{% endblock %}
If you now restart the application and click somewhere in the window, you’ll see the alert:
Now that we know how to add css and js files, we can integrate Bootstrap into our app because this will require from us to add both of these types of files.
Adding Bootstrap
To add Bootstrap, we have to go to the Bootstrap website (https://getbootstrap.com), navigate to Doc (A), then Download (B) and download the Compiled CSS and JS zip file (C):
Unzip the downloaded folder and you’ll see two folders in it:
Open the js folder and copy all the files to the static/js folder:
Next, open the css folder and copy all the files into the static/css folder:
The last thing we need to do for Bootstrap to work is link the stylesheet in the head of the base template and load the script in the body of the base template:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
</head>
<body>
...
<script src="/js/bootstrap.js"></script>
</body>
</html>
Now we’re ready to add Bootstrap classes. To demonstrate it, let’s add a styled button to the index page:
{% block content %}
...
<button type="button" class="btn btn-outline-danger">Beware...</button>
<script src="/js/greeter.js"></script>
{% endblock %}
The button looks like so:
And if you hover over it, it turns to this:
That’s it. We know how to add static files. In the next part of the series, we’ll be talking about sessions and cookies in Flask, so stay tuned.