Let’s make a Flask application

5 min readApr 18, 2020

What is flask?

Flask is a lightweight web framework written in python. You have to build your file structure by yourself when you use flask. But I recommend you to use flask before you try django.

You can find the source code from this link

Let’s get started and create a simple web application.

In this tutorial I go through following section and make a simple web page and one route using flask framework

Create a virtual environment
Install Flask on virtual environment
Flask file structure
First web page
Make a simple route

Create a virtual environment

In python virtual environments help to separate dependencies from project to project. You can find about virtual environment from this link. Let’s create virtual environment using virtualenv.

Download virtualenv using pip:

pip install virtualenv

Create a project Folder

mkdir project_folder && cd project_folder.

Create a virtual environment in project folder:

virtualenv venv

Activate virtual environment

source venv/bin/activate

Once you activate the virtual environment you can see the name of the virtual environment folder as follows

project_folder yashodperera$ source venv/bin/activate
(venv)project_folder yashodperera$

Quick Tip : To deactivate the virtual environment

deactivate

In this “venv” virtual environment don’t contain any python dependency or software and you can check installed softwares using pip freeze command.

Install Flask on virtual environment

Then, let’s install Flask inside the virtual environment. We use pip the python package manager to install Flask as follows

pip install Flask

Then you can check what are the dependencies installed inside the virtual environment using pip freeze as follows:

pip freeze

It will give the following result. Which are the installed dependencies and versions.

click==7.1.1
Flask==1.1.2
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==1.1.1
Werkzeug==1.0.1

Flask file structure

In Flask you must know the basic file structure and for this we use single module file structure. When flask application gets complex the file structure changes.

templates/
  - index.html
  - about.html
  - base.html
static/
  - css/
    - main.css
  - js/
    - main.js
app.py
requirements.txt

In Flask templates is the folder where all the html files are included and static folder we can put our css and JavaScript files separately. app.py file is the entry point or which starts the development server. requirements.txt file will hold all the dependencies installed in the project.

Hint : To make the requirements.txt from installed dependencies

pip freeze > requirements.txt

First web page

Let’s start coding.

app.py

from flask import Flask        // Import flask to the applicationapp = Flask(__name__)          // Make a flask app
app.static_folder = 'static'   // Define the static folder@app.route("/")                // Make the first route 
def index():                   // Make the function for "/" route
    return "Hello"             // Return "Hello" if __name__ == "__main__":     // Run the app
    app.run(debug=True)

Then run the code using python

python app.py

This will pop up the web browser and it will show the “Hello” on it.

Let’s add the first template to the application. First define the base html.

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta 
        name="viewport" content="width=device-width, 
        initial- scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
        rel="stylesheet"
        href="{{ url_for('static', filename='css/main.css') }}"/>
    {% block head %}    {% endblock %}
</head><body>
    <ul>
        <li><a class="active" href="/">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    {% block body %}
    
    {% endblock %}
</body>
</html>

All the html templates having the common format of having head and body then no point of duplicate this code everywhere. Flask introduce inheritance where any html code can have their parents code as follows.

Navigation bar is also added to the base.html file because it is common to both index.html and about.html

When child.html calls it comes with parent code

Let’s make the index.html page to as the home page

templates/index.html

{% extends 'base.html' %} {% block head %}
    <title>Flask Application</title>
{% endblock %} {% block body %}
    <h1>This is Home</h1>
{% endblock %}

Let’s add some styling to the navbar

static/css/main.css

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}li {
    float: left;
}li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}li a:hover {
    background-color: #111;
}

Then let’s modify the app.py file to render the index.html page

from flask import Flask, render_templateapp = Flask(__name__)
app.static_folder = 'static'@app.route("/")
def index():
    return render_template('index.html')if __name__ == "__main__":
    app.run(debug=True)

Note that render_template function looks at the templates folder for templates. Then the folder name should be templates.

Make a simple route

Let’s make a simple route to go to about page when click the “About” on navigation bar.

Let’s create new html page for about

templates/about.html

{% extends 'base.html' %} {% block head %}
    <title>Flask Application</title>
{% endblock %} {% block body %}
    <h1>This is About</h1>
{% endblock %}

Let’s make another route in app.py to render app.html

from flask import Flask, render_templateapp = Flask(__name__)
app.static_folder = 'static'@app.route("/")
def index():
    return render_template('index.html')@app.route("/about")
def about():
    return render_template('about.html')if __name__ == "__main__":
    app.run(debug=True)

Then finally update the base.html to route to the about.html when clicking about.

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta 
        name="viewport" content="width=device-width, 
        initial- scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
        rel="stylesheet"
        href="{{ url_for('static', filename='css/main.css') }}"/>
    {% block head %}{% endblock %}
</head><body>
    <ul>
        <li><a class="active" href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
    {% block body %}
    
    {% endblock %}
</body>
</html>

Then it is working. This is the basics of making a flask application. Next day we will make a CRUD operations in flask application using SQLAlchemy in flask. Till then bye bye.

All of the above project is can be found in this link

If you have found this helpful please hit that 👏 and share it on social media :)