In my last post, I presented a high level overview of what a web application is. In this post, we'll take a look at how how you can use Flask (a python based app framework) to build applications by breaking down a series of examples, culminating with the app from this official flask tutorial. I won't dive deeply into the code for that example here, as the tutorial above already does that. Instead, I will build up to it with two of my own examples, and provide a visual representation of it.
NOTE: I highly recommend the tutorial if you want a deeper dive into Flask.
What is Flask?
Flask is a Python based micro-framework for building web applications. It's "micro" simply because it's minimalist, meaning it has fewer built-in features than other frameworks.
How is an app constructed using Flask?
Consider a basic app - one that has a single view which simply shows the phrase, "Hello, World!" Using Flask, we can build this app with a single file. This file would be stored in a directory (
app) with a single file (
app |- app.py
The contents of
from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello, World!'
The code above defines an application using the
Flask object (a class that represents an application). This appication serves a single view, which you can request via the route
/. When you request this view, the code attached to this route is executed, and Flask responds with a simple line of text - "Hello, World!"
To run this app on a Linux or Mac machine, you would run the commands:
export FLASK_APP=app export FLASK_ENV=development flask run
Here's what would happen:
- Flask spins up a server on your local computer. This server listens for requests for the domain http://127.0.0.1:5000.
- The view for the route
/would be returned when you visit the base domain above.
What would a more complicated example look like?
The app above is fairly straightforward. Let's try to visualize what a more complicated example would look like by expanding our app to include two more views: one that returns
Foo. and one that returns
Bar. We'll add these new views via a
Blueprint - an object that enables you to group views. It also allows you to better organize your code by enabling you to break your views out into multiple files.
Here's a visual representation of our app:
Note our app is a
Flask object with 3 views, each defined under a
route. Two of our views are grouped via a
We'll need to organize our files a little differently by changing
__init__.py, and by nesting the
app directory in a new directory
flask_example |- app |- __init__.py |- foobar.py
Our code for running the app will not change. However, we need to execute the commands from the
flask_example directory. Why? We do this for namespace reasons - in order for our app file (now
__init__.py) to import our blueprint (defined in
foobar.py), we need to treat the
app directory like a Python module.
Our code for
__init__.py is now:
from flask import Flask from . import foobar app = Flask(__name__) @app.route('/') def hello(): return 'Hello, World!' app.register_blueprint(foobar.bp)
And our code for
from flask import Blueprint bp = Blueprint('foobar', __name__, url_prefix='/foobar') @bp.route('/foo') def foo(): return 'Foo.' @bp.route('/bar') def bar(): return 'Bar.'
What would a slightly more complicated example look like?
The example above is great, but what if you wanted your views to use HTML instead of simple text phrases? Great news! You easily do so by using
templates - Jinja files you can use to construct more complex views.
Let's add a template for each of our views. Please note that I won't get into the specifics of Jinja syntax here, nor will I define the template files. I'll leave that part to you as a creative exercise ;) But if you'd like to learn more, I recommend reading the Jinja docs.
Our app will now look like this:
We'll need to add a new directory for our templates:
flask_example |- app |- __init__.py |- foobar.py |- templates |- index.html |- foobar |- foo.html |- bar.html
And by slightly modifying our code for
from flask import Flask from . import foobar app = Flask(__name__) @app.route('/') def hello(): render_template('index.html`) app.register_blueprint(foobar.bp)
from flask import Blueprint bp = Blueprint('foobar', __name__, url_prefix='/foobar') @bp.route('/foo') def foo(): render_template('foobar/foo.html`) @bp.route('/bar') def bar(): render_template('foobar/bar.html`)
What would an even MORE complicated example look like?
I'll cover one final example:
flaskr, a simple blogging app you can build using an official Flask tutorial. You should be ready to tackle it on your own by now, but I want to give you a visual representation of the app before you start.
The app has 5 views, split between 2 blueprints:
/: The site index. If a user is logged in, shows their posts. If not, shows login options.
/create: Allows a logged in user to create and save a new blog post.
/update: Allows a logged in user to edit an existing blog post.
/register: Allows a user to create an account with a username and password.
/login: Allows a user to login to an existing account.
Note that this app also has an additional component: a mySQL database with two tables:
user (which stores user data) and
post (which stores post data).
With that, here's a visual overview:
Hope you found this helpful! I know that writing this and creating the visualizations above really helped cement the Flask fundamentals for me. The next posts in this series will cover some additional backend basics, in no particular order: logging, testing and algorithm design.