Todo App with Flask & Vue I: Hello, World!

First chapter of an articles' series about making a todo app using Flask and Vue. Today we will install everything we need for our backend and see what's under Flask's hood.

Flask

Flask is a great lightweight web framework for Python. By itself, it only provides a limited amount of features, such as routing or blueprints. However its strenght lies in the extensions that gravitate around it. In the end, it comes with less boiler plate code than Django and make it easy to quickly prototype applications. And that’s pretty much what we are doing right now.

Installation

First we need a place neat and clean for our app. The best way to do that is using Pipenv. If you come from the Node world, think of it like npm. It creates for you a virtualenv with the python’s version of your choosing and the packages you want.

Like a regular package, we can install it with pip:

pip install pipenv

Now that we have it installed, we need to create a directory or package for our app called todo. Inside we also put app.py, the app’s main file.

mkdir todo
cd todo
touch app.py

Then we have finally create our environment inside todo.

pipenv --python 3.6
pipenv install flask
pipenv shell

The first line tell pipenv we want for our workspace, the second the package we need and the third activate the virtualenv. It “replaces” your python command by the one present in the environment. Write exit whenever you want to get back to the normal python.

Hello, World!

To finish this short introduction to Flask, let’s write an app that render a Hello, World! on the website’s index.

We start by importing Flask and creating a new app.

from Flask import flask
app = Flask(__name__)

Then we define a new route using Flask’s @route decorator. The returned value of the decorated function will be displayed on the page.

@app.route("/")
def index():
    return "Hello, World!"

We end our file by launching our app in debug mode on port 8000.

if __name__ == '__main__':
    app.run(debug=True, port=8000)

Now, just click on localhost:8000 and admire the beautiful Hello, World message.

Conclusion

We now have a clean environment and the beginning of an app. In the next chapter we will go deeper in Flask by adding interactions with a database to store and fetch our todos.