Flask Todo App Tutorial [P1: Hello, World]

Hello everyone! In this tutorial we’ll be making a simple todo task app (see sample here) for multiple users. This is just a pretty simple beginner tutorial to make a very basic todo web application with Flask, WTForms, and SQLAlchemy. (Developed to help me learn Flask) Hopefully in the future I might expand the application with several todo lists and sharing.

This tutorial will be split into several parts:

1. Hello, World (this article)
2. Views and Templating
3. Sign Up
4. The Database
5. Login, Logout
6. Todos
7. Deployment with Digital Ocean
8. Improving Security (optional) *

*coming soon!

Hello, World

In this section, we’ll be downloading the necessary libraries and setting up the basics of what we need to create a Flask application.

Installing Dependencies

First, we need to install Flask*. Several tutorials suggest using virtualenv to avoid clashing library dependencies if you are developing several apps at once. I, however, opted to just install Flask system wide. I recommend viewing Flask installation guide to make the best decision for you. It also has more detailed installation instructions.

For general installation, the command is:

$ pip install Flask

Next, we need to install our other dependencies: WTForms and SQLAlchemy. Installation should be as simple as:

$ pip install wtforms
$ pip install sqlalchemy

And that’s all the installations we require for building the app.

*This is under the assumption you already have python and pip installed. If not, check out python installation and pip installation. Python is the programming-language that the Flask microframework runs on. Pip is a tool for installing python packages.

App Structure

Our web application will have three basic “parts” to it. The front end with our views – HTML files. The back end will have both our database and router in it. Now we’ll setup the folders we need to create our app and house these parts. Our folders and files will in the end look like this:

\ todo (project folder)
     \ templates
          base.html
          ...
     app.py
     tabledef.py
     ...

So let’s setup a main project folder, and inside that a templates folder.

$ mkdir todo
$ mkdir todo/templates

Setting up app.py

In the folder todo, we now need to create app.py. This python file will run our application and is the router.

To setup the app, we’ll first need to import the flask library into the app and put in basic initializations.

from flask import Flask

app = Flask(__name__)

Let’s create our first view (following code should go after the above code).

@app.route('/')
@app.route('/index')
def index():
     return 'Hello, world!'

What this code does, is when the app receives a request for the routes '/' or '/index' it will execute index() which will return the string “Hello, world!”. Let’s add the last piece of code to app.py that will actually run the application (following code should go at the very end of the code):

app.run(debug=True, port=5000)

This will run the code on port 5000 and if any errors occur, will return debugging messages.

After we cd into the project folder, if we go to our console now and run the application with:

$ python app.py

The application should run at localhost:5000.

Closing Words

And that’s it for this part of the tutorial!

You can see the entire source code for this project here. To see only the code up to this part, go here.

Let me know if you have any comments or questions down below. In the next part, we’ll start creating HTML views and templates. Till next time!