Skip to content

#32: First Steps With Flask

It is now time for me to do some web development. I choose the Flask framework because it allows me to start quickly and later add more functionality when I need it.

Install Flask

Flask is a micro web framework that comes with a minimalistic core and uses existing packages to increase the functionality. This gives you a lot of flexibility and if you do not like something, you can replace it.

You can use this command to install Flask in a virtual environment:

1
pip install Flask

A minimalistic application

The simplest possible application with Flask only needs a few lines of code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import flask

app = flask.Flask(__name__)

@app.route('/')
def index():
    return "Hello worldd!"

if(__name__ == "__main__"):
    app.run()

I saved my app in a file called hello.py. You can choose a different name but be aware that you need to set the name for your app accordingly when you try to run it.

Run your Flask app on the command line

Depending on which environment you use to start, you need a different way to set environment variables to start Flask.

For PowerShell on Windows, you can run your app with these commands:

1
2
> $env:FLASK_APP = "hello"
> flask run

In the CMD for Windows you need this syntax:

1
2
> set FLASK_APP=hello
> flask run

On Linux and Mac, you can use these commands:

1
2
$ export FLASK_APP=hello
$ flask run

There is yet another way to run this minimalistic app. Thanks to the conventions of Flask and the code in the lines 9 and 10, we can run the file as we would run any other Python script:

1
2
3
4
5
6
7
>  python .\hello.py
 * Serving Flask app "hello" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Whichever command we use, we should find our application on the URL http://127.0.0.1:5000/ and see the Hello world! message:

You can see Hello world! in the Browser

Run your Flask app in VS Code

If we want to run our little application inside VS Code, we need to do some extra steps, but we get a working debugger in return.

Inside VS Code we need to open the run menu. It is tempting to click on the Run and Debug button, but this will require us to go through all the steps again whenever we want to run our application. Instead, click on the link called “create a launch.js file”:

Create a launch file, do not click the button

In the middle of the top navigation bar starts a little wizard that will create the correct starter file. We need to select Flask as the type of our application:

Select Flask as application

If we did not name our application app.py we need to type in the name of our file:

Write the filename of your application (here: hello.py)

That is all it takes. In our project folder next to our hello.py we now have a file with the name launch.json and this content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "hello.py",
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "0"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload"
            ],
            "jinja": true
        }
    ]
}

Inside the run menu we now get no longer a button to run and debug our application, but instead we see our run configuration next to the green starter arrow:

Your Flask configuration is now available

If we click on this arrow, VS Code will start our application in the debugger:

The VS Code debugger runs with your application

Should you be unable to debug your application after you set a breakpoint, do not waste a lot of time. Go to the extension manager of VS Code and install the previous version of the Python plugin as described here.

Next

We now have a minimalistic Flask application that prints hello world. That is nothing spectacular, but everything we need to extend our application is present. Before we discover more about Flask, I have some more tips for a better development experience in VS Code.